CSS盒子模型與怪異盒模型

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

標(biāo)準(zhǔn)盒模型

標(biāo)準(zhǔn)盒模型中盒子的大小是指：content + border + padding + margin。其中width指的是內(nèi)容區(qū)域content的寬度；height指的是內(nèi)容區(qū)域content的高度。下面用一段代碼和圖片來讓說明一個盒子大小的呈現(xiàn)方式。

.box?{
????????width:?100px;
????????height:?100px;
????????padding:?10px;
????????margin:?10px;
????????border:?10px?solid?red;
????????background-color:?#606266;
????????/*標(biāo)準(zhǔn)盒模型*/
????????box-sizing:?content-box;
}
標(biāo)準(zhǔn)盒模型

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

IE怪異盒模型

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

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

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

如何切換盒模型

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

*{

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

兼容性

可以看到現(xiàn)代瀏覽器都支持了該屬性。

總結(jié)

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

學(xué)習(xí)如逆水行舟，不進(jìn)則退，前端技術(shù)飛速發(fā)展，如果每天不堅持學(xué)習(xí)，就會跟不上，我會陪著大家，每天堅持推送博文，跟大家一同進(jìn)步，希望大家能關(guān)注我，第一時間收到最新文章。

公眾號前端每日面試：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。