CSS——盒子模型

我的理解

• 對於任何元素，都是一個盒子模型

標準盒子模型

element即content

IE盒子模型

• 從上面能夠看到，標準盒子模型和IE盒子模型都包含了content、padding、margin、border四個部分組成，不過相對於標準盒子模型，IE盒子模型的content包含了border和padding

瀏覽器兼容

• 代碼頂部都要加doctype聲明，這樣大多數瀏覽器都會遵循標準w3c盒子模型

  IE5.x和6在怪異模式中使用本身的非標準模型，這些瀏覽器的width屬性不是內容的寬度，而是內容、內邊距、外邊距的總格。

雖然有方法解決這個問題。可是目前最好的解決方案是迴避這個問題。也就是，不要給元素添加具備指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。

box-sizing屬性介紹

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

• content-box:默認值。可以使設置的寬度和高度應用戴元素的內容框，盒子的width只包含內容
  • 總寬度=margin+border+padding+width
• border-box:設置的width是除了margin外的border+padding+content的總寬度，盒子的width包含border+padding+內容
  • 總寬度=margin+width
• inherit：繼承父元素的box-sizing屬性值

實際問題介紹

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

• 當父元素沒有邊框border時，設置第一個子元素的margin-top值的時候，會出現margin-top值加在父元素上的現象
• 解決方法有四個
  • 給父元素加邊框（反作用）
  • 給父元素設定padding（反作用）
  • 給父元素設定overflow:hidden（反作用）

  • 父元素加前置內容生成
    .parent : before { content : " "; display : table; }

    css 外邊距合併（疊加）

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

• 注意： 只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。
• 方法：連個相鄰元素最好只用margin：top/bottom