探索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