CSS盒子模型（box-sizing属性）
所有的HTML元素都可以看做盒子，这个有三层 从外到内依次用：边距（margin）、边框（border）、填充（padding）这三个属性包裹着其中的内容（content）。每个盒子都有自己的大小和位置，同时也影响着其他盒子的大小和位置。
两种盒子模型：（W3C盒模型与IE盒模型）
W3C盒模型与IE盒模型的区别就是对宽高的定义不同。
W3C认为：宽高是内容区的宽度（只包含节点显示的具体内容）
IE认为：宽高是显示效果的实际效果（包含节点的全部内容）
Chrome中默认的盒子模型为content-box；即W3C盒模型 可以通过box-sizing属性设置： 1：box-sizing：content-box（默认）
元素的width = content的宽度
2：box-sizing：border-box（常用）
元素的width = content的宽度 + padding + border
CSS定位：（position属性）
首先记住css中的五种定位方式static、relative、absolute、fixed、sticky；
static：position属性的默认值，如果省略position属性，浏览器就默认认为该元素是static定位，浏览器会按照文档流的顺序，决定每个元素的位置，也就是“正常的页面流”，每个块级元素占据自己的区块，元素之间不产生重叠，这就是元素的默认位置。 注意：static属性的元素是浏览器自己觉得的，其top,right,bottom,left,z-index这五个属性无效。
relative: 相对定位，不脱离文档流的定位，可以通过top,right,bottom,left这几个属性改变自己的位置，其仍然占据其之前的页面流位置。
absolute：绝对定位，脱离文档流的布局，可以通过top,right,bottom,left这几个属性改变自己的位置，不占据原有的页面位置，遗留下来的空间可以由后方的元素填充。定位的起始位置看父元素的位置，如果其父元素的定位属性为static，则定位的起始位置直接看body。
fixed：固定定位，相对于视口（浏览器窗口、viewport）进行偏移，通过top,right,bottom,left这几个属性改变自己的位置，定位的其实位置不看任何元素，只根据浏览器窗口进行定位，且不随浏览器的滚动改变（比如某些网页固定在网页右下角的小广告）。
sticky：这个有点像relative和fixed的结合体，当不设置top,right,bottom,left时，和relative一样，具体规则时，当页面滚动的时候，父元素开始脱离视口时（当部分不可见或完全不可见时），就和fixed的效果一样，会固定在页面上，像是fixed，不跟随父元素。
