探索CSS的宽度和高度的复杂性

这篇文章由Uri Shaked和Michal Porag合着，探讨了CSS宽度和高度计算的复杂性。基于对CSS规范的广泛调试和分析，我们将揭示元素维度通常不预期的行为。

基本概念：

您可以假设设置width: 640px;和height: 360px;导致640x360像素元素。但是，添加填充改变了这一点。带padding: 10px; ，由于默认的content-box box-sizing渲染尺寸变为660x380px。框模型计算宽度和高度如下：

• 宽度： width padding-left padding-right border-left border-right
• 高度： height padding-top padding-bottom border-top border-bottom

这适用于块级元素（例如，<div> ，，，，<code><p> ，，，，<code><main></main> ），自然扩展以填充可用的宽度。内联元素的行为不同。

内联元素细微差别：

对于内联元素（例如<span></span>）， width和height在很大程度上被忽略；尺寸由内容确定。将块元素嵌套在内联元素中会破坏内联流，从而突出显示这种区别。内联元素还无视top和bottom边缘。

亲子互动：

亲子关系显着影响维度计算。

• 相对单位：百分比相对于父元素的维度。 width: 100%;采用父母的宽度。高度的行为类似。

• 填充和边距：基于百分比的填充和边缘始终相对于父母的宽度，即使对于垂直值。尽管现在首选该aspect-ratio属性，但使用此“填充hack”来创建纵横比框。

• display: inline和inline-block ： display: inline;在display: inline-block;将内联行为与块级框模型计算相结合，尊重margin ， width和height 。

循环百分比尺寸：

在缺乏声明宽度的父母中，具有相对宽度的子元素（例如33% ）会产生“环状百分比尺寸”方案。浏览器迭代根据孩子的内容计算父母的宽度，然后将孩子的百分比宽度相对于新计算的父宽度应用。

min-width ， min-height ， max-width ， max-height ：

这些属性定义了最小和最大尺寸限制。即使具有明确的宽度（例如100% ）， max-width也可以限制元素的大小。交换width和max-width值可以在涉及父元素时，尤其是在display: inline-block; 。

min() ， max()和clamp() ：

这些功能提供了响应式尺寸，而无需媒体查询：

• min() ：返回其论点的最低限度。
• max() ：返回其参数的最大值。
• clamp() ： min()和max()的组合。

这些功能提供了定义响应元素维度的简洁方法。

结论：

CSS宽度和高度计算非常复杂。虽然指定了明确的值，但渲染尺寸受框模型，元素类型（块与内联），亲子关系，相对单位和其他因素的影响。了解这些不幸的是精确的布局控制至关重要。

作者： Uri Shaked和Michal Porag