盒子模型：

1: 宽高
2: 边框 border
3：内边距 padding
4：外边距 margin
5：content内容

盒子模型真实宽高 =  宽 + border(左右) + padding（左右） x 高 + border(上下) + padding（上下）

box-sizing 


定位：position

 1：相对定位 relative

   元素被设置 相对定位 后，不会脱离文档流，他原本位置还在。
   定位参考对象：
    1：他原本的位置（左上角）
 
 2：绝对定位 absolute
    元素被设置 绝对定位 后，会脱离文档流，他原本位置不在，被其他元素占据。
    定位参考对象：
    1：如果绝对定位的元素有父元素
      1.1: 父元素已经定位,那么参考父元素的初始位置进行定位参考
      1.2: 父元素没有定位, 那么参考浏览器边框进行定位

 3：固定定位 fixed
    元素被设置 绝对定位 后，会脱离文档流，他原本位置不在，被其他元素占据。
    定位参考对象：
     永远参考浏览器进行定位
   

 4：默认定位
   就是浏览器的默认文档流，自上向下


 z-index: 设置定位元素的层级

   数值越小，越向下
   反之向上