盒模型：由內而外，由context+padding+border+margin組成的模型
分類：1.標準盒模型
2.ie盒模型
區別：ie盒模型的寬度由context+padding+border組成。
標準盒模型的寬度為context寬度。
css設定：
標準：box-sizing:context-box;
ie:box-sizing:border-box;
獲取盒模型寬度：
1.dom.style.height/width:只適用於內聯樣式，嵌入樣式以及外聯樣式獲取不到。
2.dom.currentstyle.height/width:只適用於ie。
3.window.getcomputestyle(dom).height/width:相容各個瀏覽器。
4.dom.getbonudingclientrect.width/height:通過相對頁面的絕對位置獲取寬高。
5.dom.offsetwidth/offsetheight:通常使用，適用性好。
bfc(塊級格式化上下文)：
建立bfc：
1.float屬性不為none。
2.position為absolute/fixed。
3.display為inline-block,table-cell,table-caption,flex,inine-flex。
4.overflow不為visible。
5.根元素。
盒模型的簡單理解
盒子模型有兩種，w3c和ie盒子模型 1 w3c定義的盒子模型包括margin border padding content 元素的width content的寬度 2 ie盒子模型與w3c的盒子模型唯一區別就是元素的寬度，元素的width content padding border 我個人認為w...
盒模型理解
參考 盒模型理解 前端的盒模型包括兩種，分別是w3c盒模型和ie盒模型。w3c盒模型包括content padding border margin。其中width content ie盒模型包括content padding border margin。其中width content padding...
理解盒模型
div css有兩種盒模型 標準w3c盒模型 ie盒模型 如何讓瀏覽器能夠按標準盒模型來處理，就是在網頁的頂部加上doctype宣告。如果不加 doctype宣告，那麼各個瀏覽器會根據自己的行為去理解網頁。標準盒模型中width和height指的是內容區域的寬度和高度，增加內邊距 邊框和外邊距不會影...