博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
行高计算
阅读量:6990 次
发布时间:2019-06-27

本文共 741 字,大约阅读时间需要 2 分钟。

行高计算

在行内格式化上下文中,UA把行内级别的盒子放入行框组成的竖直堆栈。行框的高度由下面规则确定:

1.计算每个行内级别元素的高。对可替换元素、行内块元素、行内表格元素,这个高是它们的marign 盒子的高;对行内盒子来说,这是它们的行高。(参阅:leading,行内盒子的高,高和margin的计算)2.行内级别的盒子根据'vertical-align'属性竖直对齐。当‘top',’bottom‘对齐的时候,可以减少行高。3.行框的高是框最上面到框最下面之间的距离。(包括strut)空的行内元素产生空行内盒子,但是这些盒子依然由margin,padding,border和行高,这些同样会影响行框的计算。

Leading 和 half-leading

CSS假设每一个字体都有字体大小,这指定特定的高在基线上面和深在下面。在这里,我们用A指代高(对给定大小的字体)D指代深度。定义 AD= A + D(AD,从上到下的距离)

UA以相应字体的基线来对齐这些在非替换行内盒子中的字体。然后,对每个字,计算A和D。一个元素中的字可以有不同字形,因此不需要都有相同的A和D。如果一个行内盒子不包含字,这个盒子包含的是strut(一个0宽的不可见字)。这个strut有这个元素第一个可用字体的A和D。

对每个字符,通过 L=‘line-height’ - AD来计算leading。一半的leading在A上面,一半的leading在D下面。

Leading 可能为负值

尽管非替换元素的margin,border,padding不参与行高计算。它们仍然渲染在行内盒子周围。

转载于:https://www.cnblogs.com/diaoxiong/p/5685648.html

你可能感兴趣的文章
最佳实践系列:前端代码标准和最佳实践
查看>>
[leetcode]Combination Sum
查看>>
【技术贴】SqlServer2008 R2 安装失败提示出现以下错误 服务 MSSQLSERVERO
查看>>
android4.0 开机自启动
查看>>
基于Sql Server 2008的分布式数据库的实践(二)
查看>>
android 基站定位
查看>>
Tortoise SVN 使用笔记
查看>>
文件上传~Uploadify上传控件~续(多文件上传)
查看>>
好员工的标准
查看>>
对于发表意见的看法
查看>>
微软职位内部推荐-SDE II
查看>>
Drools
查看>>
MYSQL create database 和 create table 做了一些什么!
查看>>
index_ss hint 使用的运行计划变化对照
查看>>
【经典面试题】实现平方根函数sqrt
查看>>
OSI七层模型具体解释
查看>>
cocos2dx触屏响应(单点触摸)CCTouchBegan,CCTouchMove,CCTouchEnd
查看>>
《古都》--[日]川端康成
查看>>
xcache 安装配置
查看>>
OCP开放封闭原则
查看>>