css 透明疊加細品CSS（二）

盒子模型(box modle)可以用來對元素進行布局，包括內邊距，邊框，外邊距，和實際內容這幾個部分。

盒子模型分為兩種

第一種是w3c標準的盒子模型(標準盒模型) 。

第二種ie標準的盒子模型(怪異盒模型)

當前大部分的瀏覽器支援的是w3c的標準盒模型，也保留了對怪異盒模型的支援，當然ie瀏覽器沿用的是怪異盒模型。怪異模式是「部分瀏覽器在支援w3c標準的同時還保留了原來的解析模式」，怪異模式主要表現在ie核心的瀏覽器。

標準盒模型與怪異盒模型的表現效果的區別之處

1、標準盒模型中width指的是內容區域content的寬度；height指的是內容區域content的高度。

標準盒模型下盒子的大小=content+border+padding+margin

2、怪異盒模型中的width指的是內容、邊框、內邊距總的寬度(content + border + padding)；height指的是內容、邊框、內邊距總的高度

怪異盒模型下盒子的大小=width(content + border + padding) + margin

css盒子模型概念

css css盒子模型又稱框模型 (box model) ，包含了元素內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)幾個要素。

圖中最內部的框是元素的實際內容，也就是元素框，緊挨著元素框外部的是內邊距padding，其次是邊框(border)，然後最外層是外邊距(margin)，整個構成了框模型。通常我們設定的背景顯示區域，就是內容、內邊距、邊框這一塊範圍。而外邊距margin是透明的，不會遮擋周邊的其他元素。

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

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

css 外邊距合併(疊加)

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

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 很好，首先它符合直覺，其次它可以省去一次又一次的加加減減，它還有乙個關鍵作用——讓有邊框的盒子正常使用百分比寬度。

覺得好看的話別忘了長按下方，點一下關注哦

css 透明疊加 細品CSS（二）