前端筆記（關於css盒模型知識整理）

我之前整理的文章可能也不是特別深刻。因此如今開始嘗試即便多花點時間收集整理，也不僅發淺層知識，這樣對技術的深刻理解是頗有幫助的。

廢話很少說，咱們如今開始。

說到css盒模型，這是大多面試基礎中會常常面到的。

首先咱們要知道，什麼是盒模型？盒模型分爲兩種：w3c盒模型和IE盒模型。

如今大多數瀏覽器默認狀況下的盒模型就是w3c盒模型，由margin、border、padding、content、元素的width==content的width。也就是說w3c盒模型通常狀況下會比設置的寬度要大，而IE盒模型則更爲標準，元素的width==margin+border+padding+content。所以在w3c盒模型中加入了一個新的樣式box-sizing。這個樣式能夠切換w3c盒模型和IE盒模型。咱們來作個例子：

咱們想設置一個如此的樣式，一個div內有5個div，橫向排列。div寬度可變，平分的。

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

所以，大多數狀況下，能夠使用%。內部的div能夠使用float:left實現橫排。

.box{
    background-color: yellowgreen;
}
.box div{
    width: 16%;
    height: 50px;
    margin: 2%;
    float: left;
    background-color: yellow;
    text-align: center;
    line-height: 50px;
    border: 2px solid #000;
}

若是直接使用這種方式會有幾個問題：

1.由於border的關係，最後一個div被排到了第二行，顯然是不對的。

2.外層的div高度變成0了，致使背景顏色沒法展現。

 

咱們來看看解決這2個問題。

第一個就是w3c盒模型的影響，可以使用box-sizing: border-box;改變爲IE盒模型。

box-sizing

有3種值：border-box、content-box、inherit

border-box能夠轉IE盒模型，content-box是默認的w3c盒模型，inherit是父元素的box-sizing繼承下來的值

因此代碼爲：

.box div{
    width: 16%;
    height: 50px;
    margin: 2%;
    float: left;
    background-color: yellow;
    text-align: center;
    line-height: 50px;
    border: 2px solid #000;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

-webkit-box-sizing與 -moz-box-sizing等是爲了作兼容瀏覽器

這樣就解決了第1個問題，再看第2個問題，沒有外層背景色。

有2種解決辦法：

1.使用 overflow: hidden;可讓溢出部分隱藏，而內部有脫離文檔流元素，所以會選中最大區域。

.box{
    background-color: yellowgreen;
    overflow: hidden;
}

2.使用子元素clear:both;清除浮動。

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <i class="clear"></i>
</div>

.clear{
    display: block;
    clear: both;
}

爲何用display:block呢？由於必須是塊級元素才能達到此效果。

這樣box下面纔不會被影響。