MDN之Web 開發技術【box-sizing】

原文鏈接:https://blog.csdn.net/WuLex

CSS中的 box-sizing 屬性定義了 user agent 應該如何計算一個元素的總寬度和總高度。
在這裏插入圖片描述
在這裏插入圖片描述

box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;

在這裏插入圖片描述
CSS 盒子模型的默認定義裏,你對一個元素所設置的 widthheight 只會應用到這個元素的內容區。如果這個元素有任何的 borderpadding ,繪製到屏幕上時的盒子寬度和高度會加上設置的邊框和內邊距值。這意味着當你調整一個元素的寬度和高度時需要時刻注意到這個元素的邊框和內邊距。當我們實現響應式佈局時,這個特點尤其煩人。

box-sizing 屬性可以被用來調整這些表現:

  • content-box 是默認值。如果你設置一個元素的寬爲100px,那麼這個元素的內容區會有100px寬,並且任何邊框和內邊距的寬度都會被增加到最後繪製出來的元素寬度中。
  • border-box告訴瀏覽器:你想要設置的邊框和內邊距的值是包含在width內的。也就是說,如果你將一個元素的width設爲100px,那麼這100px會包含它的borderpadding,內容區的實際寬度是**width減去(border+ padding)**的值。大多數情況下,這使得我們更容易地設定一個元素的寬高。

譯者注: border-box不包含margin

Note: 對於新的web站點,你可能希望首先將box-sizing設置爲border-box,如下所示:

* { border-sizing: border-box; }

這使得處理元素大小的工作變得容易得多,並且通常消除了在佈局內容時可能遇到的許多陷阱。然而,在某些情況下,你應謹慎使用這個屬性。例如: 你正在編寫一個將由其他人使用的共享組件庫,如果他們網站的其餘部分沒有設置此值,他們可能會發現很難使用你的組件庫。

語法

box-sizing 屬性被指定爲下面列表中的關鍵字。

屬性值

content-box
默認值,標準盒子模型。 widthheight 只包括內容的寬和高, 不包括邊框(border),內邊距(padding),外邊距(margin)。注意: 內邊距、邊框和外邊距都在這個盒子的外部。 比如說,.box {width: 350px; border: 10px solid black;} 在瀏覽器中的渲染的實際寬度將是 370px

尺寸計算公式:

  • width = 內容的寬度
  • height = 內容的高度

寬度和高度的計算值都不包含內容的邊框(border)和內邊距(padding)。

border-box
widthheight 屬性包括內容,內邊距和邊框,但不包括外邊距。這是當文檔處於 Quirks模式 時Internet Explorer使用的盒模型。注意,填充和邊框將在盒子內 , 例如, .box {width: 350px; border: 10px solid black;} 導致在瀏覽器中呈現的寬度爲350px的盒子。內容框不能爲負,並且被分配到0,使得不可能使用border-box使元素消失。

尺寸計算公式:

width = border + padding + 內容的寬度
height = border + padding + 內容的高度

形式化語法

content-box | border-box

示例

本例顯示了不同的 box-sizing 值如何改變兩個原本相同的元素的渲染尺寸。
HTML

<div class="content-box">Content box</div>
<br>

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box { 
  box-sizing: content-box; 
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box { 
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

結果如圖:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章