深入理解CSS的盒子模型

字数 844阅读 133

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视觉格式化

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • 以下文章是我在网上收集的内容,为了记录自己的学习以及为了以后不到处找而记录下来,如果对你有用,请感谢写这些文章的前...
  • 前言 总括: 本文通过实例讲解CSS中最大的难点之一,行内元素的布局,主要是挖掘line-height和verti...
  • 基本框 CSS假定每个元素都会生成一个或多个矩形框,这称为元素框。各元素框中心有一个内容区(content are...
  • <!DOCTYPE html> 3_3HOMEWORK /*! Twitter Bootstrap //! ...