盒子模型
- 宽高：元素的宽高
- 外边距：距相邻元素或上级元素的距离
- 边框：元素的边框
- 内边距：内容距元素边框的距离
粘连问题
-当元素的上边缘和上级元素的上边缘重叠时，此时给元素添加上外边距会导致上级元素联动的效果，
给上级元素添加 overflow: hidden 解决
移动元素有两种方式
- 给上级元素添加内边距，会影响上级级元素的宽高
- 给元素自身添加外边距，推荐使用这种方式
行内元素关于合资模型的问题
- 宽高没有效果，行内元素的宽高只受内容影响
- 外边距的上下没有效果
- 边框，四个边框都会有效果，但是左右边框占显示范围，上下边框不占显示范围
- 内边距，四个方向都生效，但是左右内边距会占显示范围，上下不占显示范围
相邻两个元素，左右外边距是相加，上下外边距是取最大值
定位
- 文档流定位(静态定位)：static，默认定位方式，如果是块级元素，从上到下，如果行内元素，从左向右
- 相对定位：relative，不会脱离文档流，上下左右的值相对于元素的初始位置
- 绝对定位：absolute，脱离文档流，上下左右的值相对于窗口或祖先元素中做过static定位的元素(一般使用relative，因为其它会导致脱离文档流，影响其它元素的显示效果)
- 固定定位：fixed，脱离文档流，上下左右的值相对于窗口
- 浮动定位：float: left/right，脱离文档流，元素可以在当前所在行内左侧或右侧浮动，当撞到父元素的边框或者另一个浮动的元素时停止
- 如果一行装不下会自动换行，换行时肯出现被卡住的现象
- 当所有子元素全部浮动，自动识别的高度为0，通过overflow: hidden解决此问题
-clear：both/left/right 两侧/左侧/右侧不允许有浮动元素(自身元素不会顶上去) - 应用场景：当纵向排列的元素需要改成横线排列的时候，使用浮动定位。
行内元素的垂直对齐方式
- vertical-align: top/middle/bottom/baseline(默认)
