目录
1.盒子模型
CSS中的盒子模型意即所有HTML元素都可以看作一个盒子，这个盒子分为四部分：margin外边距、border边框、padding内边距、content内容，具体如下：
总元素宽度=margin左右宽+border左右宽+padding左右宽+content的宽度
总元素高度=margin上下高+border上下高+padding上下高+content的高度
- border边框
- 用border-style来设置边框样式，其值有dotted点、dashed虚线、solid实线、double双重实线边框、groove3D沟槽、ridge3D脊边框、inset3D嵌入边框、outset3D突出边框
- 用border-width定义边框宽度，其值可以是以px或em为单位的数或者thick、medium、thin
- 用border-color设置颜色
- 用border-top(right/bottom/left)-style来指定不同边框的不同属性
- 用border直接简写所有属性在一起，如border: 1px solid red
- margin外边距
- 外边距无背景颜色
- 与border一样，属性可简写
- 其值可取auto、px、em、%等
- 也分top、right、bottom、left四边
- padding内边距
- 与margin一样
- 内边距不受元素的background-color影响
2.Position
position定义了元素的定位类型，具体有：
- static
- relative
- fixed
- absolute
- sticky
1.static
static是元素的默认定位类型，即正常排序。
2.relative
- relative是指让元素相对其原来位置移动，但不改变元素原来位置所占的空间
- 对于它的值，如left:-20px，意思是相对原来左侧位置减去20px，即向左移动20px；而left:20px，即为向右移动20px
3.fixed
fixed定位类型使元素相对于浏览器占有一个固定位置
- fixed定位使元素不占据空间，所以常会与其他元素重叠
- 这种定位是相对于浏览器窗口的，所以不会随滚动条滑动而改变位置
4.absolute
绝对定位是指相对于其父元素来定位，可以使元素定位于任意位置，且不占原本的空间，即会与其他元素重叠。
5.sticky
- sticky是指当元素未超出页面范围时，定位类型就像position，而当用户拉动滚动条使其超出页面范围时，它就变成像fixed一样，相对于浏览器窗口固定位置
- 必须指定其top、left、right、bottom的任意一个值，否则不生效
3.Float
float是一个属性，一般取left和right其中一个值，形象地说，float使元素向着一个方向游过去，并破坏其他元素的位置，使其他元素重新排列
- 对元素添加clear属性，使其一边或两边都不出现浮动元素，避免被破坏，如clear:left;使其左边不能出现浮动元素；clear:both;使其两边都不能出现浮动元素
- 浮动元素碰到其他往相同方向的浮动元素就会靠在一起，若不同，则互不影响
