在講box-sizing屬性之前，我們講一下盒子模型：
css的盒子模型包括外邊距(margin)、邊框(padding)、內邊距(padding)、元素內容(content)，如下圖
在頁面上呈現的盒子的寬度和高度為：
width = content + padding + border
height = content + padding + border
例如，我們設定乙個div的width為100px,border為10px，padding為10px，則實際顯示的盒子的width = 120px,而非100px；在預設情況下我們設定的widht指的是content的寬度，而非盒子的寬度。
如果我們要設定乙個盒子的寬度而不僅僅是content的寬度，則我們可以通過使用box-sizing樣式來得到想要的效果。
box-sizing
語法：box-sizing: content-box|border-box|inherit:
(1)content-box, 預設值，可以設定元素內容框的寬度和高度，即盒子的寬高只包含內容：
寬度= border + padding + width
高度= border + padding + height
(2)border-box, 設定盒子的width/height值其實是border + padding + content 的總寬度/高度。
(3)inherit, 規定box-sizing屬性的值從父元素中繼承下來。
以上提到過，預設情況下盒子的寬高 = content的寬高，但是當我們在元素上設定box-sizing: border-box後，盒子的寬高 = content + padding + border;
當我們設定width值為400px,box-sizing: border-box時，盒子的寬度實際為400px；而
當我們設定width值為400px,box-sizing: content-box時，盒子的寬度實際為430px
對於box-sizing的相容性
box sizing 與元素布局
box sizing是用來規定乙個元素及其border和padding的關係的屬性。以下均以寬高均為200px，padding及border width均為20px的元素來舉例說明兩種情況下的布局情況。div此情況下，元素的border及padding參與元素的尺寸計算。元素實際占用空間 width...
box sizing布局學習筆記
首先學習box sizing布局之前，來了解一下css盒子模型 box model 一般來說，css盒子模型有兩種模式 我們對元素設定的寬度和高度就是內容 content 的寬度和高度，也就是內盒子的寬度 外盒子的寬度包括 content padding border的 這個模型下，我們設定的寬度和...
關於box sizing屬性
box sizing屬性包括content box default border box，padding box。1 content box，border和padding不計算入width之內 2 padding box，padding計算入width內 3 border box，border和pa...