第一類問題：盒子模型
兩種：w3c標(biāo)準(zhǔn)模型距境，ie模型
*{
box-sizing:content-box
}
*{
box-sizing:border-box
}
盒子模型：border padding margin
區(qū)別
1.標(biāo)準(zhǔn)模型實(shí)際寬度：margin + border + padding + content(width)
2.ie模型實(shí)際寬度：margin + (border + padding + width)--看作(content)
js如何獲取盒模型的寬度羊苟，高度
// 內(nèi)聯(lián)樣式寬
const h1 = dom.style.width;
// 渲染的寬寂曹，僅僅支持ie
const h2 = dom.currentStyle.width;
// 渲染的寬,兼容性更好
const h3 = window.getComputedStyle(dom).width;
// 獲取dom元素距離初始點(diǎn)的位置
const h4 = dom.getBoundingClientRect().width;
第二類問題：BFC問題
BFC是一個(gè)獨(dú)立的布局環(huán)境腹备，BFC內(nèi)部的元素布局與外部互不影響
Bfc規(guī)則
1.內(nèi)部的Box會(huì)在垂直方向一個(gè)接著一個(gè)地放置衬潦。
2.Box垂直方向上的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰的Box的margin會(huì)發(fā)生重疊植酥。
3.每個(gè)盒子的左外邊框緊挨著包含塊的左邊框镀岛，即使浮動(dòng)元素也是如此弦牡。
4.BFC的區(qū)域不會(huì)與float box重疊。
5.BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器漂羊，容器里面的子元素不會(huì)影響到外面的元素驾锰，反之亦然。
6.計(jì)算BFC的高度時(shí)走越，浮動(dòng)子元素也參與計(jì)算椭豫。
bfc建立方法
| 元素 | 屬性 |
|---|---|
| 根元素 | |
| float | left,right |
| position | absolute,fixed |
| overflow | hidden,auto,scroll |
| display | inline-block, table-cell |
BFC的應(yīng)用
1.浮動(dòng)的元素會(huì)造成坍塌，或者覆蓋原有元素
方法:給父元素旨指，兄弟元素加成bfc---這樣就會(huì)單獨(dú)計(jì)算一個(gè)bfc區(qū)塊
2.垂直方向上margin重合的問題
方法：把各自做成bfc塊赏酥，單獨(dú)計(jì)算margin,比如加overflow:hidden
