分类
CSS

内联盒模型-关于line-box的探究(二)

探究一链接

本次内容:图片与文字同时存在时的渲染规则

灰色区域:line-box

背景1:文字行高:normal,fontSize:14px,图片宽500px,高10px

image - 内联盒模型-关于line-box的探究(二)

解析:图片是inline元素,他所处的底部与基线一致,基线是小写x的下方x端所处的位置,此时x的virsual area(x的line-height所占据空间)构成了line-box

背景2:文字行高:normal,fontSize:14px,图片宽500px,高40px

image 2 - 内联盒模型-关于line-box的探究(二)

解析:图片的基线是图片的底部,文字的基线是小写x的下端,此时内联元素中各个元素的基线不同,因此要找出一个公共的基线,于是让每个元素的content-area往顶部排列,图片的content-area高度为当前图片的高度,文字元素的content-area与font-size和font-family有关,与line-height无关,于是公共的基线为图片的底部,文字的基线需要与公共的基线重合。于是line-box由图片和文字共同组成

背景3:文字行高:0,fontSize:14px,图片宽500px,高10px

image 3 - 内联盒模型-关于line-box的探究(二)

解析:由背景二的解析可知,现在公共的基线是x元素下端,而x没有content-area,图片的content-area为10px,line-box由图片决定

背景4:文字行高:0,fontSize:100px,图片宽500px,高10px

image 4 - 内联盒模型-关于line-box的探究(二)

解析:x没有content-area但line-box还是变大了,这是由于x字体比较大时,字体的content-area的中线也会参与到line-box的构建中,因此line-box变大了

背景5:文字行高:0,fontSize:100px,图片宽500px,高10px但是不放文字

image 5 - 内联盒模型-关于line-box的探究(二)

解析:图片的外层是div块状和模型,里面只有img一个元素,当块状盒模型内部有内联元素时会自动创建一个幽灵子节点,相当于在内部添加了一个没有宽度的x,会影响line-box

总结

  1. 图片的基线是图片的底部,与公共的基线平齐(vertical-align会影响)
  2. 文字的基线和content-area的中线都会参与到line-box的构建中去
  3. line-box就是内联盒模型的文档流占据的空间
  4. 在盒模型中存在内联元素会自动创建幽灵子节点