line-height的使用与vertical-align有何不同
Admin 2022-07-04 群英技术资讯 397 次浏览
几个概念
通过一段代码可以理解一下:
div { background-color: #ccc; font-size: 20px; color: #fff; } span { color: red; } <div>文字1<span>文字2</span>文字3</div>
白色的文字就是一个匿名 inline box,红色的文字是一个由 span
包裹的 inline box。这三个 inline box 组成一个 line box,可以理解为灰色的区域,因为在这个例子里就是由一个 line box 撑开了 div
。如果有多行的文字,那就有多个 line box。
关于 content area,W3C 有一段这样的解释:
CSS 2.1 does not define what the content area of an inline box is (see 10.6.1 above) and thus different UAs may draw the backgrounds and borders in different places.
这篇文章对非替换元素 content area 的定义就是自有宽高加上 margin,padding 以及 border。我认为应该将 content area 理解为 content box。
line box 高度
浏览器会计算 line box 中每一个 inline box 的高度,对于不同的 inline box 计算方式有所不同:
如果是一个替换元素(比如 img
,input
),inline-* 元素或者是 flexbox 中的子元素,高度由其 margin box 决定;
inline-block 元素:
div { background-color: #ccc; color: #fff; } span { display: inline-block; height: 30px; margin: 10px; background: #fff; color: red; } <div>xxx<span>xxx</span>xxx</div>
这里 span
inline box 的高度就是 height + margin 2。如果 height 的值是 auto,高度就是等于 line-height + margin 2。
如果是一个非替换元素,高度由它的 line-height 决定,而不是 content area,虽然有时候看起来像 content area 撑开了 line box 的高度。
div { background-color: #ccc; font-size: 20px; color: #fff; font-family: Sana; } span { background: #fff; color: red; } <div>xxx<span>xxx</span>xxx</div>
这张图片可以明显地看出撑开 line box 的是 line-height,而不是 content area。
这篇文章用了 virtual-area height 来表示 line-height 撑开的高度,而我的理解其实就是 inline box 的高度。
line box 中所有 inline box 的最高点以及最低点决定了它的高度(该计算包括了 strut 的高度,后文会提到 strut)。
非替换元素的的 margin,padding 以及 border 并不会影响 line box 高度的计算。当一个 inline-level box 的 line-height 小于 content area 的时候,line box 的高度就会小于 content area,此时元素的 background 以及 padding 等就会溢出到 line box 之外。
以下代码可以说明这个问题:
div { background: #eee; border: 1px solid #000; box-sizing: border-box; font-size: 50px; line-height: 10px; } span { background: red; margin: 10px; padding: 10px; } <div><span>xxx</span></div>
leading:
content area 的高度与 inline box 的高度差就是 leading,这个 leading 会等分被添加到 content area 的顶部与底部,所以说 content area 永远位于 inline box 的中间(垂直居中)。
strut:
浏览器认为每一个 line box 的起始位置都存在一个宽度为 0,没有任何字符的 匿名 inline box,称为 strut,这个 strut 是会从父元素继承 line-height 的,因此它的高度会影响整个 line box 高度的计算。
一个例子
div { background: #eee; border: 1px solid #000; box-sizing: border-box; } <div><img src="./image.png" alt=""></div>
在图片中可以看到 img
与外层的 div
存在一个间隙,这就是上文提到的 strut 造成的。
在这个例子中,默认情况下 img
的底边与父元素的基线对齐(img { vertical-align: baseline }
),而这个基线实际上就是 strut 基线所在的位置。如下图所示:
strut 其实就相当于一个不可见的字母 x,上文已经提到 strut 本身是具有 line-height 的,所以就导致图片底部多了一段间隙。
总结一下存在间隙原因:
对应的解决方案:
W3C 中对于 line-height 的解释是这样的:
On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."
我的简单理解是,对于由行内元素组成的块级元素而言,line-height 决定了 line box 的最小高度,浏览器会假定每一个 line box 以一个宽度为 0 的 inline box (strut)开始,而这个 strut 从父元素继承到 font 以及 line-height。
line-height
的值推荐使用数值,而不是使用 em 单位,因为 em 单位会根据从父元素继承到的 font-size
来计算行高。vertical-align
W3C 对 baseline 以及 middle 的定义如下:
baseline: Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
元素基线与父元素基线对齐,如果元素没有基线,比如 img
,则使用 margin 底边与父元素基线对齐。
middle: Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
元素的垂直中点位置与父元素的基线加上一半 x-height 的位置对齐。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
CSS元素固定底部有什么实现方法,具体怎样做?在实际项目的操作过程或是学习过程中,不少人都会遇到这样的问题,接下来就让小编带大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
本章给大家介绍html5如何利用canvas实现图片转素描效果。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
在css中,圆角属性值能用百分比表示;“border-radius”属性是css中用于设置元素圆角的属性,当属性值用百分比表示时,就会以百分比定义圆角的形状,语法为“border-radius:数值%;”。
方法:1、利用animation属性给元素绑定循环旋转动画;2、利用@keyframes规则设置动画的旋转动作;3、用“元素:active{animation-play-state:paused}”语句设置元素循环旋转时,点击元素停止旋转。
本章给大家介绍在html5中如何用SVG制作酷炫动态图标?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008