摘要：关于盒子模型相关的东西，我们会多带带去仔细说明，因为非常重要，这里只是给出简单的说明，包括下面的行高等一样内容区域一种围绕着文字看不见的盒子，大小和有关。
作者：心叶
时间：2018-04-28 09:23
为什么明明说的是垂直对齐方式，开始却要说盒子模型，还是行内盒子模型，因为垂直对齐方式控制的对象就是这个模型，因此我们先了解一下控制的环境，再看如何控制。
关于盒子模型相关的东西，我们会多带带去仔细说明，因为非常重要，这里只是给出简单的说明，包括下面的行高等一样：
内容区域（content area）：一种围绕着文字看不见的盒子，大小和font-size有关。
内联盒子（inline boxes）：不好表达，举例子解释一下，被inline水平标签（em、a和span等）包含的称为"内联盒子"，如果是光秃秃的文字就称为"匿名内联盒子"。
行框盒子（line boxes）：一行就是一个行框盒子，里面由一个个内联盒子组成，应该不是太难理解。
包含盒子（containing box）：由一行行的行框盒子组成，比如"
单纯的文字被inline水平标签包含的文字
"。行内盒子模型布局有一个问题，随便提一下：在使用display:inline-block使元素位于一行时元素之间有间隙是由于一些比如换行符等空白字符导致的（解决方法是对外壳设置font-size:0px，里面小格子再恢复font-size为需要的值，当然别的方法也有，比如标签全部一行，不要换行，不过这个感觉好用些）。
还有一个技巧，对于想整体居中，内部左对齐的布局，为了最后一行不足一行的时候不会突兀的居中，可以添加几行和内容元素一样宽，高为零的行内元素，非常好用。
此外，还有几个常用的属性，列举一下：
white-space：属性设置如何处理元素内的空白，比如是否换行等。
第二步：行高。为什么行高也是要提前说明一下，因为垂直对齐是在一行中进行的，行高代表的是实际高，有必要了解一下，帮助去寻找对齐线条。
行高定义的是二行文字基线（baseline）的距离（不一定准确，更严格说应该是行框盒子的实际高度，不是高度），内容区域（content area）高度+行间距(vertical spacing)=行高，行高由于继承，无处不在，包括单行文本也不例外；其次，高度的表现不是行高而是内容区域高度+行间距，而且内容区域高度只与字号和字体有关，和行高没有任何关系。
简单的说就是：行高决定了内联盒子高度，行间距可大可小、可正可负，始终保证行高等于高。
内容区域高度不一定是font-size，还取决于字体，不同字体不一样，在simsum下二者是一样的。
line-height取值数字时所有可继承根据font-size重新计算，而取百分百和em时，当前元素根据font-size计算之后把计算的结果继承给下面元素，区别有点大。
替换元素比较特别，一般有内在尺寸和宽高比，不可以简单的去理解，遇到要小心，后期关于该元素会专门去讨论。
第三步：正文。垂直对齐方式是用来设置垂直对齐方式，所有垂直对齐的元素都会影响行高，修改的是自己的什么线垂直对齐父元素的什么线，比如默认自己的基线对齐父元素的基线；如果取值百分百，计算是相对行高计算的。
根据前置知识你应该可以猜到，其是一个inline-block、table-cell（比如td元素）或inline依赖型元素。
如果设置为数值，百分百或em等单位，表示的是在默认基础上偏移的对齐。
第四步：注意点。inline-block的基线是正常流中最后一个line box的基线，除非，这个line box里面既没有line boxes或者本身overflow属性的计算值而不是visible，这种情况下基线是margin底边缘。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113187.html
摘要：在元素的和固定的情况下，一点小的改变也很有可能对布局造成影响。其中高度有可能是由元素的内容决定的。行高的上下边界是红线。元素也有和上下边界，元素是需要对齐的对象。因此文字的最高点超过了的高度。在第二种情况下，另外两个元素的位置发生了下移。 写在前面的话 开始学习前端以来，在CSS相关知识当中困扰我最多的就是Vertical-Align这个属性。在stackoverflow上查找相关问...
摘要：垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在上提问了个问题关于垂直居中，大家有没有什么比较好的建议。 垂直居中相关知识总结 前言 工作中用到了很多关于垂直居中相关的知识之前，在SF上提问了个问题CSS关于垂直居中，大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助，前辈们给的答案都非常多也各式各样，我觉得有必要把大家的回答总结一下。 方法总结 一、绝对定...
摘要：垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在上提问了个问题关于垂直居中，大家有没有什么比较好的建议。 垂直居中相关知识总结 前言 工作中用到了很多关于垂直居中相关的知识之前，在SF上提问了个问题CSS关于垂直居中，大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助，前辈们给的答案都非常多也各式各样，我觉得有必要把大家的回答总结一下。 方法总结 一、绝对定...
摘要：上一篇世界笔记二盒模型四大家族下一篇世界笔记四流的保护与破坏写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的，而头疼不已。 上一篇：《CSS世界》笔记二：盒模型四大家族下一篇：《CSS世界》笔记四：流的保护与破坏 写在前面 在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的1px，2px而头疼不已...
阅读 2758·2023-04-25 20:35
阅读 1018·2021-11-12 10:35
阅读 3411·2019-08-30 15:54
阅读 1816·2019-08-30 15:43
阅读 2051·2019-08-29 15:14
阅读 1752·2019-08-29 11:17
阅读 3194·2019-08-26 13:36
阅读 553·2019-08-26 10:15
