CSS盒模型

 

盒模型，它是基於CSS的Web設計中最重要的概念之一。

盒模型是針對HTML元素的一組規則，指定了元素的 高度、 寬度、 內邊距、 邊框和 外邊距是如何度量的。

　　

• margin屬性應用於盒子外面的空間，或者是位於盒子和瀏覽器窗口之間的區域，或者是位於盒子和文檔中其餘元素之間的區域。
• 外邊距摺疊 ，當一個元素的上或下外邊距正好和另外一個元素的上或下外邊距接觸時，就會產生外邊距摺疊。這個概念很簡單：兩個外邊距中更小的那個減小爲零。若是兩個元素的外邊距具備相同的長度，那麼其中一個減小爲零。
• margin屬性具備另一個功能： 它用來居中或者對齊元素。
• 邊框出如今和模型中的外邊距和內邊距之間。
• 內邊距是元素的內容和邊框之間的區域。
• Width屬性是一個很是簡單的屬性，它用來設置一個元素的寬度。width是從左內邊距邊緣到右內邊距邊緣的距離。注意： 當給一個元素應用寬度時，必須考慮到外邊距，邊框和內邊距也是這個元素水平寬度的一部分。
• Width和height屬性的值爲auto，因此當不指定寬度和高度時，它們的值意味着auto關鍵字。auto關鍵字會根據應用的元素類型變化。當它應用到<div>元素上時，意味着元素將橫跨全部可用空間；垂直方面上，會擴展到容納元素內部的內容，包括文本、圖像或者其餘盒子。具備這種行爲的元素，咱們稱爲 塊級元素。
• 根據定義，塊級元素佔據整行。一個元素佔據它水平方向上的全部空間，這種設置大小的方法叫作「擴展效應」。
• 塊級元素上的auto高度，卻表現的有點不一樣，元素只會擴展到足夠能夠容納與元素中的內容，稱爲「收縮效應」