盒子模型有兩種：w3c和ie盒子模型
盒子模型包括margin、border、padding、content
w3c的元素寬度=content的寬度
ie的元素寬度=content+padding+border
我個人認為w3c定義盒子模型與ie定義的盒子模型，ie定義的比較合理，
元素的寬度應該包含border（邊框）和padding（填充），這個和我們現實生活的盒子是一樣的，
w3c也認識到自己的問題了，所以在css3中新增了乙個樣式box-sizing，
包含兩個屬性content-box 和 border-box。
content-box ： width=content+padding+border
border-box： width=width（樣式指定的寬度）
1.對於行級元素，margin-top和margin-bottom對於上下元素無效，margin-left和margin-right有效
2.對於相鄰的塊級元素margin-bottom和margin-top 取值方式
1） 都是正數： 取最大值 距離=math.max(margin-botton,margin-top)
2） 都是負數： 取最小值 距離=math.min(margin-botton,margin-top)
3）上面是正數，下面是負數或者 上面是負數，下面是正數： 正負相加 距離=margin-botton+margin-top
這段時間了解到乙個關於盒子模型的幾個概念，css中的核心是盒子，盒子模型有四個概念ifc，gfc，ffc，bfc
bfc
bfc(block formatting contexts)意為「塊級格式化上下文」。就是頁面上的乙個渲染區域，容器內的子元素不會對外面的元素布局產生影響，反之亦然。如何生成bfc：
float的值不為none;
overflow的值不為visible;
position的值不為relative和static;
display的值為table-cell,table-caption何inline-block中的任何乙個。
運用場景：1，不與浮動元素重疊 2，可以清楚元素內部浮動 3，解除上下兩個相鄰元素的重疊 4，自適應布局
ifc
ifc(inline formatting contexts)意為「內聯格式化上下文」,ifc中，盒子依次水平放置，從包含塊的頂部開始。
運用場景：水平居中 垂直居中 其他行內元素可以在此元素下垂直居中 可能會導致樣式混亂
gfc
gfc(gridlayout formatting contexts)意為「網格布局格式化上下文」當乙個元素設定為display:grid的時候，此元素將獲得乙個獨立的渲染區域，可以在網格容器上定義網格行和列，為每乙個網格定義位置和空間。gfc和table的區別在於gridlayout會有更加豐富的屬性來控制行列，控制對齊以及更為精細的渲染。
ffc
ffc(flex formatting contexts)意為「自適應格式化上下文」,display值為flex或者inline-flex的元素將會生成自適應容器，當前只有谷歌和火狐支援該屬性，不過在移動端幾乎沒有障礙(移動端是chrome和safari的天下)。flex box由伸縮容器和伸縮子元素組成。通過設定元素display:flex/inline-flex可以得到伸縮容器，前者為塊級元素，後者為行內元素。伸縮容器外元素不受影響。
盒子模型理解
今天分享一下關於盒子模型的一些理解。在我看來盒子模型是一種為了方便程式設計師布局而定下的一種標準，在空間上規定乙個元素。content 內容區域，width和height就是給他的。padding 內邊距，因為在border內就叫他內邊距 這是我胡說的！與content無關，但background屬...
盒子模型的理解
什麼是盒子?html中的標籤 元素 統統都是乙個矩形的平面框,在立體上,它由多個平面構成,這稱為盒子模型.從底層到頂層的立體結構 margin background color background image padding content border 三大盒子屬性 border 邊框 padd...
盒子模型的理解
標準盒子模型 從上圖可以看到標準 w3c 盒子模型的範圍包括 margin border padding content，並且 content 部分不包含其他部分。ie 盒子模型 從上圖可以看到 ie 盒子模型的範圍也包括 margin border padding content，和標準 w3c ...