摘要：参考链接是一种围绕文字看不见的的大小与的大小相关。不会让内容成块显示，而是排成一行。若自身没有设置，则父元素的，也与自身的无关。区别在于不论继承与否，，因此有灵活性。相对于字符的高度。通常为字体高度的一半。
参考链接： https://www.zhangxinxu.com/wo...
line box
content area是一种围绕文字看不见的box.content area的大小与font-size的大小相关。
inline boxinline box不会让内容成块显示，而是排成一行。
如果是个光秃秃的文字，则属于匿名inline box。
在containing box里，一个一个的inline box组成了line box。
注：line box高度取决于inline box最高元素的高度line height
注： 若line-height < content area ，则line box要取line-height的值，这也是为什么会重叠的原因。line-height属性取值：
1.%
若自身没有设置line-height，则line-height = 父元素的font-size * %;
即为直接继承父元素计算后的line-height，与自身的font-size无关。
2.length
若自身没有设置line-height，则line-height = 父元素的line-height， 也与自身的font-size无关。
3.number
若自身没有设置line-height，则line-height = 父元素的line-height。
区别在于：不论继承与否，line-height = font-size line-height，因此有灵活性。*
4.normal
与number一样，只是浏览器不同，会有差异，约为1.2。
5.inherit
继承父元素的line-height
vartical align适用于：inline / inline-block / table-cell
理解vertical-align最重要的是先要定line box基线（默认值）：
一般情况下，基线与X底对齐
line box有inline box, 则为最后一个inline box元素的baseline
line box没有inline box, 则为底margin边界，即为盒模型的边界
line box有inline box, 但overflow != visible, 也为line box有inline box
特殊情况，若把inline box最高元素的vertical-align设为middle, 则baseline则为最高元素的中间线
vertical-align取值：
1.top / bottom
使元素的top / bottom与line box的top / bottom对齐
2.middle
使元素的中点与line box的X-height对齐 （题外话：ex相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。)
3.text-top / text-bottom
使元素盒模型的top / bottom与line box文本元素的top line / bottom line对齐
4.sub / super
使元素盒模型的top / bottom与line box 的 sub / sup元素的baseline对齐
5.length
使元素上移 、下移length
6.%
若为0，则为baseline
vertical-align = line-height * %; (可为负）
注：若多行文本，两个inline-box则对齐最后一行的baseline
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112556.html
摘要：水平居中水平居中没有什么好说的啦，对于行内元素使用对于块级元素使用前提是已经为元素设置了适当的宽度垂直居中单行文本多行文本伪元素行内元素伪元素未知宽高绝对居中绝对定位已知宽高负要考虑兼容性浮动元素垂直居中父元素 水平居中 水平居中没有什么好说的啦，对于行内元素使用text-align;对于块级元素使用margin: auto（前提是已经为元素设置了适当的 width 宽度）; 垂直居中...
摘要：但实质上，只要是内联元素，这两个元素都会同时在起作用。而解决方案可以有以下几种元素不使用基线对齐，可以改为对齐元素块状化设置为设置为总结讲解了的各类属性值及其效果起作用的前提是内联元素与都是同时作用在内联元素上的 前言 vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。也就是说，对于块级元素，vertical-align...
摘要：上例中，左边盒子的基线为其底边缘，右边盒子的基线为的基线将右边盒子的行高设置为，即这个的高度为，位置处于中间。 vertical-align的值 线类：baseline（默认）, top, bottom, middle 文字类：text-top, text-bottom 上标下标类：sub, super 数值：1px, 1em - 在baseline对齐的基础上上下偏移一定数值 百分...
摘要：辅助标签代码代码效果废话要让元素和辅助元素在一行，否则会出现水平不完全居中，当使用时，换行会被解析成空格。 首先我们需要知道元素都有哪些种类？ 内嵌元素（display:inline;）如a，span，b，i 【一个不可定制的盒子】 [默认同行可以继续跟同类型标签] [内容撑开宽度] [不支持宽高] [不支持上下的margin和padding] [代码换行会被解析成空] 块...
摘要：某日阅读世界，笔者的一段话鞭挞了我的灵魂。原文是这样的说到这里，我就忍不住多说两句。很多其实工作很多年的前端开发人员，也可能不知道的属性值支持数值，更不知道支持负值，这着实让我很意外。只显示文本的时候行高是。上集完敬请期待中下集 showImg(https://segmentfault.com/img/bVbmTbb?w=277&h=336); 某日阅读《CSS世界》，笔者的一段话鞭挞...
阅读 1445·2021-09-10 11:27
阅读 2399·2019-08-30 15:53
阅读 1315·2019-08-30 13:10
阅读 2966·2019-08-30 11:09
阅读 1073·2019-08-29 17:23
阅读 662·2019-08-29 17:05
阅读 2943·2019-08-29 15:10
阅读 2338·2019-08-29 13:22
