总结position，盒子模型

一、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，实际上是给内容+内边距+边框设置的宽度和高度