深入理解CSS中的行高与基线
深入理解CSS中的行高与基线
这篇文章讲的很细致,虽然实用性并不一定很强,但是可以加深理解,但是对于浏览器的具体渲染模式还是没有交代的很清楚,而且这个底层的东西越深究就越没有边界,所以
点到为止,阿弥陀佛
1. 基线、底线、顶线、中线
![[Css精通]深入理解CSS中的行高与基线 - 旧城 - 秋·水落石出](http://img7.ph.126.net/PCtDhlpUL5tUJvrjpm773w==/31243722432787177.jpg)
![行距和行高](https://images.cnblogs.com/cnblogs_com/rainman/139529/o_text_018.gif)
4. 行内框
![行内框](https://images.cnblogs.com/cnblogs_com/rainman/139529/o_text_020.gif)
行内框是一个浏览器渲染模型中的一个概念,无法显示出来,但是它又确实存在,它的高度就是行高指定的高度。
5. 行框
![行框](https://images.cnblogs.com/cnblogs_com/rainman/139529/o_text_021.gif)
Vertical-align:垂直居中
上一节我们讲解了行高与单行纯文字的垂直居中(line-height),而如果行内含有图片和文字,在浏览器渲染出来后,读者可以发现文字和图片在垂直方向并不是沿中线居中,而是沿基线对齐。这是因为,元素默认的垂直对齐方式为基线对齐(vertical-align: baseline)。
CSS语法:vertical-align
- 语法:
- baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <长度> | inherit
- 说明:
- 设置元素内容的垂直对齐方式。
- 参数:
- baseline: 基线对齐;
- sub: 下标显示;
- super: 上标显示;
- top: 顶端对齐;
- text-top: 文本的顶端对齐;
- middle: 中部对齐; //没有研究透的属性
- bottom: 底端对齐;
- text-bottom: 文本的底端对齐;
- 百分比和长度: CSS2,可为负数。
- 初始值:baseline
- 继承性:不继承
此处需要特别注意的是:垂直对齐属性只对文本有效(是指包含了#Text节点的元素节点才能正确地处理vertical-align属性)。同时,该属性不能继承。
属性值详解
在上面一节中,介绍了文本的基线、顶线、中线和底线,还有内容区、行内框和行框,而本节的垂直对齐和这几个概念密切相关。
![](http://www.ddcat.net/web/css/text/img/text_036.gif)
1. 基线对齐(vertical-align : baseline)
![](http://www.ddcat.net/web/css/text/img/text_037.gif)
![](http://www.ddcat.net/web/css/text/img/text_038.gif)
![](http://www.ddcat.net/web/css/text/img/text_039.gif)
![](http://www.ddcat.net/web/css/text/img/text_040.gif)
5. 文本底端对齐(vertical-align : text-bottom)
![](http://www.ddcat.net/web/css/text/img/text_041.gif)
![](http://www.ddcat.net/web/css/text/img/text_042.gif)
7. 上标和下标
![](http://www.ddcat.net/web/css/text/img/text_043.gif)
8. 长度值和百分比
![](http://www.ddcat.net/web/css/text/img/text_045.gif)
测试代码:
<styletype="text/css">
p {vertical-align:baseline; font-size:20px; line-height:60px; background-color:yellow;}
span {background-color: red;}
u {background-color: blue;}
del{background-color: pink;}
</style>
//HTML代码
<p><span>Ajax测试</span><u>Ajax测试</u><del>Ajax测试</del>Ajax测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
默认情况:
![[Css精通]深入理解CSS中的行高与基线 - 旧城 - 秋·水落石出](http://img6.ph.126.net/wIqGTJCadWVrTCQxc1CMdQ==/6597929584749547656.jpg)
其他说明:
1、SPAN、U、DEL标签的 offsetWidth = SUM( 字符 * font-size * 修正系数)(这里,中文的修正系数为1,数字的修正系数0.6,英文字符修正系数差异很大,比如ijl很小,wmk等比较大,大写英文同样修正系数不统一)。
推论:inline元素的背景渲染区域即内容区域大小,直接受到font-size的影响。
对<p>块级元素,块级元素的计算值高度由包含的行框高度累加而成,因此这里height为60px;
3、把 span.style.lineHeight 设置为 15px(从10px变化到60px) ----> 发现没有变化
推断:内容区大小不受line-height影响,line-height用于处理相邻文本行基线间的距离。
4、把 span.style.lineHeight 设置为 70px(从61px变化到80px) ---->行框高度开始随着设置调整
推断:行框高度是行内最高的行内框高度,通过line-height调整。
p元素的height计算值为 span.style.lineHeight值,不由p.style.lineHeight控制。
推断二:不设定height属性的<p>的height计算值为行框高度累加值。
![[Css精通]深入理解CSS中的行高与基线 - 旧城 - 秋·水落石出](http://img6.ph.126.net/Sn5HmrTtOtneL3d4H_RmKw==/6597216001704415456.jpg)
5、把 span.style.verticalAlign= sub;del.style.verticalAlign= super;-->看图说话
推断:增加了行框的高度,上下标基于基线进行移动。
![[Css精通]深入理解CSS中的行高与基线 - 旧城 - 秋·水落石出](http://img0.ph.126.net/Celz7GURZzFTNgPDx2uBcw==/6597717379005375820.jpg)
1、首先确认该行内的基准元素,取line-height值为最大值的元素作为基准;
2、其他文本向基准元素对齐,依据line-height和vertical-align来实现效果;
3、sub、super是改变基线的方式,因此会对行框的最终高度产生影响;
4、top、bottom是行内框对齐,top指该元素行内框的顶端与基准行内框顶端对齐;
5、text-top、text-bottom同样会影响最终行框的高度,是指该元素行内框的顶端与基准元素的内容区顶端对齐(当line-height=内容区高度时,跟基准内容区域顶端对齐。line-height小于内容区域高度时,会出现文本继续上移的现象,line-height设置为0px时,正好是内容区域的垂直中部跟基准内容区域顶端对齐。)
![[Css精通]深入理解CSS中的行高与基线 - 旧城 - 秋·水落石出](http://img2.ph.126.net/T4dU3ikMwd9WqTvw0GhbHg==/6597534860075166952.jpg)
6、百分数和长度值:基于基线进行移动,百分数的计算值为行高*百分数。