(css)box-sizing的問題

摘要

 box-sizing 屬性用來改變默認的 CSS 盒模型 對元素寬高的計算方式。這個屬性可以用於模擬那些非正確支持標準盒模型的瀏覽器的表現。

初始值	content-box
適用元素	all elements that accept width or height
是否是繼承屬性	否
適用媒體	visual
計算值	as specified
Animation type	discrete
正規順序	the unique non-ambiguous order defined by the formal grammar

語法

如何閱讀 CSS 語法。

content-box | border-box

/* 關鍵字值 */
box-sizing: content-box;
box-sizing: border-box;

/* 全局值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

值

content-box

默認值，標準盒模型。 width 與 height 只包括內容的寬和高， 不包括邊框（border），內邊距（padding），外邊距（margin）。注意: 內邊距, 邊框 & 外邊距 都在這個盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那麼在瀏覽器中的渲染的實際寬度將是370px;

尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。

border-box

 width 與 height 包括內邊距（padding）與邊框（border），不包括外邊距（margin）。這是IE 怪異模式（Quirks mode）使用的 盒模型 。注意：這個時候內邊距和邊框將會包括在盒子中。比如  .box {width: 350px; border: 10px solid black;} 瀏覽器渲染出的寬度將是350px. 如果計算後的最內部的內容寬度為負值，都會被計算成0，內容還在，所以不可能通過border-box來隱藏元素。

尺寸計算公式：width = border + padding + 內容的寬度，height = border + padding + 內容的高度。

正式的語法

如何閱讀 CSS 語法。

content-box | border-box

例子

/* 支持 Firefox, Chrome, Safari, Opera, IE8+ 和老的Android瀏覽器 */

.example {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}