盒子模型（二）——line box

来源：互联网发布：联想网络同传edu8.0.1 编辑：程序博客网时间：2024/06/05 10:09

在详细的介绍line box之前，我们先来了解两个概念：替换元素和非替换元素。

替换元素
替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。
比如：<input type="text" /> ，这是一个文本输入框，当type是其他值的时候，浏览器显示就不一样
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。

非替换元素
(X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。
比如<p>我是猫猫</p>
浏览器将把这段内容直接显示出来。

line box

为了让我们能够更加深入的理解line box，我将按照从大到小的顺序来介绍其相关内容。
他们的包含关系大致如下:

containing box

line boxes

line box

inline boxes

inline box

containing box由多个line box组成。堆叠line boxes的高度就是containing box的高度
每一行内容就是一条line box。
line box由该行的多个inline box组成
inline box包含很多内容，包括em框、内容区、行间距、行内框、行框等等。

那么，我们从最小的部分开始讲起。

em框（character box）

这里指的是字符字形。
通过font-size的值可以确定em框的高度。

内容区（context area）

css假设每个元素都会生成一个或者多个Box，称为元素框，元素框中心有内容区。
内容区对于非替换元素和替换元素有不同的解释。
这里写图片描述
简单来说就是

非替换元素：

宽度自适应，高度由em框决定

替换元素：

元素固有宽高（或是通过css设置的宽高）+可能存在的外边距、边框、内边距。

行间距、行内框、行框、基线

行间距

行间距是由font-size值和line-height值之差决定的。
这个值实际上要分成两半，一半在上，一半在下。所以也可以称之为半间距（half-leading）。
需要注意的是行间距只应用于非替换元素。

行内框

这个框通过向内容区增加行间距来描述
对于非替换元素和替换元素的高度，行内框有不同的解释

非替换元素：行内框高度=line-height
替换元素：行内框高度=内容区高度

行框

包含该行中出现的行内框最高点和最低点的最小框

单纯的文字描述，很难让人理解。不过通过图的话，我们就可以更直观地了解这几个概念。
非替换元素：
这里写图片描述

基线

不同元素的基线位置不同，整个行框会有一个基线，行内元素的位置是基于两者基线对齐

这里写图片描述

inline box

inline box是我们平时所说的具有inline属性的标签（span、b、a、i等等）
如果是个光秃秃的文字，则属于匿名inline box。
这里写图片描述

对于非替换元素而言，inline box的高度只于font-size和line-height这两个属性有关。前者是决定是em框的高度，后者决定的是行高。

vertical-align和line-height

vertical-align是与基线有关的一个属性，它只作用于属性为inline或inline-block（table-cell也可以理解为inline-block水平）的元素。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
允许指定负长度值和百分比值。这会使元素降低而不是升高。
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

<p>这是一幅<img style="border:0;vertical-align:text-top" src="test/eg_cute.gif" />位于段落中的图像。</p> <p>这是一幅<img style="border:0;vertical-align:text-bottom" src="test/eg_cute.gif" />位于段落中的图像。</p>

这里写图片描述

line-height 属性用于设置行间的距离（俗称行高），既可以作用于块级元素，也可以作用于inline box。

该属性会影响行框的布局。
在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

上述的解释可能会让大家误解，所以我再多说两句：
1.对于块级元素，line-height并不能代替height。块级元素的高度是由块级盒子（block-box）决定的，line-height并不能改变其高度。
如果块级元素内部为空，则line-height属性则不会生效。
例如：

<div style="width:100px;line-height:100px"></div>//这样的元素高度为0,所以不会显示内容。

2.对于块级元素，line-height作用的是其中的inline box。如果没有设置高度的话，块级元素的高度由最高的inline box撑起。
例如：

<div style="line-height:100px">我是猫猫！</div>//这时元素的高度为100px。

这里写图片描述

line box

每一行就是一个line box，每个line box都由inline box组成。line box的许多特性与inline box相关。

特性1：

当inline box宽度大于父类容器时，会被拆分成多个inline box，从而生成多个line box。

父类容器宽度足够：
这里写图片描述

父类容器宽度不足：
这里写图片描述

特性2：

line box的高度取决于该行中元素的最高高度。

这个元素可以是line-height（行级盒子模型）决定也可以是由height（块级盒子模型），这只取决于哪个更高而已。

总结

为了方便记忆与理解，我专门做了一份脑图。

由于CSDN设置了最大的图片的宽度（max-width: 602px），看不清楚，所以我把地址贴出了：

http://img.blog.csdn.net/20170828203817435?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFvbWFvbGFvc2hp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

补充：

虽然单个字体字符的宽度只受font-size影响，但是高度却还会受font-family属性和浏览器的影响。（效果甚微）
font-family

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>单个字符字体的宽度</title>    <style>        * {            margin: 0;            border: none;            padding: 0;        }        .fh{            font-family: "SimHei", "黑体", "sans-serif ";        }        .fw{            font-family: "Microsoft YaHei", "微软雅黑", "sans-serif ";        }        .fk{            font-family: "KaiTi", "楷体", "sans-serif ";        }        .fs{            font-family: "SimSun", "宋体", "sans-serif ";        }        div {            margin: 30px auto;            text-align: center;        }        div span{          line-height: 0;        }    </style></head><body>    <div class="fh">        <span>田</span>    </div>    <div class="fw">        <span>田</span>    </div>    <div class="fk">        <span>田</span>    </div>    <div class="fs">        <span>田</span>    </div></body></html>

黑体
宽x高：16x18

微软黑体
宽x高：16x22

楷体
宽x高：16x17

宋体
宽x高：16x18

浏览器

Firefox浏览器-黑体-1em大小（默认大小）：
宽x高：16x18
黑体16*18

chrome浏览器-黑体-1em大小（默认大小）：
宽x高：16x16
黑体16*16

参考文档：
《CSS 权威指南第3版》
http://www.cnblogs.com/fsjohnhuang/p/5259121.html
https://segmentfault.com/a/1190000005155084#articleHeader10
http://www.zhangxinxu.com/wordpress/2010/05/我对css-vertical-align的一些理解与认识（一）/
http://www.zhangxinxu.com/wordpress/2009/11/css行高line-height的一些深入理解及应用/
http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/

阅读全文

0 0