line boxes盒模型

川长思鸟来 2022-08-07 05:46 7阅读 0赞

<p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p>

这段html代码涉及4种boxes:

1.首先是p标签所在的containing box,此box包含了其他的boxes;

2.然后就是inline boxes,如下图标注

iinline boxes不会让内容成块显示，而是排成一行，如果外部含inline属性的标签（span,a,cite）,则属于inline boxes,如果是个光秃秃的文字，则属于匿名inline boxes。

3. line boxes

在containing boxes里，一个一个的inline boxes组成了line boxes,这是浮动影响布局的关键box模型。

4.content area

content area是一种围绕文字看不见的box.content area的大小与font-size的大小相关。

正常的图文混排
    默认情况下，图片与文字混排应该是这个样子：图片与文字基线对齐，图片与文字在同一行上，如下图所示：
    
    上图中，图片为一个inline boxes，两边的文字也是inline boxes。由于line boxes的高度是由其内部最高的inline boxes的高度决定的，所以这里line boxes的高度就是图片的高度。此时图片与文字是同一box类型的元素（都是inline boxes），是在同一行上的，所以，默认状态下，一张图片只能与一行文字对齐。而要想让一张图片要与多行文字对齐，您唯一能做的就是破坏正常的line boxes模型。

含有浮动属性的图片与文字
    先看一下图片添加了float:left样式后的表现，见下图：

正常情况下，图片自身就是个inline boxes,与两侧的文字inline boxes共同组成了line boxes,但是一旦图片加入了浮动，情况就完全变了。可以认为是浮动破坏了img图片的inline boxes特性，至少有一点可以肯定的是，刚才的图片的inline boxes不存在了。一旦图片失去了inline boxes特性就无法与inline boxes的文字排在一行了，其会从line boxes上脱离出来，跟随自身的方位属性，靠边排列。

这个从line boxes上脱离的浮动元素其实就是一个躯体，一个空壳子，表象。因为其没有inline boxes.。这个inline boxes有个很重要的概念。

在目前的css世界中，所有的高度都是由两个css模型产生的，一个是box盒状模型，对应css为“height+padding+margin”,另一个是line box模型，对象样式为line-height。前者的height属性分为明显的height值和隐藏的height值，所谓隐藏的height值是指图片的高度，一旦载入一张图片，其内在的height值就会起作用，即使看不到"height“这个词。而后者针对于文字等这类inline boxes的元素（图片也属于inline boxes,但其height比line-height作用更凶猛，故其inline boxes的高度就等于其自身的高度，对line-height无反应），inline boxes的高度直接受line-height控制（改变line-height文字拉开或重叠就是这个原因），而真正的高度表现则是由每行众多的inline boxes组成的line boxes(等于内部最高的inline boxes),而这些line boxes的高度垂直堆叠形成了containing box的高度，也就是我们见到的div或p标签之类的高度。所以对于line box模型的元素而言，没有inline boxes,就没有高度了，而浮动恰恰是将元素的inline boxes破坏了，于是这些元素就没有高度了。

浮动破坏了图片的inline box，产生了两个结果：一是图片无法与文字同行显示，脱离了其原来所在的line box链；二是没有了高度（无inline box -> 无line box -> 无高度）。而这些结果恰恰是文字环绕图片显示所必须的。

浮动元素与绝对定位元素的差别：

最主要的在于，绝对定位的元素脱离了文档流，而浮动元素依旧在文档流中。这造成的显示差异就是：同处于文档流中的文字实体不会与浮动元素重叠，而会与绝对定位元素重叠。这就是文字环绕显示的重要原因之一：虽然图片实际占据的高度为0，但是由于其宽度实体存在（包裹性），同样是content area实体的文字不会与之重叠（外部的容器盒子containing box(p,div,ul,li)会重叠）。