1吵冒、浮動(dòng)元素有什么特征？對(duì)父容器愿题、其他浮動(dòng)元素损俭、普通元素、文字分別有什么影響?
- 浮動(dòng)元素特征：1潘酗、浮動(dòng)的框可以根據(jù)float屬性值左右移動(dòng)杆兵，直到其邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框邊緣；2仔夺、脫離了普通流并可視琐脏，但普通流中的文本和行內(nèi)元素可感知浮動(dòng)元素，會(huì)主動(dòng)讓位缸兔，環(huán)繞浮動(dòng)元素日裙。
- 對(duì)父容器：當(dāng)子元素全部float時(shí)，會(huì)導(dǎo)致父容器高度塌陷（在沒設(shè)置height的情況下）惰蜜，無法撐開昂拂。
- 其它浮動(dòng)元素：當(dāng)父容器寬度過小，無法容納水平排列的浮動(dòng)元素時(shí)抛猖，那么其它浮動(dòng)塊向下移動(dòng)格侯，直到有足夠的空間。如果浮動(dòng)元素高度不同财著，那么向下移動(dòng)的時(shí)候可能被卡住联四。
- 普通元素：普通元素（非float）表現(xiàn)得就像float元素不存在一樣，占用位置撑教；但浮動(dòng)元素在表層朝墩，可視，會(huì)遮住普通元素驮履。
- 文字：文字會(huì)感知浮動(dòng)元素鱼辙，主動(dòng)讓位廉嚼，環(huán)繞float元素玫镐。
2倒戏、清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
- 清除浮動(dòng)，不是消除float元素恐似，而是清除float元素帶來的不利影響杜跷，只對(duì)清除的元素生效。
- 如何清除浮動(dòng)：
1矫夷、添加一個(gè)空<div><div style="clear: both"></div>
2葛闷、BFC清理浮動(dòng)。因?yàn)锽FC可以包含浮動(dòng)双藕，將父容器形成一個(gè)BFC即可淑趾。
3、通用清理浮動(dòng)方案
父元素:after{
content: '';
display: block;
clear: both;
}
3忧陪、有幾種定位方式扣泊，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么嘶摊，使用場(chǎng)景是什么延蟹？
屬性position，可應(yīng)用到所有元素叶堆，屬性值有以下六種：
-
inherit阱飘，繼承父元素position屬性的值。 -
static虱颗，默認(rèn)值沥匈，沒有定位，元素出現(xiàn)在正常文檔流中忘渔。 -
relative高帖，相對(duì)定位，通過left辨萍、top以及bottom屬性進(jìn)行定位棋恼；參考點(diǎn)：元素本身正常位置，不脫離文檔流锈玉，其它元素還在正常文檔流中（坑不動(dòng)）爪飘。使用場(chǎng)景：可用于設(shè)置position的祖先元素，或按定義調(diào)整元素位置拉背。 -
absolute师崎，絕對(duì)定位，通過left椅棺、top以及bottom屬性進(jìn)行定位犁罩；參考點(diǎn)：選取其最近的父級(jí)定位元素齐蔽，當(dāng)父級(jí) position 為 static 時(shí)，absolute元素將以body坐標(biāo)原點(diǎn)進(jìn)行定位床估，脫離文檔流含滴，對(duì)其它元素?zé)o影響，不占據(jù)文檔流空間丐巫。使用場(chǎng)景：如導(dǎo)航欄的二級(jí)菜單谈况，hover可現(xiàn)。 -
fixed递胧，固定定位碑韵，通過left、top以及bottom屬性進(jìn)行定位缎脾；參考點(diǎn)：相對(duì)于瀏覽器窗口定位祝闻，脫離文檔流，固定元素的包含塊是一個(gè)視口遗菠。應(yīng)用場(chǎng)景：如模態(tài)框效果联喘。 -
sticky， CSS3新屬性舷蒲，表現(xiàn)類似position:relative和position:fixed的合體耸袜。兼容性不好，不推薦使用牲平。
4堤框、z-index 有什么作用? 如何使用?
通過對(duì)定位元素設(shè)置z-index屬性控制疊放順序，z-index越高纵柿，元素位置越靠上蜈抓。
5、position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別昂儒？
-
position: relative沟使，元素相對(duì)于自身位置發(fā)生偏移，不影響其他元素的位置渊跋，仍在正常文檔流中腊嗡。 -
margin：-px;，相對(duì)于父元素設(shè)置外邊距拾酝，會(huì)影響其他元素的位置燕少。
6、BFC 是什么蒿囤？如何生成 BFC客们？BFC 有什么作用？舉例說明
- BFC的全稱是Block Format Context，即塊級(jí)格式化上下文底挫，是頁面CSS視覺渲染的一部分恒傻，用于決定塊級(jí)盒子的布局及浮動(dòng)相互影響范圍的一個(gè)區(qū)域。
- BFC的創(chuàng)建方法：
（1）根元素建邓，或其它包含根元素的元素
（2）浮動(dòng)（元素的float不為none）
（3）定位（元素的position為absolute或fixed）
（4）設(shè)置行內(nèi)塊級(jí)元素（display: inline-block）盈厘；
（5）表格單元格（display: table-cell）
（6）設(shè)置block boxes的overflow的值不為visible（overflow:hidden; scrou; auto）
（7）彈性盒子flex boxes（display: flex）
其中最常見的就是overflow:hidden,float:left/right,position: relative/absolute。 - BFC常見特性及作用
（1） BFC會(huì)阻止垂直外邊距合并（相鄰元素涝缝，嵌套元素）扑庞。
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
（2）BFC 不會(huì)重疊浮動(dòng)元素譬重。
讓正常元素拒逮，與浮動(dòng)元素不在重疊。因?yàn)檎Ｔ刂薪⒘艘粋€(gè)新的BFC臀规。
Paste_Image.png
Paste_Image.png
（3）BFC可以包含浮動(dòng)滩援。這一特性用來清除浮動(dòng)。
Paste_Image.png
Paste_Image.png
7塔嬉、在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并玩徊？如何合并？如何不讓相鄰元素外邊距合并谨究？給個(gè)父子外邊距合并的范例
- 在同一個(gè)BFC中恩袱，會(huì)出現(xiàn)外邊距合并，三種合并方式（1）相鄰元素胶哲，垂直外邊距合并畔塔；（2）嵌套元素（父子之間），垂直外邊距合并鸯屿。（3）元素自身合并澈吨，一個(gè)元素內(nèi)部沒有東西，自身的上下邊距相遇時(shí)都會(huì)發(fā)生外邊距合并寄摆。
- 如何合并：（1）兩個(gè)外邊距都是正數(shù)谅辣，取兩者之中的較大者；（2）兩個(gè)外邊距都是負(fù)數(shù)婶恼，取兩者之間絕對(duì)值較大者桑阶；（3）當(dāng)兩個(gè)外邊距一正一負(fù)時(shí)，取兩者的和勾邦。
- 阻止外邊距合并：生成BFC蚣录，使之不再一個(gè)BFC里。
- 父子外邊距合并例子
對(duì)于嵌套元素的外邊距合并检痰，在父元素中形成BFC包归，或者父元素加padding或者border等填充內(nèi)容。
Paste_Image.png
Paste_Image.png
Paste_Image.png
