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

herry菌發表於2020-04-19
前端筆記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下面才不會被影響。

 

 

相關文章