原文: https://zswfx.com/articles/5d...
起源來自於一次面試問題如何保證元素高度和寬度保持一致，雖然過去很久，可以深度看看這個問題。下面就說說盒子模型(box-model), padding
盒子模型(box-model)
盒子模型(box-model) 是瀏覽器渲染引擎進行的佈局的標準之一。引擎會把頁面所有元素當成一個矩形的盒子，通過css來決定這些盒子的大小，位置及其其他屬性。
盒子模型示意圖(侵刪)
盒子模型擁有四個邊界:
- 內容邊界(content edge)
- 內邊距邊界(padding edge)
- 邊框邊界 (border edge)
- 外邊框邊界 (margin edge)
https://developer.mozilla.org...
內容邊界是包含元素的真實內容的，例如文本，圖像，視頻等，內容邊界的尺寸就是這些內容的寬度，可以通過 width, height, min-width, min-height等控制。內邊距區域是內容和邊距之間的距離，通常尺寸是padding-box寬度或者高度，由padding 控制。邊框是從內邊距區域擴展，通過border-width 來控制，他的尺寸位於內外邊距之間。最外一層則是外邊距區域，通過 margin 來控制，從邊框邊界開始擴展，外邊距的區域的尺寸通常會發生外邊距合併，這裏外邊距不容易搞清楚。
盒子模型(box-model) 控制屬性 - box-sizing
box-sizing 決定用戶瀏覽器如何計算元素總高度和總寬度, box-sizing 有兩個取值:
content-box
元素的寬度值包含內容邊界內的尺寸，任何新增的例如內邊距，邊框 都會被加入到元素的總體的寬度中
width = 內容的寬度
height = 內容的高度
border-box
內容的寬度包含元素的內容尺寸，內邊距尺寸，外邊距尺寸。此刻margin 依舊不會被計算到寬度內
width = 內容的寬度 + 邊框的寬度 2 + 邊距的寬度 2
height = 內容的高度 + 邊框的寬度 2 + 邊距的高度 2
說說 padding
padding 是設置一個元素內容和它邊界的之間的空間度量，這裏就要求padding不能是負值。
padding是四個內邊距的縮寫，分別是:
- padding-top
- padding-right
- padding-bottom
- padding-right
padding 在css 中是 無法繼承，適用用基本所有的元素，除了 table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column。
padding 取值可以爲具體css的數量值，也可以爲百分比，但是取值百分比的時候，參照量是不同的哦。
padding 取值auto是無效的，包含auto的值會被瀏覽器忽略
padding 的百分比
一個元素的填充區域在元素的內容和邊框之間。如下圖:
根據圖片示例表示 padding 不能夠是負值
當一個元素內邊距(padding) 是百分比的時候，padding百分比和本身的元素的寬度是有關的。不管padding 是 top,right,bottom,left 都是根據寬度來的計算哦。
當初在格家網絡面試的時候，面試官的問了一個面試題，如何保證一個元素的高度和寬度是一致的，這裏就要學習這個知識點，padding和寬度是相關的，設置高度爲0，padding-bottom: 100%, width: 100px; 則就可以得到一個高度和寬度都是100px的盒子了。