我所不清楚的 padding

原文: 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的盒子了。