1.1 块级盒子
块级盒子单独占据一行。块级盒子的高度和宽度为：width+padding+border。为其设置background-color，border也会变色。
width默认值为100%，和auto的变现效果是一样的，即为父元素的宽度，此时水平方向margin会为0。水平margin会自动变化来让盒子占据一行的空间。width为定值时：margin ：10px auto （上下的margin随便设置）让盒子水平居中。垂直方向的margin不会自动补全。 块级盒子与盒子之间的间距(margin)是可以合并的，取其中的大值。
1.2 行级盒子
1.2.1 看得到的行级盒子
display为inline 、inline block的都是行级盒子。input 、textarea 、img 、button标签生成元素的默认也是inline block。
1.2.2 看不到的“盒子”
1.匿名文本
匿名文本(anonymous text)是指所有未包含在任何标签里的字符串。利用匿名文本能很快确定行框baseline和middleline。具体的戳着 确定行框的baseline
2.em框
em框在字体中定义，也称为字符框(character box)。实际的字形可能比其em框更高或更矮。在CSS中，font-size的值确定了各个em框的高度
在chrome中可以验证，选中文字，出现的蓝色块就是em框(我是这么理解的)。该蓝色盒子我称为字体盒子，它的高度的宽度只能font-size有关，而且高度大概一直是font-size的1.3倍。(自己可以去试试)
3.行内框(inline box)
相对于替换元素来说(像input img textarea 和自定义的inline-block)行内框的高度等于元素设置的height+padding+border+margin（这里和块级盒子有所不同）。(自定义的inline-block如果没指定高度则其高度是受line-height影响的)
对于非替换元素，元素行内框的高度等于line-height的高度，像span，i，a 这些。注意有的时候line-height是可能比字体盒子（em框）的高度要小的，这种情况下，行内框的高度还是和line-height保持一致，字体盒子的垂直中线和line-height的重合。
4.行框(line box)
行框是包含该行中出现的行内框的最高点和最低点的最小框。换句话说，行框的上边界要位于位置最高行内框的上边界；而行框的底边要放在位置最低行内框的下边界。
对于没指定高度的块级元素，其高度就是由一个个行框堆起来的。
对于怎么确定行框的高度，需要结合vertical-align 、line-height、font-size这三个属性确定。
在进行行内元素布局时，每个inline box会根据自己的vertical-align去找参照物对齐。然后计算最高的inline box的顶部和最低的inline box的底部间的距离。
vertical-align默认的是baseline 即元素的基线与所在行框的基线对齐，点这 确定行框的baseline 。
感谢：
理解CSS视觉格式化
网友评论