CSS3 - 盒模型

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

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

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

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

CSS3 盒模型屬性

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;
}

列印頁面