我所不清楚的 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的盒子了。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章