css 盒子模型(box model)盒子模型分為兩種 第一種是w3c標準的盒子模型所有html元素可以看作盒子，在css中，盒子模型可以用來對元素進行布局，包括內邊距，邊框，外邊距，和實際內容這幾個部分。
標準盒模型，第二種ie標準的盒子模型怪異盒模型當前大部分的瀏覽器支援的是w3c的標準盒模型，也保留了對怪異盒模型的支援，當然ie瀏覽器沿用的是怪異盒模型。怪異模式是「部分瀏覽器在支援w3c標準的同時還保留了原來的解析模式」，怪異模式主要表現在ie核心的瀏覽器。
一、標準盒模型與怪異盒模型的表現效果和區別
1、標準盒模型中width和height對應的是內容區域content的寬度和高度。
盒子大小 = content + border + padding + margin2、怪異盒模型中的
width和height對應的是內容區域、邊框、內邊距總的寬度和高度（content + border + padding）。
盒子大小 = width（content + border + padding） + margin二、如何選擇盒模型如果是定義了完整的doctype的標準文件型別，無論是哪種模型情況，最終都會觸發標準模式，否則doctype協議缺失，會由瀏覽器自己決定，在ie瀏覽器中ie9以下（ie6.ie7.ie8）的版本觸發怪異模式，其他瀏覽器中會預設為w3c標準模式。
除此之外，我們還可以通過屬性box-sizing來設定盒子模型的解析模式：
content-box： 預設值，border和padding不計算在width內，可看成w3c的標準模型，將採用標準模式解析計算
border-box：border和padding計算在width內，可看成ie的怪異盒模型，將採用怪異模式解析計算
inherit：規定應從父元素繼承 box-sizing 屬性的值
此方法有個侷限性，就是只能獲取使用內聯樣式的元素的寬和高。
2、dom.currentstyle.width/height
此方法獲取的是瀏覽器渲染以後的元素的寬和高，無論是用何種方式引入的css樣式都可以，但只有ie瀏覽器支援這種寫法。
3、window.getcomputedstyle(dom).width/height
此方法獲取的也是瀏覽器渲染以後的元素的寬和高，與方法2原理基本相似，但它相容 chrome 和 firefox，通用性更好一些。
4、dom.getboundingclientrect().width/height
此方法經常使用的場景，是用於計算乙個元素的絕對位置（相對於視窗左上角），它能拿到元素的left、top、width、height 4個屬性。
四、盒模型邊距重疊問題
父子元素、兄弟元素，當有外邊距時，會取其中乙個邊距的最大值，作為實際的邊距。
空元素的有上下邊距時，也會取其中更大的乙個邊距值，作為實際的邊距，這就是邊距重疊。
注意，對於行內元素 margin-top/margin-bottom 對於上下元素無效，而對於 margin-left/margin-right 有效。對於相鄰的塊級元素 margin-top 和 margin-bottom 兩者疊加按照一定的規則：
那如何解決盒子模型的邊距重疊問題呢，這就引出了下乙個知識點bfc。
五、bfc（邊距重疊解決方案）
基本概念
原理（渲染規則）
建立bfc的方法
bfc的使用場景
1、bfc解決兄弟元素垂直方向邊距重疊：
class
="layout"
>
css盒模型詳解
盒模型 框模型 是網頁布局的基礎，每個元素都被表示為乙個矩形的方框。使用min width min height max width max height可以設定最大 小 寬度和高度,優點是當頁面放大或縮小時，內容框會自動適應頁面。塊級元素的上外邊距和下外邊距有時會合併 摺疊 為乙個外邊距，其大小取...
css彈性盒模型詳解 介紹
官方的統一回答 彈性盒模型是指在父級改變大小的時候內部的自己元素也會相應的改變大小，即子集會按照父級的大小按比例自適應大小。彈性盒模型的提出可以解決一些響應式布局的需求 採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專...
CSS系列 04 盒模型詳解
css盒模型分成w3c標準盒模型和ie模型 ie盒模型 box sizing border box 盒子模型布局穩定性 我們根據穩定性來分，建議如下 按照 優先使用寬度，其次使用內邊距，再次外邊距。即 width padding margin 原因 1 margin會有外邊距合併 2 padding...