CSS盒子模型與怪異盒模型

盒子模型(Box Modle)可以用來對元素進行布局，包括內邊距(padding)，邊框(border)，外邊距(margin)，和實際內容(content)這幾個部分。

標準盒模型

標準盒模型中盒子的大小是指：content + border + padding + margin。其中width指的是內容區域content的寬度；height指的是內容區域content的高度。下面用一段代碼和圖片來讓說明一個盒子大小的呈現方式。

.box?{
????????width:?100px;
????????height:?100px;
????????padding:?10px;
????????margin:?10px;
????????border:?10px?solid?red;
????????background-color:?#606266;
????????/*標準盒模型*/
????????box-sizing:?content-box;
}
標準盒模型

在chrome里面調試工具樣式的最下面可以看到一個盒子呈現出的長寬，內邊距(padding)，邊框(border)和外邊距(margin)。鼠標移動到dom上，可以看到盒子實際呈現出的長寬分別為140px,140px。這是因為我們的width為100px,height為100px,padding上下左右均為10px,border上下左右均為10px。所以我們看到的我們盒子的長寬為140px。由于是塊級元素，實際盒子會獨占一行，這里的140px沒有算是margin。標準模式下，最直觀的特點是widith和height的值決定了盒子的內容區域(content)的大小。而盒子實際呈現的大小并不一定是你設置的widith和height的值。因為還有padding,border,margin等來影響它。

IE怪異盒模型

怪異盒模型中的width指的是內容、邊框、內邊距總的寬度(content + border + padding);height指的是內容、邊框、內邊距總的高度。怪異盒模型下盒子的大小=width(content + border + padding) + margin。下面用一段代碼和圖片來讓說明一個盒子大小的呈現方式。

????.box?{
????????width:?100px;
????????height:?100px;
????????padding:?10px;
????????margin:?10px;
????????border:?10px?solid?red;
????????background-color:?#606266;
????????/*IE盒模型*/
????????box-sizing:?border-box;
????}

圖中可以看到，我們設置的widht和height為100px，那么盒子實際呈現的大小也為100px(這里是width和height的值，沒算margin)。那么內容區域(可以放文字，div標簽的區域)content的大小為width - padding - border = 60。

如何切換盒模型

在html頂部加上DOCTYPE聲明，大多數瀏覽器就會默認采用標準盒模型。上面的代碼也可以看出，通過css的屬性box-sizing能改變盒模型。

*{

???????/*IE盒模型,order和padding計算入width之內*/
????????box-sizing:?border-box;
????????/*padding計算入width內，不推薦使用，非常老的瀏覽器才支持*/
????????box-sizing:?padding-box;
????????/*border和padding不計算入width之內*/
????????box-sizing:?content-box;
?/*繼承父元素*/
?box-sizing:?inherit;
}

兼容性

可以看到現代瀏覽器都支持了該屬性。

總結

可以看到，其實上面幾種模型，最終盒子的大小是一樣的，區別在于盒子的widht和height的計算。個人在網頁布局中，更喜歡使用IE盒模型，因為該模型下，IE盒模型呈現的widht,height就是我們設置的長寬，這樣我們就不必為了布局要減去(border和padding)產生的空間。其實我們也可以發現，用邊框(border)繪制三角形，也是利用了盒模型的原理，點擊查看。

學習如逆水行舟，不進則退，前端技術飛速發展，如果每天不堅持學習，就會跟不上，我會陪著大家，每天堅持推送博文，跟大家一同進步，希望大家能關注我，第一時間收到最新文章。

公眾號前端每日面試：

總結

以上是生活随笔為你收集整理的img标签默认有外边距吗_你知道css的盒模型吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。