CSS盒模型（框模型）

CSS盒模型（框模型）

概念

CSS框模型描述的是針對文檔樹的元素而生成,並根據可視化格式模型進行佈局的矩形框。每個框都有一個內容區域，還有周圍補白、邊框和邊距區域。

注意：圖片、表單元素一律看做文本。並不是盒子。

每一個節點都會生成0…n個這樣的框，但是注意盒子真正的大小爲content+padding+boreder，而margin僅僅爲了佔位

盒模型有兩種：W3C標準盒模型和IE盒模型:
1.W3C標準盒模型
 width與height僅僅代指content的寬高

2.IE怪異盒模型
 width與height代指content+padding+border的寬高

爲了解決這個問題引入了box-sizing 的CSS屬性
box-sizing默認爲content-box
但當其更改爲box-sizing:border-box，則會採用IE盒子模型，此時看以下例子

**設置border爲10px

**此時把border改爲30px

**加上padding

發現無論怎麼修改padding與border都不會對盒子的大小產生影響

##注意
1.body也有margin，文檔中最大的盒子爲document,body爲document的孩子，瀏覽器默認給body設置margin大小爲8px
2.padding區域也有顏色，background-color設置border以內包括padding的所有區域
3.有些元素默認有padding，如ul默認帶有40px的padding-left,如果要消除所有的默認的padding，則採用

*{
 margin:0;
 padding:0
}

4.謹記：盒子中所有順序都爲上右下左，當只有上右或者只有兩者之一，對應的下與左與其相同
下面有一個用css畫三角形的例子：

{
    width:0px;
    height:0px;
    border:30px solid white;
    border-bottom:none;/*將下部清空*/
    border-top-color:red;
}

更多關於前端面試的內容，請訪問該鏈接