前端樣式從box-sizing屬性入手，了解盒子模型

🚀作者簡介

​首頁：水香木魚的部落格

專欄：CSS3

能量：🔋容量已消耗1%，自動充電中…

箋言：用部落格記錄每一次成長，書寫五彩人生。

📒技術聊齋

（一）背景

首先聲明一下運用的場景，假如項目布局使用的是​

​自适應的布局方式​

​​，div給出的寬度是​

​百分比​

​​的形式，即占視窗寬度的100%，但邊框border和内邊距padding是用像素來表示的，​

​此時就會造成一個問題是div總寬度超過視窗寬度​

​。

為了避免這種問題，可以使用屬性​

​box-sizing:border-box​

​​來把 标準盒模型 變成 代替​

​(IE)盒模型​

​ ，進而使div的總寬度依然是100%

（二）什麼是CSS 盒模型?

頁面布局中，一個元素的外邊距​

​（margin）​

​​、 邊框​

​（border）​

​​、内邊距​

​（padding）​

​​、内容​

​（content）​

​組成一個盒模型。

盒模型可分為​

​标準盒模型 ​

​​和 ​

​代替（IE）盒模型​

​。

（三）标準盒模型

在标準模型中，如果你給盒設定 ​

​width​

​​ 和 ​

​height​

​，實際設定的是内容區域( content box)的寬高。

​

​padding ​

​​和 ​

​border ​

​再加上設定的寬高一起決定整個盒子的大小。

示例：

.box {
  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}      

如果使用标準模型，元素總寬度 = ​

​160px ​

​​（100+25+25+5+5），總高度 = ​

​110px ​

​​(50 + 25 + 25 + 5 + 5)，即内容區域​

​content box​

​​加 ​

​padding ​

​​和 ​

​border​

​ 。

注: ​

​margin ​

​​不計入實際大小 —— 當然，它會影響盒子在頁面所占空間，但是​

​影響的是盒子外部空間​

​。

（四）代替（IE）盒模型

你可能會認為盒子的大小還要加上邊框和内邊距，這樣很麻煩。

因為這個原因，css還有一個替代盒模型。使用這個模型，所有寬度都是可見寬度，是以内容寬度是該寬度減去邊框和填充部分。

使用上面相同的樣式得到總寬高是 ​

​width = 100px, height = 50px​

​。

​

​預設浏覽器會使用标準模型​

​。

如果需要使用替代模型，您可以通過為其設定 ​

​box-sizing: border-box​

​​ 來實作。 這樣就可以告訴浏覽器使用 ​

​border-box​

​ 來定義區域，進而設定您想要的大小。

.box { 
  box-sizing: border-box; 
}      

（五）box-sizing屬性

CSS中的 ​

​box-sizing 屬性用于告訴浏覽器如何計算一個元素是總寬度和總高度​

​

在 CSS盒子模型 的預設定義裡，你對一個元素所設定的 width 與 height 隻會應用到這個元素的内容區。

如果這個元素有任何的 border 或 padding，繪制到螢幕上時的盒子寬度和高度會加上設定的邊框和内邊距值。

這意味着當你調整一個元素的寬度和高度時需要時刻注意到這個元素的邊框和内邊距。當我們實作響應式布局時，這個特點尤其煩人。

​

​box-sizing ​

​屬性可以被用來調整這些表現:

​

​content-box ​

​是預設值。如果你設定一個元素的寬為100px，那麼這個元素的内容區會有100px 寬，并且任何邊框和内邊距的寬度都會被增加到最後繪制出來的元素寬度中。

尺寸計算公式：

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

border-box 告訴浏覽器：你想要設定的邊框和内邊距的值是包含在width内的。

如果你将一個元素的​

​width​

​​設為100px，那麼這100px會包含它的​

​border​

​​和​

​padding​

​​，内容區的實際寬度是width減去​

​(border + padding)​

​的值。

大多數情況下，這使得我們更容易地設定一個元素的寬高。

• width = border + padding + 内容的寬度
• height = border + padding + 内容的高度