css盒模型
題目：談?wù)勀銓SS盒模型的認(rèn)識
- 文檔中每個元素都會被描述為一個矩形盒子祖娘，盒子有一個邊界丽焊，分別為margin 掷倔，border眉孩，padding，content勒葱。盒子模型分為標(biāo)準(zhǔn)盒子模型和IE盒子模型（微軟沒有遵從W3C標(biāo)準(zhǔn)）
標(biāo)準(zhǔn)模型和IE模型之間的區(qū)別浪汪？
- 這兩者的關(guān)鍵差別在于：W3C盒子模型——屬性高（height）和屬性寬（width）這兩個值不包括（padding）和邊框（border）；IE盒子模型——屬性高（height）和屬性寬（width）這兩個值包含填充（padding）和邊框（border）凛虽。
css如何設(shè)置
box-sizing:content-box;//標(biāo)準(zhǔn)盒子死遭，默認(rèn)
box-sizing:border-box;//ie盒子
瀏覽器如何確定使用哪種渲染模式
- 平常編寫網(wǎng)頁的時候，一般都會將見到HTML文檔的頭部會有文檔類型聲明：DOCTYpe凯旋。當(dāng)瀏覽器遇到正確的文檔聲明時呀潭，瀏覽器就會啟動標(biāo)準(zhǔn)模式钉迷，按照指定的文檔類型標(biāo)準(zhǔn)解析和渲染文檔。而對于舊有的網(wǎng)頁钠署，由于網(wǎng)頁編寫的當(dāng)時標(biāo)準(zhǔn)還沒有確定糠聪，所以一般是不會有文檔類型聲明的。所以谐鼎，對于沒有文檔類型聲明或者文檔類型聲明不正確的文檔舰蟆，瀏覽器就會認(rèn)為他是一個舊的HTML文檔，就會使用怪異模式解析和渲染該文檔夭苗。
JS如何設(shè)置獲取盒模型對應(yīng)的寬和高题造？
- dom.style.width/height （只能取內(nèi)聯(lián)）
- dom.currentStyle.width/height//渲染后的寬高牵触，ie支持
- window.getComputedStyle(dom).width/height//所有瀏覽器支持袜腥，渲染后寬高
- dom.getBoundingClientRect().width/height//計(jì)算元素的絕對位置，根據(jù)viewport左上角確定，會得到left top width height
BFC（邊距重疊解決方案）
塊級格式化上下文
BFC的原理（BFC的渲染規(guī)則）
- BFC元素垂直方向的邊距發(fā)生重疊
- BFC的區(qū)域不會與浮動元素的box重疊
- BFC是頁面上一個獨(dú)立的容器肪凛，內(nèi)外的元素不會相互影響
- 計(jì)算BFC的高度時滴铅，浮動元素也參與計(jì)算。
https://www.w3cplus.com/css/understand-css-stacking-context-order-z-index.html
BFC概念
- 具有 BFC 特性的元素可以看作是隔離了的獨(dú)立容器，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器所沒有的一些特性。
常見定位方案
- 普通流 (normal flow)
- 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在這個過程中，行內(nèi)元素水平排列郁惜，直到當(dāng)行被占滿然后換行恨樟，塊級元素則會被渲染為完整的一個新行劝术，除非另外指定，否則所有元素默認(rèn)都是普通流定位呆奕，也可以說养晋，普通流中元素的位置由該元素在 HTML 文檔中的位置決定。
- 浮動 (float)
- 在浮動布局中梁钾，元素首先按照普通流的位置出現(xiàn)绳泉，然后根據(jù)浮動的方向盡可能的向左邊或右邊偏移，其效果與印刷排版中的文本環(huán)繞相似姆泻。
- 使用float脫離文檔流時零酪，其他盒子會無視這個元素冒嫡，但其他盒子內(nèi)的文本依然會為這個元素讓出位置，環(huán)繞在周圍(可以說是部分無視)四苇。
- 絕對定位
- 在絕對定位布局中孝凌，元素會整體脫離普通流，因此絕對定位元素不會對其兄弟元素造成影響月腋，而元素具體的位置由絕對定位的坐標(biāo)決定蟀架。
- 對于使用position:absolute脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會無視它(可以說是完全無視)榆骚。
BFC的原理（BFC的渲染規(guī)則）
屬于上述定位方案的普通流片拍。
- BFC元素垂直方向的邊距發(fā)生重疊
- BFC的區(qū)域不會與浮動元素的box重疊
- BFC是頁面上一個獨(dú)立的容器，內(nèi)外的元素不會相互影響
- 計(jì)算BFC的高度時妓肢，浮動元素也參與計(jì)算捌省。
https://www.w3cplus.com/css/understand-css-stacking-context-order-z-index.html
BFC概念
- 具有 BFC 特性的元素可以看作是隔離了的獨(dú)立容器，容器里面的元素不會在布局上影響到外面的元素职恳，并且 BFC 具有普通容器所沒有的一些特性所禀。
觸發(fā) BFC
只要元素滿足下面任一條件即可觸發(fā) BFC 特性：
- body 根元素
- 浮動元素：float 除 none 以外的值
- 絕對定位元素：position (absolute、fixed)
- display 為 inline-block放钦、table-cells色徘、flex，table-caption
- overflow 除了 visible 以外的值 (hidden操禀、auto褂策、scroll)
BFC 特性及應(yīng)用
- 同一個 BFC 下外邊距會發(fā)生折疊
<head>
div{
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
</head>
<body>
<div></div>
<div></div>
</body>
從效果上看，因?yàn)閮蓚€ div 元素都處于同一個 BFC 容器下 (這里指 body 元素) 所以第一個 div 的下邊距和第二個 div 的上邊距發(fā)生了重疊颓屑，所以兩個盒子之間距離只有 100px斤寂，而不是 200px。
如果想要避免外邊距的重疊揪惦，可以將其放在不同的 BFC 容器中
<div class="container">
<p></p>
</div>
<div class="container">
<p></p>
</div>
.container {
overflow: hidden;
}
p {
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
- BFC 可以包含浮動的元素（清除浮動）
<div style="border: 1px solid #000;">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
由于容器內(nèi)元素浮動遍搞，脫離了文檔流，所以容器只剩下 2px 的邊距高度器腋。如果使觸發(fā)容器的 BFC溪猿，那么容器將會包裹著浮動元素。
<div style="border: 1px solid #000;overflow: hidden">
<div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
- BFC 可以阻止元素被浮動元素覆蓋
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一個左浮動的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一個沒有設(shè)置浮動,
也沒有觸發(fā) BFC 元素, width: 200px; height:200px; background: #eee;</div>
這時候其實(shí)第二個元素有部分被浮動元素所覆蓋纫塌，(但是文本信息不會被浮動元素所覆蓋) 如果想避免元素被覆蓋诊县，可觸第二個元素的 BFC 特性，在第二個元素中加入 overflow: hidden措左，就會變成兩列布局依痊。
可以用來實(shí)現(xiàn)兩列自適應(yīng)布局
