CSS框模型筆記

框模型（Box Model）規定了元素框處理元素內容、內邊距（padding），外邊距（margin）,邊框（border）。邊框位於外邊距與內邊距之間。框模型裏所說的高度和寬度是指的是元素的高和寬，是指的內邊距以內位置，即元素框的最內部分，它也是實際的內容。

假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置爲 70 像素，因爲要考慮到兩邊都是這樣的，要15px*2才行。但是內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。

CSS padding 屬性定義元素的內邊距，padding 屬性接受長度值或百分比值，但不允許使用負值。

h1 {padding: 10px;}

h1 {padding: 10px 0.25em 2ex 20%;}

一個是h1元素的個邊都有10像素的內邊距。第二個是按照上右下左的順時針順序設置個邊的內邊距，且各邊均可以使用不同的單位或百分比值，如果只有兩個參數，那麼第一個參數表示的是上和下，第二個參數表示左和右。或者使用單邊屬性：

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

元素的內邊距設置百分數值。百分數值是相對於其父元素的 width 計算的，這一點與外邊距一樣。所以，如果父元素的 width 改變，它們也會改變。百分比的數值往往都是繼承得來的。

CSS border

元素的邊框就是圍繞元素內容和內邊據的一條或多條線。每個邊框有 3 個方面：寬度、樣式，以及顏色。

border 簡寫屬性，用於把針對四個邊的屬性設置在一個聲明之中。它的值有border-width，border-style，border-color。

p 
{
border: medium double rgb(250,0,255)
}

輪廓是在邊框邊緣的外圍，這個邊框的屬性是和輪廓一樣的，但是邊框可以有四個不同的邊，輪廓不行。

border-style   屬用於設置元素所有邊框的樣式，或者單獨地爲各邊設置邊框樣式。只有當這個值不是 none 時邊框纔可能出現。它的樣式跟輪廓outline-style一樣，但是這裏有更多的參數，參數爲一個時，是所有邊框。兩個時第一個是上邊和下邊框。三個參數時，第一個參數和第三個參數表示上下，第二個參數表示 左右一起的。四個參數時是上右下左順時針邊框。border-style還有個hidden屬性，與none相同。但是在應用於表中，hidden可以解決邊框衝突。

border-width 簡寫屬性爲元素的所有邊框設置寬度，或者單獨地爲各邊邊框設置寬度。屬性值與outline-width一樣。但它與border-style一樣可以有1、2、3、4個參數。

border-color  簡寫屬性設置四條邊框的顏色。此屬性可設置 1 到 4 種顏色。同上，默認值不是反轉顏色，是transparent，透明。

與簡寫屬性相對的是非簡寫屬性，這就是四個邊各自屬性了，

border-bottom、border-left、border-right、border-top四個也是簡寫屬性

其中每個簡寫屬性下又有三個非簡寫屬性：border-XXX-color、border-XXX-style、border-XXX-width。意思很簡單。

CSS margin

圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的空白。

margin 簡寫屬性在一個聲明中設置所有外邊距屬性或者設置各邊上外邊距的寬度。塊級元素（如<div>）的垂直相鄰外邊距會合並（下面講到），而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合並。同樣地，浮動元素的外邊距也不會合並。允許指定負的外邊距值。該屬性可以有 1 到 4 個參數值，與border-style一樣的。margin 屬性接受任何長度單位，可以是像素、英寸in、毫米或 em。還有百分比。默認值爲0。在支持 CSS 的瀏覽器中，外邊距會在每個段落元素的上面和下面生成“空行”。因此，如果沒有爲 p 元素聲明外邊距，瀏覽器可能會自己應用一個外邊距。當然，只要作了聲明，就會覆蓋默認樣式。

對應的有四個非簡寫屬性：margin-bottom，margin-left，margin-right，margin-top。意思也很簡單。

CSS外邊距合併

當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。意思是，上面的margin-bottom設置爲20px，下面的塊級元素的margin-top設置爲10px，那麼它們將會產生合併，合併之後的外邊距是大吃小，爲20px，不是20+10=30px。

當一個元素包含在另一個元素中時，如果父親元素不設置內邊距和邊框，那麼子元素的上外邊距將於父元素的上外邊距合併（疊加）。只有上外邊距會合並。如果父爲20px，子爲10px，上邊距合併之後就是20px。

外邊距可以與自身發生合併，假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合併。合併規則同上面的一樣。如果這個外邊距遇到另一個元素的外邊距（垂直相遇或者一個包含另一個），它還會接着發生合併。這就是一系列的段落元素佔用空間非常小的原因，因爲它們的所有外邊距都合併到一起，形成了一個小的外邊距。

外邊距合併是有意義的，假如一篇文章有幾個段落，假如沒有外邊距合併，段落之間的外邊距是上外邊距的兩倍。有這樣的設定之後，段落之間的外邊距和上外邊距相同。

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