内联格式化模式(line-height原理)
作者:dudo 来源:dudo博客 发布时间:2008-06-29 14:37:00
重要提示:
本文并非一篇简单地介绍内联格式模型(inline formatting model)的文章。相反,它是对内联格式(inline formatting)本质规则和过程 的扼要剖析,是对CSS2中规则的总结。本文的知识点十分密集,即使错过其中一个小小的知识点也可会导致根本性地误解。本文经过了CSS工作 组(CSS Working Group)和多个CSS组织(CSS cmmounity)反复推敲和检查,但是这并是说本文已经做到至善至美了。也可能有些情况这里没 有涉及到,同时有可能文中提到的一些名词术语对于新手来说存在一定理解上的困难。但是我坚信本文得出的结论是正确无疑的。如果你确定 本文存在某方面的谬误,请把你的观点写下来发信到www-style@w3.org进行讨论。谢谢!
前言:
为了清晰地描述内联格式模型(inline formatting model)的工作原理,弄清使用到的专业术语的具体含义非常重要。首先来看几个等式,然后是对这些术语的解释。
em-box = font-size = content-area
content-area + (half-)leading = inline box
inline box(min/max) = line-box
其中,
em-box = 指定字体中定义的em-box(文本本身盒模型的大小)
font-size = em-box中指定用于度量字体显示大小的数值
content-area = 在非置换元素中,盒模型是使用元素内每个字符的font-size的整体大小来描述的;在可置换元素中,则中元素的实际高度加上margin、border、padding的值;
(half-)leading = 每个元素由于font-size和line-height的不同,在content-area的上方和下方产生的差值,并且上下方的差值相等的
inline box = 每个元素的(half-)leading和content-area之和;对于非转换元素,一个元素的inline-box的高度恰好等于它的line-height的值;对于可转换元素,一个元素的inline box高度则正好等于其实际高度加上所有的margin、border、padding等。
line-box=它的上下边界分别是行内所有inline-box的最高点和最低点。
上面的描述中所未涉及到的几点:
content-area和块级元素的内容盒框相似
内联元素的背景会同时应用在元素content-area和padding上
内联元素的边框是围绕在contend-area和padding之外的
内联元素及其衍生盒模型的非转换元素中在垂直方向上应用margin将不会起作用(但是水平方向可以)
可转换元素的margin和border会影响元素line-box的高度,因此也会影响到所在行的line-box高度
此外,inline box是根据vertical-align来处理对齐方式的。上面的说明中没有提到这一点,但是它却CSS2:10.8中介绍的规则。
结论:
在只有一行font-size和line-height相等的内联非置换元素情况下同,解决起来比较简单。content-area直接通过font-size来定义,line-box的高度等于line-height。(后面会有更加充分的解释)
而在同时包含有可置换和非置换内联元素的情况下(什么是可置换、非可置换元素?),它们有不同的font-size和line-height值,问题就得使用下面的方法来解决。对于每个元素来说,content-area的高度取决于每一个非可置换元素的font-size和可置换元素的实际高度加上所有的padding、border和margin。之后再加上leading,一半位于上部,一半位于下部。得出的这个数值就是inline box中用以计算对齐方式的数值。inline-box中顶部最高位置就是line-box的顶部,inline-box中底部的最低位置就是line-box中的底部(也就前面所说的line-box的上下边界由所以inline-box的最高和最底位置来决定)。


猜你喜欢
- 最近需要将使用keras训练的模型移植到手机上使用, 因此需要转换到tensorflow的二进制模型。折腾一下午,终于找到一个合适的方法,废
- 在安装某个包的时候出现如下错误然后按照提示运行python -m pip install --upgrade pip并更新pip后再次运行p
- 话不多说,小工具需求如下: 功能需求 -- 电脑开机后自动执行时间同步 非功能需求 -- 安装执行简单,无需安装额外环境一、代码实现基于以上
- 目录一、常见的高阶函数1.1、filter1.2、map1.3、reduce高阶函数,英文叫 Higher Order function。一
- 触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程。触发器主要是通过事件进行触发被自动调用执行的。而存储过程可以通过存储过程的
- 1、判断请求头来进行反爬这是很早期的网站进行的反爬方式User-Agent 用户代理referer 请求来自哪里cookie 也可以用来做访
- 一: 基本使用:1:环境的安装:pip install flask-sqlalchemypip install pymysql2:组件初始化
- 如下所示:import cv2fps = 16 size = (width,height) videowriter = cv2.VideoW
- 1、闭包的概念请大家跟我理解一下,如果在一个函数的内部定义了另一个函数,外部的我们叫他外函数,内部的我们叫他内函数。闭包: 在一个外函数中定
- 我们编写程序最终目的还是来解决实际问题,所以必然会遇到输入输出的交互问题,python中提供了input函数用来获取用户的输入,我们可以用以
- 本文实例讲述了JS使用百度地图API自动获取地址和经纬度操作。分享给大家供大家参考,具体如下:在实际工作中我们经常会遇到这样的问题,但是当我
- 抛出问题:求一数组如 l = [0, 1, 2, 3, -4, 5, -6],求该数组的最大连续子数组的和 如结果为[0,1,2,3,-4,
- 以前写点小程序其实根本不在乎并行,单核跑跑也没什么问题,而且我的电脑也只有双核四个超线程(下面就统称核好了),觉得去折腾并行没啥意义(除非在
- 一、PK(主键约束)1、什么是主键?在了解主键之前,先了解一下什么是关键字关键字:在表中具有唯一性的字段,比如一个人的身份证号,学号。一个表
- Vue 3.0 正式发布了,喜大普奔😁。新的语法又要学习一阵阵,不过需要在生产环境下大面积使用,可能需要等到它的周边工具:vuex,vue-
- 使用软件:MySQLMigrationTool 提示数据过大,无法导入。修改my.cnf文件的max_allowed_packet = 10
- Saver的用法1. Saver的背景介绍我们经常在训练完一个模型之后希望保存训练的结果,这些结果指的是模型的参数,以便下次迭代的训练或者用
- 最近有个需求,用多线程比较合适,但是我需要每个线程的返回值,这就需要我在threading.Thread的基础上进行封装import thr
- MySQL内部复制功能是建立在两个或两个以上服务器之间,通过设定它们之间的主-从关系来实现的。其中一个作为主服务器,其它的作为从服务器。本节
- 多级联动下拉选择框,动态获取下一级,每一级数据为XML,可支持无限级(浏览器端需要Microsoft.XMLDOM支持)项目需要,一个材料类