盒模型的組成：padding+border+content+margin。
html
有兩種盒模型，一種是標準（W3C）盒模型，它的寬高：content瀏覽器
一種怪異（IE）盒模型，它的寬高:padding+border+content
dom
box-sizing:border-box; //IE盒模型佈局
box-sizing:content-box; //標準盒模型
flex
若是父盒子有margin-bottom,子盒子有margin-top;這個時候極可能發生邊距重疊，問題那怎麼解決邊距重疊？能夠經過BFC來解決。 code
BFC的原理內部的box會在垂直方向，一個接一個的放置 每一個元素的margin box的左邊，與包含塊border box的左邊相接觸（對於從作往右的格式化，不然相反） box垂直方向的距離由margin決定，屬於同一個bfc的兩個相鄰box的margin會發生重疊 bfc的區域不會與浮動區域的box重疊 bfc是一個頁面上的獨立的容器，外面的元素不會影響bfc裏的元素，反過來，裏面的也不會影響外面的 計算bfc高度的時候，浮動元素也會參與計算 怎麼取建立bfc
float屬性不爲none（脫離文檔流） position爲absolute或fixed display爲inline-block,table-cell,table-caption,flex,inine-flex overflow不爲visible 根元素 應用場景
自適應兩欄佈局 清除內部浮動 防止垂直margin重疊4.獲取寬高
經過JS獲取盒模型對應的寬和高，有如下幾種方法：htm
爲了方便書寫，如下用dom來表示獲取的HTML的節點。文檔
1. dom.style.width/height get
這種方式只能取到dom元素內聯樣式所設置的寬高，也就是說若是該節點的樣式是在style標籤中或外聯的CSS文件中設置的話，經過這種方法是獲取不到dom的寬高的。it
2. dom.currentStyle.width/height
這種方式獲取的是在頁面渲染完成後的結果，就是說無論是哪一種方式設置的樣式，都能獲取到。
但這種方式只有IE瀏覽器支持。
3. window.getComputedStyle(dom).width/height
這種方式的原理和2是同樣的，這個能夠兼容更多的瀏覽器，通用性好一些。
4. dom.getBoundingClientRect().width/height
這種方式是根據元素在視窗中的絕對位置來獲取寬高的
5.dom.offsetWidth/offsetHeight
這個就沒什麼好說的了，最經常使用的，也是兼容最好的。
<style>
.box {
width: 200px;
height: 200px;
padding:10px;
background-color: lawngreen;
box-sizing: border-box;
}
</style>
alert(document.getElementById("box").offsetWidth);