摘要:默认情况下,行内元素不会以新行开始,而块级元素会新起一行。常见的内联元素有分类替换元素在中,可替换元素的展现效果不是由来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于的。
前言
在写作本文章前原本打算只是复习一下 line-height 和 vertical-height 这两个属性而已, 结果发现掉进了一个大坑网上有很多篇文章看的我云里雾里的, 最后决定还是从头来一遍吧, 这篇文章是这次的一个记录.
这次的故事虽然时因为 line-height 和 vertical-align 这两个属性引起的, 但是实际上本篇文章中主要探讨的话题是 "文本是如何渲染", 虽然这两个属性与话题关联很大但是本文中不会过多的提及它们, 请确保熟悉它们.
内联元素(行内元素)你也可以直接跳过这章, 去阅读后面精彩的部分, 如果遇到了概念问题可以在回来进行查阅.
我们这里不会仔细的讨论 "内联元素", 只是为了后面的内容做铺垫, 这些内容可能需要你提前预习.
另外 "内联元素" 和 "行内元素" 实际上是同一个东西只是叫法不同, 但是本篇文章中没有统一叫法.
表现一个内联元素只占据它对应标签的边框所包含的空间。
默认情况下,行内元素不会以新行开始,而块级元素会新起一行。
常见的内联元素有:
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
分类 替换元素在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。
典型的替换元素有:
非替换元素
那些没有 "特异功能" 的 "内联元素" 就是 "非替换元素", 典型值如下:
布局
内联元素除了 "行内元素不会以新行开始" 这种大家都知道的特性外, 还有几点特殊的表现. 例如块级元素上的几个常见属性:
margin
padding
border
这些属性对于内联元素来说不会影响其垂直高度, 但是这不意味着这些内容被裁剪掉了而是因为 margin 是透明的而 padding 通常来说也是透明的.
唯一例外的是 border 它可以被看到, 不过依然不会影响垂直高度:
图片中文字 "Emmm" 被 包裹了起来并且设置了 margin 和 padding 和 border 请仔细观察在 "垂直方向" 实际上高度并没有增加.
注意:这种表现只会出现在 "非替换元素" 上, "替换元素" 的表现是不同的后文中会提到.
字体我们先从字体开始, 因为文本布局的基本单位毫无疑问是由文字组成的:
hello world
当讨论的文字的时候, 最常见的有关 css 属性就是 font-size 了, 通常认为 font-size 指定的值就是文字的大小.
想要证明 font-size 不等于 "字体大小" 实际上非常简单, 打开浏览器的开发者工具你就可以证明这点, 例如我们有如下的代码:
hello world
惯性思维会让我们认为这个元素的大小就是 25px .
哈哈!欢迎来到css世界:
上图中我们看到一个 font-size:25px 的元素却占据了 32.8px 的高度的空间.
实际上, font-size 属性与你看到的实际字体大小之间的具体关系由字体的设计者来确定. 这种关系设置为字体本身中的一个 em 方框(有人也称为 em 框).css权威指南(第三版)
你设置的 font-size 实际上控制的是文字的 em框 而不是字体的本身的大小, 而 em框 与文本之间的间距是由字体的设计者决定的.
em框 的概念就类似小学使用的田字格, 所有字体都相对于田字格进行书写.
不过按照上面的理解, font-size 控制的是 em框 的大小, 按照这样的设计字体大小至少不会超过 "25px" 才对.
没错实际上大部的字体都严格遵守了 em框 的大小限制, 当我们将 line-height 大小设置为 font-size 一样的时候:
hello world
我们发现字体渲染大小都是小于或者等于 "25px" 的:
那么多出去的高度是从哪里来的?
实际上字体作者有相当大的权力来控制字体,不仅可以让字体大小超过 em框, 还可以指定字体的上下留白空间.
具体可以参考这篇文章, 从制作字体的角度解释了字体的渲染表现, 从而可以解释 "不同字体之间为什么差异这么大" 这个令人头大的问题.
line-height 的默认值在MDN上对于 line-height 有如下大致的描述:
当 line-height 使用默认值的时候(这个值是 normal), 这个值约为 1.2(不同浏览器不同), 取决于元素的 font-family.
注意
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/116145.html
摘要:默认情况下,行内元素不会以新行开始,而块级元素会新起一行。常见的内联元素有分类替换元素在中,可替换元素的展现效果不是由来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于的。 前言 在写作本文章前原本打算只是复习一下 line-height 和 vertical-height 这两个属性而已, 结果发现掉进了一个大坑网上有很多篇文章看的我云里雾里的, 最后决定还是从头来一遍吧, ...
摘要:源码漫游指南一作者秘塔科技算法研究员前几天发布了第五届顶级语言交互排行榜,语言继续稳坐第一把交椅,并且相比去年的排行情况,拉开了与第二名的距离去年第二名的排名得分为。包含字节码相关的底层抽象。字节码对象的实现。源文件执行结束后的清理工作。 Python源码漫游指南(一) 作者:秘塔科技算法研究员 Qian Wan 前几天IEEE Spectrum发布了第五届顶级语言交互排行榜,Pyth...
摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...
摘要:深度学习浪潮这些年来,深度学习浪潮一直冲击着计算语言学,而看起来年是这波浪潮全力冲击自然语言处理会议的一年。深度学习的成功过去几年,深度学习无疑开辟了惊人的技术进展。 机器翻译、聊天机器人等自然语言处理应用正随着深度学习技术的进展而得到更广泛和更实际的应用,甚至会让人认为深度学习可能就是自然语言处理的终极解决方案,但斯坦福大学计算机科学和语言学教授 Christopher D. Mannin...
阅读 25628·2021-09-29 09:41
阅读 4786·2021-09-10 11:20
阅读 1918·2021-09-09 09:32
阅读 1880·2019-08-30 15:44
阅读 3191·2019-08-29 17:13
阅读 2808·2019-08-29 14:14
阅读 2060·2019-08-29 14:11
阅读 3220·2019-08-29 12:36