CSS中關于box-sizing你可能需要知道的小知識

天學習了box-sizing的相關知識，解決我心中一直的困擾，理解了這個屬性是干什么的，有什么作用，下面我給大家分享一下我學習的一些心得，以及遇到的一些坑。

在CSS中，box-sizing屬性定義了用戶代理(瀏覽器)應該如何計算一個元素的總寬度和總高度。

通常情況下，在默認的CSS盒模型定義里，一個元素的寬（width）高（height）只會應用到當前元素的內容區里。如果這個元素有padding（內邊距）或border（邊框），那么這個盒子在顯示的時候，寬高會加上內邊距和邊框的值。這就意味著我們在布局的時候，需要時刻主要到這個盒子的內邊距和邊框，尤其是在使用響應式布局的時候，這點非常煩人。因此，w3c給出了一個新屬性，box-sizing，它可以被用來調整這些煩人的特點。

box-sizing有兩個值：

content-box：默認值，元素的寬高只用到內容區，在該元素的寬高之外繪制內邊距和邊框。
尺寸計算公式：
width = 內容區的寬度
height = 內容區的高度
寬度和高度的結果值都不包含內邊距（padding）和邊框（border）
border-box： 元素的內邊距和元素寬高都是包含在寬高內的。
尺寸計算公式：
width = 內容區的寬度 + padding + border
height = 內容區的高度 + padding +border

以下是根據box-sizing不同的值渲染出來的元素尺寸：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-sizing：不同值渲染的元素</title>
    <style>
        html {
            font-size: 10px;
        }

        div.box {
            width: 20em;
            height: 12em;
            padding: 2em;
            border: 5px solid red;
            background-color: violet;
        }

        .content-box {
            box-sizing: content-box;
            margin-bottom: 5em;
        }

        .border-box {
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box content-box"></div>
    <div class="box border-box"></div>
</body>
</html>

效果圖：

從上圖可以看出，content-box和border-box的總寬高的值是不一樣的。當屬性值為content-box時的總寬高：

width：200 + 20x2 + 5x2 = 250px
height: 120 + 20x2 + 5x2 = 170px

當屬性值為border-box時的總寬高：

width：150 + 20x2 + 5x2 = 200px
height: 70 + 20x2 + 5x2 = 120px

這里有一點值得注意的是，我在寫這個demo的時候為了方便區分兩個盒模型，我在第一個box上加了一個margin-bottom，但是我發現這個margin-bottom貌似并不影響這個寬高的結果，不論box-sizing的值是哪個。后來我在MDN上得到了結果，確定了我的猜想是正確的。

最后需要注意的是，這個屬性是CSS3的屬性，并且這個屬性是可以從父元素繼承的。以后推薦大家使用box-sizing:border-box，可以寫成：

* { box-sizing: border-box; }

這樣處理元素大小就方便的多了。

以上就是我學習這個屬性的心得，歡迎各路大神指正，有興趣的小伙伴歡迎大家一起交流。

SS3的樣式

語法：box-sizing: content-box | border-box | inherit;

content-box：表示瀏覽器繪制元素的時候寬和高只是內容的寬和高，不包含元素的padding和border大小，元素的實際高度還要加上padding和border設定的值

border-box：表示瀏覽器繪制元素的時候，實際寬度和高度的實際值為border值+padding值+內容的寬度/高度

inherit：從父窗口繼承box-sizing屬性

擴展

-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */

一般為了進行流布局好進行控制都會把元素的box-sizing設置為 border-box

前在學習html的時候，總是看見其他網站在根元素上加一個box-sizing: border-box，一直沒有搞明白這個屬性具體是干什么的，這兩天在學習的時候遇到了關于內邊距和邊框的尺寸，以及一個元素的寬高的問題才明白這個屬性到底是什么意思，以及怎么用的。

一般情況下，CSS盒模型的默認定義中，一個元素的寬(width)和高(height)只會在當前的元素內容區里起作用，但是，如果給這個元素加上一些樣式，比如：內邊距(padding)和邊框(border)，那這個元素在顯示時會加上內邊距和邊框的值的總和才是當前元素的總寬高，這個可以用一個Demo測試一下，很明顯就可以看出來了。

現在給出如下的盒模型，以及樣式：

html結構：

<div class="box content-box"></div>

css樣式：

html {
  font-size: 10px;
}
div.box {
  width: 20em;
  height: 12em;
  padding: 2em;
  border: 5px solid red;
  background-color: violet;
}

效果圖：

content-box

從上面給出的css樣式中我們不難看出，給出的盒模型寬高分別為20em和12em，換算成像素，也就是一個200x120px的盒模型。但是從查看瀏覽器的查看元素里我們卻發現，這個盒模型，并不是200x120px的，而是變成了250x170px，很明顯這是加上了padding和border的尺寸：

padding值總和：2em x 2 x 10 = 40px；
border值總和：5px x 2 = 10px；

從上面換算后的尺寸可以得到padding和border的總和為：50px，加上content-box的元素內容區寬度200px，總寬就是250px，總高度就是170px。

這個結論意味著，我們在使用進行頁面布局的時候，時刻需要注意內邊距和邊框的值，尤其是在響應式布局的場景下甚為煩人，W3C給我們了一個屬性——box-sizing，使用這個屬性可以很好的解決這個總寬高的問題。

box-sizing有兩個屬性值：

content-box，這個也是默認值，意思是當前元素的寬高值只會加到當前的內容區，并不會包含內邊距(padding)和邊框(border)的值。這也就是很好的解釋了上述案例中為什么整個盒子的寬高變成了250x170px了。
計算公式：
寬度（width） = 內容區寬度
高度（height） = 內容區高度

border-box，當前盒子的寬高包含了內邊距(padding)和邊框(border)的值。
計算公式：
寬度（width） = 內容區寬度 + 內邊距 + 邊框
高度（height） = 內容區高度 + 內邊距 + 邊框

下面是我在學習這兩個屬性時測試的案例：

html結構：

<div class="box content-box"></div>
<div class="box border-box"></div>

css樣式：

<style>
  html {
    font-size: 10px;
  }
  div.box {
    width: 20em;
    height: 12em;
    padding: 2em;
    border: 5px solid red;
    background-color: violet;
  }
  .content-box {
    box-sizing: content-box;
    margin-bottom: 5em;
  }
  .border-box {
    box-sizing: border-box;
  }
</style>

效果圖：

box-sizing

從上述案例很明顯可以看出來content-box和border-box的區別：

當屬性值為content-box時，總寬高為：
width = 200px + 20 x 2 + 5 x 2 = 250px；
height = 120px + 20x2 + 5x2 = 170px。
當屬性值為border-box時，總寬高為：
width：150px + 20x2 + 5x2 = 200px
height: 70px + 20x2 + 5x2 = 120px

這里有個值得注意的坑，那就是margin-bottom，并不影響盒模型的總寬高，無論box-sizing是哪個值，這個結論可以在MDN上查到的。

以上就是我在學習盒模型的屬性box-sizing時的心得總結，希望能對大家有用，由于本人才疏學淺，如果文中有不正確的地方，懇請請各位大佬批評指正，謝謝大家！

在線咨詢

上一篇：web前端基礎之HTML知識總結，了解后輕松做網頁
下一篇：css3隨手寫個底部導航欄效果，P8大佬恐怖如斯

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS中關于box-sizing你可能需要知道的小知識

SS3的樣式

擴展

您的項目需求