css盒模型
1.題目：談?wù)勀銓ss盒模型的認(rèn)識（從理論轉(zhuǎn)化到應(yīng)用）
- 基本概念：標(biāo)準(zhǔn)模型+ IE模型
border柒室、margin、padding、content- 標(biāo)準(zhǔn)模型
- IE模型
1、標(biāo)準(zhǔn)模型和IE模型區(qū)別
1.計算寬度和高度的不同躺枕，怎么不同的，怎么計算的；
- 標(biāo)準(zhǔn)模型的寬度是：content的寬度屯远，不包含padding和border蔓姚；
- IE模型的寬度是：寬和高是計算 border 和 padding 的。
css如何設(shè)置這兩種模型：
box-sizing:content-box;（標(biāo)準(zhǔn)模型--瀏覽器默認(rèn)）
box-sizing:border-box;（IE模型）
JS如何設(shè)置獲取盒模型對應(yīng)的寬和高
1.dom.style.width/height(只能取內(nèi)聯(lián)樣式的寬和高)
----getElementById('div').style.width/height
2.dom.currentStyle.width/height
(渲染之后的寬高--只有IE支持)
3.window.getComputedStyle(dom).width/height
(渲染之后的寬高--兼容性通用型更好一些)
4.dom.getBoundingClientRect().width/height
(適用場景：計算一個元素的絕對位置慨丐；這個絕對位置根據(jù)視窗
也就是左上角這個位置的絕對位置) 這個方法可以拿到四個元素：left top width height
實例題：（根據(jù)盒模型解釋邊距重疊）
一.要看父元素的盒模型怎么設(shè)置的：
1.父子元素邊距重疊
overflow:hidden;解決重疊問題坡脐；相當(dāng)于給父元素創(chuàng)建了一個BFC（塊級格式化上下文）
eg:子元素高度為100px，距父元素頂部10px房揭，計算父元素的高度备闲？
1.因為父元素和子元素存在邊距重疊，所以父元素高度為100px捅暴；
2.設(shè)置了overflow：hidden恬砂；之后父元素高度為110px；
2.兄弟元素邊距重疊
兄弟元素每個都有上邊距或者下邊距蓬痒，發(fā)生重疊原則取最大值泻骤；
eg:一個元素下邊距為30px，下面那個元素上邊距為5px梧奢，會合并成30px兩者取最大值
3.空元素
空元素設(shè)置上下邊距狱掂，margin-top\margin-bottom取一個最大值，作為它的一個邊距
4.BFC（邊距重疊解決方案）--另一種IFC
BFC基本概念：塊級格式化上下文
- BFC的原理（渲染規(guī)則）：
1.在BFC這個元素的垂直方向的邊距會發(fā)生重疊
2.BFC的區(qū)域不會與浮動元素的相重疊（清除浮動布局）
3.BFC在頁面是一個獨立的容器亲轨，外面的元素不會影響它里面元素趋惨，反過來一樣
4.計算BFC高度的時候浮動元素也會參與計算
- 如何創(chuàng)建BFC？
1.overflow：hidden | auto | visible
2.float值不是null（只要有浮動惦蚊，當(dāng)前元素就創(chuàng)建了BFC）
3.position值不是static或者relative就創(chuàng)建了BFC（設(shè)置成absolute器虾，fixed）
4.display屬性是為inline-box，table-cell（也就是和table相關(guān)的）
- BFC使用場景有哪些蹦锋？
1.父級元素里面有三個子元素兆沙，子元素margin：5px auto 25px;
之后就第一個元素的上邊距是5，其他的都是25px莉掂，這有一個邊距重疊的問題葛圃；在寫頁面布局的時候不想有這個重疊，就給子元素增加一個父元素巫湘，父元素創(chuàng)建一個BFC就能解決問題；
2.布局相關(guān)的BFC應(yīng)用
- BFC垂直方向邊距重疊
垂直方向三個p元素昏鹃，p{margin:5px auto 25px},之后第二個第三個的上邊距變成25px尚氛；發(fā)生了邊距重疊，取得的是最大值洞渤；如果不想重疊阅嘶，就需要再那個元素在加一個父級div，對父級div創(chuàng)建BFC（overflow：hidden）
- BFC不與float重疊
兩欄布局，左邊寬度固定左浮動height：100px讯柔，右邊自適應(yīng)height：120px;右邊的高度增高的時候抡蛙，右邊的背景色已經(jīng)侵染到了左側(cè)，（當(dāng)布局的時候左側(cè)沒有float元素魂迄，它依然會往左侵染）粗截，解決方法：給右側(cè)元素創(chuàng)建一個BFC（overflow：atuo）
-
清除浮動；（BFC子元素即使是float元素也會參與計算）
.layout{background:orange} .float{float:left;} -->只看到.float的內(nèi)容沒看到父級的背景顏色捣炬；父級高度為0熊昌； --->一個普通的元素當(dāng)子元素是float元素的時候，它的高度計算沒有包含進來湿酸； .layout{background:orange;overflow:hidden;} .float{float:left;} --》給layout設(shè)置BFC之后婿屹，float內(nèi)容有了背景顏色，父級有了高度推溃； ---->當(dāng)把外層元素設(shè)為BFC的時候昂利，子元素的浮動元素也會參與父級的高度計算； BFC的元素在計算高度的時候會考慮內(nèi)部子元素float
（子元素是float也不影響父元素高度的計算铁坎，它的內(nèi)容頁會被參與進來）--IFC（內(nèi)聯(lián)元素的格式化上下文）
