css框模型

標籤：style   color   ar   strong   sp   on   c   工作   line   

元素的背景是內容、內邊距和邊框區的背景。

css中：width 和 height 指的是內容地區的寬度和高度。增加內邊距、邊框和外邊距不會影響內容地區的尺寸，但是會增加元素框的總尺寸。

bootstrap中：width 和 height 指的是包含border、padding、element的框的總尺寸,不包含margin。

1. margin、padding、border四值順序：top right bottom left。值複製遵循對等原則。
2. length：規定以具體單位計的固定的下內邊距值，比如像素、厘米等。預設值是 0px。%：定義基於父元素寬度的百分比。此值不會如預期地那樣工作於所有的瀏覽器中。
3. padding-top 該屬性設定元素上內邊距的寬度。行內非替換元素上設定的上內邊距不會影響行高計算，不允許負值。padding-bottom同理。
4. padding-left該屬性設定元素左內邊距的寬度。行內非替換元素上設定的左內邊距僅在元素所產生的第一個行內框的左邊出現.padding-right同理。
5. 外邊距合并：當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。a.當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。b.當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并。c.假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合并。d.如果這個外邊距遇到另一個元素的外邊距，它還會發生合并。e.只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對位置之間的外邊距不會合并。
6. border 規定元素邊框的樣式、寬度和顏色。如果您希望邊框出現，就必須聲明一個邊框樣式。
7. border-style:

   值	描述
   none	定義無邊框。
   hidden	與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。
   dotted	定義點狀邊框。在大多數瀏覽器中呈現為實線。
   dashed	定義虛線。在大多數瀏覽器中呈現為實線。
   solid	定義實線。
   double	定義雙線。雙線的寬度等於 border-width 的值。
   groove	定義 3D 凹槽邊框。其效果取決於 border-color 的值。
   ridge	定義 3D 壟狀邊框。其效果取決於 border-color 的值。
   inset	定義 3D inset 邊框。其效果取決於 border-color 的值。
   outset	定義 3D outset 邊框。其效果取決於 border-color 的值。
   inherit	規定應該從父元素繼承邊框樣式border-color:

8. border-color:預設的邊框顏色是元素本身的前景色彩。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設它是一個表格，其中只包含映像，那麼該表的邊框顏色就是其父元素的文本顏色（因為 color 可以繼承）。
9. 建立有寬度的不可見框線用border-color: transparent;在 IE7 之前，IE/WIN 沒有提供對 transparent 的支援。在以前的版本，IE 會根據元素的 color 值來設定邊框顏色。

css框模型