Bootstrap。border-box。內元素不撐出來的原理

* {

1. -webkit-box-sizing: border-box;
2. -moz-box-sizing: border-box;
3. box-sizing: border-box;

}

定義和用法

box-sizing 屬性容許您以特定的方式定義匹配某個區域的特定元素。

例如，假如您須要並排放置兩個帶邊框的框，可經過將 box-sizing 設置爲 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。

默認值：	content-box
繼承性：	no
版本：	CSS3
JavaScript 語法：	object.style.boxSizing="border-box"

語法

box-sizing: content-box|border-box|inherit;

值	描述
content-box	這是由 CSS2.1 規定的寬度高度行爲。 寬度和高度分別應用到元素的內容框。 在寬度和高度以外繪製元素的內邊距和邊框。
border-box	爲元素設定的寬度和高度決定了元素的邊框盒。 就是說，爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。 經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。
inherit	規定應從父元素繼承 box-sizing 屬性的值。