一. 元素
- 块元素
宽高，padding，margin，border都可以设置。
且影响布局，有视觉效果。
独自占一行。 - 内联元素
宽高不可以设置，为里面内容的宽高，高度完全由行高决定（行高默认为字体的1点几倍）。
padding和margin的左右，border可以设置，影响布局，且有视觉效果。
padding和margin的上下可以设置，不影响布局，有视觉效果。
与其他内联元素在一行。 - 行内块元素
和块元素类似，只是不独自占一行 - 宽auto的表现
最小宽度
最大宽度
包裹性
自适应性 - 替换元素
内容可以被替换
尺寸计算不受display值影响，规则优先级从低到高为固有尺寸，HTML尺寸，CSS尺寸。
替换元素去掉src会变成非替换元素，如img会和span一样。 - 浮动元素
包裹性
自适应性
块级格式化上下文（设置浮动的元素，display会自动变为block或table）
破坏文档流（不在正常文档流上，浮起来）
父元素塌陷
浮动元素和行框盒子不重叠
图片的文字环绕 - 定位元素
static默认值，正常文档流。
relative正常文档流，相对自己定位，保留原位置。
absolute脱离文档流，层叠顺序改变，相对于最近的定位不为static的元素定位，不保留原位置。
fixed脱离文档流，层叠顺序改变，相对于视口定位，不保留原位置。
二. 属性
- 行高
vertical-align：baseline，x底边，替换元素下边缘。
vertical-align：middle，x交叉点
行高默认值为字体的1点几倍。
半行距=（行高—em-box）/2
半行距=（行高—字体）/2；
上下行距近似相等实现垂直居中；中文字体下沉，半行距为3.5时，上半行距向上取整4，下半行距向下去整3。
em-box高度为1em，1em=font-size；em设置字体时，em相对于父元素字体大小的单位；em设置margin和padding时，em相对于当前元素的字体。
内容区域（内容区域与字体和字体大小相关，当为宋体simsun时内容区域和em-box相等），带背景色的区域。和设计图上量的（margin，font-size）文字上下边缘不一样，多出来了半行距。
纯内联元素，高度完全由行高决定。
替换元素，高度不受行高影响；行高影响的是幽灵空白节点的高度，决定内联元素的行框盒子的最小高度；行高要想有效果要设置得足够大，比图片高。图片和文字在一行，垂直对齐方式默认为基线。
块元素，高度不受行高影响；通过改变块元素里面的内联元素的高度来改变块元素的高度；块元素还可以通过改变盒模型中的其他属性来改变块元素高度。