CSS - 盒模型大小

CSS 中的box-sizing屬性用於定義元素的總寬度和高度是如何計算的。預設情況下，元素的寬度和高度包含其內容、內邊距和邊框。但是，使用box-sizing屬性，您可以更改此行為，以包括或排除寬度和高度計算中的內邊距和邊框。

在舊版本的 CSS（CSS2）中，盒模型的工作預設方式使元素看起來比傳遞給它的尺寸（寬度和高度）更大。

寬度 + 內邊距 + 邊框 = 元素框的實際可見/渲染寬度

高度 + 內邊距 + 邊框 = 元素框的實際可見/渲染高度

CSS 盒模型大小屬性

CSS box-sizing屬性可用於調整元素佈局的行為。

可能的值

box-sizing CSS 屬性可以具有一個值，該值是一個關鍵字，可以是以下值之一

content-box：這是預設值。當此值傳遞給box-sizing屬性時，它將返回預設行為，其中內邊距或/和邊框新增到元素的總寬度和高度中。
border-box：當此值傳遞給box-sizing屬性時，它會告訴瀏覽器調整傳遞給元素的內邊距或邊距值。這導致內容區域縮小並吸收為元素指定的邊框或/和內邊距。它是<table>、<select>、<button>和<input>元素使用的預設樣式。

padding-box值不受任何瀏覽器支援，因此不能傳遞給box-sizing屬性。

應用於

所有接受寬度或高度的 HTML 元素。

DOM 語法

object.style.boxSizing = "content-box | border-box";

示例

以下是一個 CSS 屬性box-sizing: border-box的示例

<html> 
<head>
<style>
   .with-content-box {
      width: 200px;
      height: 100px;
      padding: 10px;
      border: 3px solid green;
      background-color: rgb(241, 234, 85);
      box-sizing: content-box;
   }
   .with-border-box {
      width: 200px;
      height: 100px;  
      padding: 10px;  
      border: 3px solid rgb(64, 10, 215);
      background-color: lightpink;
      box-sizing: border-box;
   }
</style>
</head>
<body>
   <div class="with-content-box">CONTENT BOX</div><br />
   <div class="with-border-box">BORDER BOX</div>
</body>
</html>

上面給出的示例清楚地顯示了box-sizing: border-box和box-sizing: content-box屬性值之間的區別。此處，box-sizing: border-box屬性在計算總寬度和高度時忽略內邊距值。而box-sizing: content-box屬性值將內邊距值包含在計算中。

為了獲得流暢、靈活和直觀的響應式設計，可以按照以下方式設定box-sizing: border-box值

* {
   box-sizing: border-box;
}

以上語法可能無法獲得預期的結果，因為它忽略了偽元素。因此，還有另一種語法包括用於重置的偽元素。

*, *:before, *:after {
   box-sizing: border-box;
}

這種通用的盒模型大小方法將使box-sizing: content-box | padding-box的使用變得困難。因此，還有另一種語法在這種情況下可能更有用且更合適。

html {
   box-sizing: border-box;
}
*, *:before, *:after {
   box-sizing: inherit;
}

這種通用的盒模型大小重置語法更有用，併為使用者提供更大的靈活性。

雖然每個當前瀏覽器都支援box-sizing: border-box，無字首；但一些舊版本的瀏覽器需要支援。為了提供該支援，您可能需要以以下方式使用字首-webkit和-moz

html {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
*, *:before, *:after {
   -webkit-box-sizing: inherit;
   -moz-box-sizing: inherit;
   box-sizing: inherit;
}

列印頁面