摘要：标准盒模型下，设置的的值后，这个值仅包含的宽高，而在盒模型下，这个值是后的宽高。例标准盒模型下，占据的实际宽为实际高度同理。对齐所处行内框盒子的顶部对齐所处行内框盒子的底部。
盒模型
盒模型之所以称为“盒”是因为在一个页面布局中，文档中的每一个元素（块级元素）均呈现为一个矩形的“盒子”，这个“盒子”包含：内容（content） + 内边距（padding） + 边框（border） + 外边距（padding），如图：
图引自"https://developer.mozilla.org..."
盒模型又分为标准盒子模型和IE盒子模型。标准盒模型下，设置box的width的值后，这个值仅包含content的宽高，而在IE盒模型下，这个值是content + padding + border 后的宽高。例：
.test1{
width: 200px;
height: 200px;
padding: 50px;
border: 10px dotted red;
}
标准盒模型下，test1占据的实际宽为： border-left-width + padding-left + width +
padding-right + border-right-width = 320px; 实际高度同理。
而在IE盒模型下，test1占据的实际宽为 200px; 而content部分的实际宽度为： width -
border-left-width - padding-left - padding-right - border-right-width = 80px; content部分实际高度同理。
IE6+ 的浏览器默认采用的均为标准盒模型，随着ie6-的淘汰，标准/IE盒模型问题已经不再成为问题。
在实际开发过程中，宽度为百分比时常常因为1px的border使得宽度不可控，此时可以使用box-sizing: border-box; 来对特定元素应用IE盒模型，从而使得border和padding值被包含在设置的宽高内。
行内框盒子模型（line-boxes）对于上文的盒模型的解释中，加了一个限制是指块级元素，对于行内元素，在页面布局结构中，同样会呈现为一个矩形的盒子，但是这个盒子是无法定义宽度和高度，行内元素的这个盒子我们可以成为行内框盒子，行内框盒子的宽度和高度分别是紧贴着行内元素四周的宽和高。例如：
图中文字白色区域就是行内框盒子，白色区域的宽和高就是行内框盒子的宽和高，这里设置的文字大小为60px; 7个字，因此行内框盒子的宽高即为 420 X 60 ;
在说到行内框盒子时，通常会提起几个属性，line-height和vertal-align。
Line-heightline-height的意义在于指定行内框盒子的高度，对于块级元素，line-height指定的是块级元素内部line-boxes的最小高度，对于非替代行内元素，line-height用于计算行内框盒子的高度，对于替代行内元素，line-height多数时间是没有影响的。
line-height的取值可以为 具体值/数字/百分比。
具体值：这个没有疑问，设置多少就是多少，不过一般不推荐。
数字：实际的line-height的值为 当前字体 * 数字 ，比如font-size: 60px; line-height: 1.5;
等同于line-height: 90px;
百分比：计算方式和数字是一样的，比如font-size: 60px; line-height: 150%; 等同于line-height:
90px;
line-height具有继承性，不过数字和百分比的继承方式是不一样的，数字是继承的数字值，然后子元素再拿当前font-size 数字，而百分比是依父元素的font-size 百分比，计算后把结果的带单位的具体值继承下去。例：
数字：
父元素：`.test1{font-size: 20px; line-height: 1.5;}`
子元素：`.test2{font-size: 60px;}`
父元素实际line-height为 1.5 * 20 px 即30px;
子元素实际line-height之继承父元素计算前的值，1.5，因此子元素实际line-height为 1.5 * 60 px 即90px;
百分比：
父元素：`.test1{font-size: 20px; line-height: 150%;}`
子元素：`.test2{font-size: 60px;}`
父元素实际line-height为 150% * 20 px 即30px;
子元素实际line-height直接继承父元素计算后的结果，即30px;
浏览器默认的line-height值为normal，W3C解释为 设置合理的行间距；MDN解释为取决于用户代理和元素的font-family，一般通常默认为1.2左右。在上图的例子中，在chrome下采用的是楷体，line-height测算为1.14。在最上面的图中，我们未设置line-height的值，但是可以看得到文字上边缘后是有一条缝隙的，这就是所谓的合理的行间距的结果。
然而，实际上，行内框盒子模型的高度和line-height没有关系，并且在上图中我们也可以发现，行内框盒子在布局中占据的高度实际上是有line-height决定的，当line-height为0时，这个行框盒子就不再占用页面布局的位置了，除了层级关系的相互遮盖，这个行内框盒子就不会影响其他元素的布局了，事实是这样的吗。例：
事实上我们发现，红色的test2，上边缘的其实位置并不是父级(0,0)的位置，也就是说，我们的行框盒子实际还是占据了一部分位置，这个其实和vertal-align有关的。
Tips： 替代行内元素指的是值根据元素的不同属性来决定元素的具体显示内容，比如input type="text/button/file"等，其他的如：object/video/textarea/img等，某些情况下canvas和audio也可能是替换元素。Vertal-align
vertal-align是用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。vertal-align的取值有主要有：baseline/top/middle/bottom/sub/super/text-top/text-bottom/百分比/具体值。先来了解一下各个值对应的位置。
baseline: 默认值，自身的baseline和父级盒子的baseline对齐，如果没有自身baseline（比如img），则外边距底部边缘和父级的baseline对齐；
middle: 自身垂直中点对齐 父级baseline + x 高度的一半 的位置；
百分比: 在baseline的基础上，向上（百分比为正）或者向下（百分比为负）偏移 line-height * 百分比 的值；
具体值：在baseline的基础上，向上（值为正）或者向下（值为负）偏移 这个值的距离；
top和bottom是两个比较特殊的取值，使元素与行框盒子的边界对齐而不是参考基线。
top: 对齐所处行内框盒子的顶部；
bottom: 对齐所处行内框盒子的底部。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116455.html
摘要：标准盒模型下，设置的的值后，这个值仅包含的宽高，而在盒模型下，这个值是后的宽高。例标准盒模型下，占据的实际宽为实际高度同理。对齐所处行内框盒子的顶部对齐所处行内框盒子的底部。 盒模型 盒模型之所以称为盒是因为在一个页面布局中，文档中的每一个元素（块级元素）均呈现为一个矩形的盒子，这个盒子包含：内容（content） + 内边距（padding） + 边框（border） + 外边距（p...
摘要：中各种布局的背后，实质上是各种的组合。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒，用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。 盒模型(Box M...
摘要：在文档中，元素被表示为一个矩形的盒子。在中，使用盒模型描述这些矩形盒子中的每一个。规定以具体单位计的内边距值，比如像素厘米等。但不允许使用负值。实际测试的百分比，测试结果并不是等于，而是近似等于。 在文档中，元素被表示为一个矩形的盒子。 在CSS中，使用盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边(margin), 边框边(border...
摘要：垂直格式化，有一个很重要的方面是会造成垂直相邻外边距合并，解决这个的方式见想要清晰的明白一中的部分。参考资料权威指南第三版为负值产生的影响和常见布局应用布局圣杯布局双飞翼布局深入理解和的基友关系深入理解中的行高 在上一篇想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC比较宏观的了解了盒子模型的作用，接下来就详细的介绍两种盒子的具体细节 Block Box show...
摘要：并且这种过程遵循标准的描述只要不是和绝对定位方式布局的，都在普通流里面。定位相对定位在普通流之中，是相对于它在普通流中的位置中进行移动，元素占据原来位置绝对定位脱离普通流，不占据空间相对于距离它最近的那个已定位的祖先相对绝对元素决定的。 视觉格式化模型 页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将...
阅读 1791·2021-09-03 10:50
阅读 1324·2019-08-30 15:55
阅读 3367·2019-08-30 15:52
阅读 1229·2019-08-30 15:44
阅读 934·2019-08-30 15:44
阅读 3317·2019-08-30 14:23
阅读 3549·2019-08-28 17:51
阅读 2289·2019-08-26 13:52
