CSS: 盒子模型

CSS 盒子模型基本上是面試的必考題路媚，因為實在是太重要了割按。以前寫 CSS 總是感覺元素的寬高十分難調(diào)，其中一個很大的問題就是忽略了盒子模型的重要性磷籍。

說到 CSS 盒子模型适荣，你可能會說我知道呀现柠，就是 margin 包 border, border 包 padding, padding 包 content 嘛，這就是盒子模型弛矛。這樣理解也是對的够吩，但是這樣的理解忽略了盒子模型有兩種的概念。一個是 content-box 另一個是 border-box丈氓。

你有沒有這樣的經(jīng)歷：在這個網(wǎng)頁上寬高都是調(diào)對的周循，但是引入了一個帶有自己 CSS 文件的第三方庫或者插件后，全亂了万俗。一個主要的原因有可能就是你本來的網(wǎng)頁使用了默認的 content-box湾笛，而引入的庫使用了 border-box，他把你的覆蓋了闰歪。你所設(shè)置的 width 和 height 就是不再是內(nèi)容區(qū) content 的寬高嚎研，而是 2border + 2padding + width 和 2border+2padding+width。

例子

假如有兩個 div 代碼在這里

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

<div class="border-box"></div>

都設(shè)置他們的寬高是 100px库倘，加上一背景色和 border临扮。唯一區(qū)別是 box-sizing 不一樣。

div {
  height: 100px;
  width: 100px;
  padding: 10px;
  border: 3px solid green;
  background: red;
}

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

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

可以看到結(jié)果教翩，content-box 是這樣的：

內(nèi)容區(qū)就是 100px * 100px

border-box 是這樣的：

整個 div 才是 100px * 100px

公式

content-box (width: 100px, height: 100px)
div 的 width = 設(shè)置的 width = 100px
div 的 height = 設(shè)置的 height = 100px
border-box (width: 100px, height: 100px)
div 的 width= 設(shè)置的 width + 2 * 設(shè)置的 padding + 2 * 設(shè)置的 border-width
div 的 height = 設(shè)置的 height + 2 * 設(shè)置的 padding + 2 * 設(shè)置的 border-width

萬能調(diào)試法

如果你實在暈杆勇，又想確定這個 div 的寬高如何，可以加一個

div {
    border: 1px solid red;
}

來看這個 div 的寬高饱亿，雖然感覺很簡單但是這個方法真的很實用蚜退。

最后編輯于：2019.01.28 01:49:50

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者