css 盒子模型理解

時間 2019-11-10

標籤 css 盒子模型理解欄目 CSS 简体版

原文原文鏈接

盒子模型是html+css中最核心的基礎知識，理解了這個重要的概念才能更好的排版，進行頁面佈局。下面是本身積累和總結的關於css盒子模型的知識^_^，但願對初學者有用。css

1、css盒子模型概念html

CSS css盒子模型又稱框模型 (Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如圖：瀏覽器

圖中最內部的框是元素的實際內容，也就是元素框，緊挨着元素框外部的是內邊距padding，其次是邊框（border），而後最外層是外邊距（margin），整個構成了框模型。一般咱們設置的背景顯示區域，就是內容、內邊距、邊框這一塊範圍。而外邊距margin是透明的，不會遮擋周邊的其餘元素。框架

那麼，元素框的總寬度 = 元素（element）的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度；佈局

元素框的總高度 = 元素（element）的height + padding的上下邊距的值 + margin的上下邊距的值＋ border的上下寬度。spa

2、css 外邊距合併（疊加）3d

兩個上下方向相鄰的元素框垂直相遇時，外邊距會合並，合併後的外邊距的高度等於兩個發生合併的外邊距中較高的那個邊距值，如圖：code

比較容易理解，因此在頁面中有時候遇到實際狀況是須要考慮這個因素的。固然外邊距合併其實也有存在的意義，以下圖：htm

須要注意的是：只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。blog

css reset 中也會常常用到

* {
  margin : 0;
  padding : 0;
}

3、box-sizing屬性介紹

box-sizing屬性是用戶界面屬性裏的一種，之因此介紹它，是由於這個屬性跟盒子模型有關，並且在css reset中有可能會用到它。

box-sizing : content-box|border-box|inherit;

(1) content-box ,默認值，可使設置的寬度和高度值應用到元素的內容框。盒子的width只包含內容。

　　即總寬度=margin+border+padding+width

(2) border-box , 設置的width值實際上是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內容

　　　　即總寬度=margin+width

不少CSS框架，都會對盒子模型的計算方法進行簡化。

(3) inherit , 規定應從父元素繼承 box-sizing 屬性的值

關於border-box的使用：

1 一個box寬度爲100%，又想要兩邊有內間距，這時候用就比較好
2 全局設置 border-box 很好，首先它符合直覺，其次它能夠省去一次又一次的加加減減，它還有一個關鍵做用——讓有邊框的盒子正常使用百分比寬度。

4、實際開發中遇到的和框模型相關的應用及小問題。

1 margin越界（第一個子元素的margin-top和最後一個子元素的margin-bottom的越界問題）

以第一個子元素的margin-top 爲例：

當父元素沒有邊框border時，設置第一個子元素的margin-top值的時候，會出現margin-top值加在父元素上的現象，解決方法有四個：

（1）給父元素加邊框border （反作用）

（2）給父元素設置padding值（反作用）

（3）父元素添加 overflow：hidden （反作用）

（4）父元素加前置內容生成。（推薦）

以第四種方法爲例：

.parent {
     width : 500px;
     height : 500px;
     background-color : red;       
}
.parent : before {
     content : " ";
     display : table;
}

.child {
     width : 200px;
     height : 200px;
     background-color : green;
     margin-top : 50px;
}

<div class="parent">
    <div class="child"></div> 
</div>

2 瀏覽器間的盒子模型。

（1）ul標籤在Mozilla中默認是有padding值的，而在IE中只有margin有值。

（2）標準盒子模型與IE模型之間的差別：

　　標準的盒子模型就是上述介紹的那種，而IE模型更像是 box-sizing : border-box; 其內容寬度還包含了border和padding。解決辦法就是：在html模板中加doctype聲明。

3 用盒子模型畫三角形

<!DOCTYPE html>
<html>
  <head>
    <style>
        .triangle {
            width : 0;
            height: 0;
            border : 100px solid transparent;
            border-top : 100px solid blue; /*這裏能夠設置border的top、bottom、left、right四個方向的三角*/
        }
    </style>
  </head>
  <body>
    <div class="triangle"></div>
  </body>
</html>