一、position 定位
-
position:static;默认定位
块级元素独占一行，行内元素默认排列在一行，也就是说每个元素执行各自的默认属性； -
position: relative;相对定位
相对本身位置进行位移
如：
right:20px 在原来的位置往左移动 20 px;
top:20px 在原来的位置往下移动 20 px;
left:20px 在原来的位置往右移动 20 px；
bottom:20px; 在原来的位置往上移动 20 px;
注意：本来向右移动现在是向左移动，本来想上移动现在是向下移动
-
position: absolute绝对定位
绝对定位是特殊的相对定位；
绝对定位是相对它最近的 已定位(position 不能是默认的 static) 的父级元素进行定位的；
如果它的父级元素都没有定位，那它就相对于浏览器首个窗口进行定位的（浏览器有滚动条，往下拉不算首个窗口）； -
position: fix;固定定位
根据浏览器显示进行定位的，即使窗口有垂直滚动条，也是显示能看到窗口就那么大。
说明:可以用来做 “回到顶部”功能。
二、盒子模型
由外边距、边框、内边距和内容四个部分组成。
1
2
第二张图中土色是外边距、橙色是边框、灰蓝色是内边距、蓝色是内容。
注释：margin: 外边距 处理块级元素与它上下左右其它块级元素的排列方式；给块级元素设置 width 和 height 属性，默认是给内容设置的 width 和 height。
box-sizing: content-box;(默认属性)；使用box-sizing: border-box;之后再给块级元素设置 width 和 height，实际上是给内容+内边距+边框设置的宽度和高度
