1.BFC(Block Formatting Context,塊級(jí)格式上下文)是Web頁(yè)面的可視CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。
- 觸發(fā)條件
- 根元素(
<html>) - 絕對(duì)定位元素(元素的
position為absolute或fixed) - 浮動(dòng)元素(元素的
float不為none) -
display為inline-block|table-cell|flex|inline-flex|grid|inline-grid - 表格單元格(元素的
display為table-cell赊舶，HTML表格單元格默認(rèn)為該值） -
overflow值不為visible
- 根元素(
- 作用
- 防止margin發(fā)生重疊
- 兩欄布局疚沐，防止文字環(huán)繞等
- 防止元素塌陷
-
position選項(xiàng)
-
static默認(rèn)屬性
該關(guān)鍵字指定元素使用正常的布局行為，即元素在文檔常規(guī)流中當(dāng)前的布局位置掖举。此時(shí)top,right,bottom,left和z-index屬性無效。 -
relative相對(duì)定位
該關(guān)鍵字下，元素先放置在未添加定位時(shí)的位置塔次，再在不改變頁(yè)面布局的前提下調(diào)整元素位置（因此會(huì)在此元素未添加定位時(shí)所在位置留下空白）方篮。position:relative對(duì)table-*-group, table-row, table-column, table-cell, table-caption元素?zé)o效 -
absolute絕對(duì)定位
元素會(huì)被移出正常文檔流，并不為元素預(yù)留空間励负，通過指定元素相對(duì)于最近的非static定位祖先元素的偏移藕溅，來確定元素位置。絕對(duì)定位的元素可以設(shè)置外邊距（margins）继榆，且不會(huì)與其他邊距合并 -
fixed固定定位
元素會(huì)被移出正常文檔流巾表，并不為元素預(yù)留空間，而是通過指定元素相對(duì)于屏幕視口（viewport）的位置來指定元素位置略吨。元素的位置在屏幕滾動(dòng)時(shí)不會(huì)改變集币。打印時(shí)，元素會(huì)出現(xiàn)在的每頁(yè)的固定位置翠忠。fixed屬性會(huì)創(chuàng)建新的層疊上下文鞠苟。當(dāng)元素祖先的transform,perspective或filter屬性非none時(shí)，容器由視口改為該祖先秽之。 -
sticky粘性定位
元素根據(jù)正常文檔流進(jìn)行定位当娱，然后相對(duì)它的最近滾動(dòng)祖先（nearest scrolling ancestor）和 containing block (最近塊級(jí)祖先 nearest block-level ancestor)，包括table-related元素考榨，基于top,right,bottom, 和left的值進(jìn)行偏移跨细。偏移值不會(huì)影響任何其他元素的位置。
3.垂直居中
- 單行文本 設(shè)置
line-height等于父元素高度 - 行內(nèi)塊級(jí)元素
flex
.parent {
display: flex;
align-items: center;
}
vertical-align:middle;
.parent::after, .son{
display:inline-block;
vertical-align:middle;
}
.parent::after{
content:'';
height:100%;
}
transform absolute
.son{
position:absolute;
top:50%;
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
transform: translate(0,-50%);
}
4.盒模型
- IE怪異盒模型（IE8以下）width-
width=content+padding+border-box-sizing:border-box; - 標(biāo)準(zhǔn)盒模型(W3C標(biāo)準(zhǔn))-
width=content-box-sizing:
box-sizing: content-box // 標(biāo)準(zhǔn)盒模型
box-sizing: border-box // 怪異盒模型
box-sizing: padding-box // 火狐的私有模型河质，沒人用
5.為什么有時(shí)候人們用translate來改變位置而不是定位冀惭？
translate()是transform的一個(gè)值。改變transform或opacity不會(huì)觸發(fā)瀏覽器重新布局（reflow）或重繪（repaint）掀鹅，只會(huì)觸發(fā)復(fù)合（compositions）云头。而改變絕對(duì)定位會(huì)觸發(fā)重新布局，進(jìn)而觸發(fā)重繪和復(fù)合淫半。transform使瀏覽器為元素創(chuàng)建一個(gè) GPU 圖層，但改變絕對(duì)定位會(huì)使用到 CPU匣砖。 因此translate()更高效科吭，可以縮短平滑動(dòng)畫的繪制時(shí)間。
而translate改變位置時(shí)猴鲫，元素依然會(huì)占據(jù)其原始空間对人，絕對(duì)定位就不會(huì)發(fā)生這種情況。
