2018-08-28

盒子模型

• 宽高：元素的宽高
• 外边距：距相邻元素或上级元素的距离
• 边框：元素的边框
• 内边距：内容距元素边框的距离

粘连问题

-当元素的上边缘和上级元素的上边缘重叠时，此时给元素添加上外边距会导致上级元素联动的效果，
给上级元素添加 overflow: hidden 解决

移动元素有两种方式

1. 给上级元素添加内边距，会影响上级级元素的宽高
2. 给元素自身添加外边距，推荐使用这种方式

行内元素关于合资模型的问题

1. 宽高没有效果，行内元素的宽高只受内容影响
2. 外边距的上下没有效果
3. 边框，四个边框都会有效果，但是左右边框占显示范围，上下边框不占显示范围
4. 内边距，四个方向都生效，但是左右内边距会占显示范围，上下不占显示范围

相邻两个元素，左右外边距是相加，上下外边距是取最大值

定位

• 文档流定位(静态定位)：static，默认定位方式，如果是块级元素，从上到下，如果行内元素，从左向右
• 相对定位：relative，不会脱离文档流，上下左右的值相对于元素的初始位置
• 绝对定位：absolute，脱离文档流，上下左右的值相对于窗口或祖先元素中做过static定位的元素(一般使用relative，因为其它会导致脱离文档流，影响其它元素的显示效果)
• 固定定位：fixed，脱离文档流，上下左右的值相对于窗口
• 浮动定位：float: left/right，脱离文档流，元素可以在当前所在行内左侧或右侧浮动，当撞到父元素的边框或者另一个浮动的元素时停止
• 如果一行装不下会自动换行，换行时肯出现被卡住的现象
• 当所有子元素全部浮动，自动识别的高度为0，通过overflow: hidden解决此问题
  -clear：both/left/right 两侧/左侧/右侧不允许有浮动元素(自身元素不会顶上去)
• 应用场景：当纵向排列的元素需要改成横线排列的时候，使用浮动定位。

行内元素的垂直对齐方式

• vertical-align: top/middle/bottom/baseline(默认)