1.浮動(dòng)元素有什么特征瓶摆？對(duì)父容器刊愚、其他浮動(dòng)元素弟头、普通元素吩抓、文字分別有什么影響?
特征：元素浮動(dòng)可以使文件脫離普通流，根據(jù)設(shè)置向左或向右浮動(dòng)赴恨。
父容器：元素浮動(dòng)之后無(wú)法被父容器感知疹娶，從而會(huì)導(dǎo)致父容器高度塌陷。
其他浮動(dòng)元素：設(shè)置為同一方向浮動(dòng)的元素伦连，在父容器寬度足夠的時(shí)候呈水平排列雨饺。寬度不夠則會(huì)另起一行。在向左浮動(dòng)時(shí)惑淳，如果左邊有元素比其他元素高出一塊额港，則會(huì)擋住后面另起一行的元素。
普通元素：在浮動(dòng)元素之后的元素因?yàn)楦兄坏礁?dòng)元素會(huì)覆蓋到浮動(dòng)元素的下方歧焦。
文字：文字可以感知到浮動(dòng)元素移斩，文字會(huì)環(huán)繞著浮動(dòng)元素顯示。
2.清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
清除浮動(dòng)：解決因設(shè)置元素為浮動(dòng)而帶來(lái)的負(fù)元素高度塌陷的問(wèn)題倚舀。
方法：
- 在父元素的最后添加新的div元素叹哭，設(shè)置樣式clear:both;
- 給父類(lèi)元素設(shè)置偽類(lèi)選擇器（:after，:before）痕貌，然后加入代碼
.container:after{
content:"";
display:block;
clear:both;
}
- 使父元素形成BFC來(lái)清理浮動(dòng)风罩。
3.有幾種定位方式，分別是如何實(shí)現(xiàn)定位的舵稠，參考點(diǎn)是什么超升，使用場(chǎng)景是什么入宦？
static: 默認(rèn)值，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
relative: 生成相對(duì)定位的元素室琢，相對(duì)于元素本身正常位置進(jìn)行定位,因此乾闰，left:20px 會(huì)向元素的 left 位置添加20px。
absolute: 生成絕對(duì)定位的元素盈滴，相對(duì)于static定位以外的第一個(gè)祖先元素進(jìn)行定位,元素的位置通過(guò) left, top, right 以及 bottom 屬性進(jìn)行規(guī)定涯肩。absolute會(huì)使元素脫離普通流，原來(lái)的位置會(huì)被其他元素填充巢钓。
fixed:生成絕對(duì)定位的元素病苗，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò) left, top, right 以及 bottom 屬性進(jìn)行規(guī)定症汹。用在各種不隨滾動(dòng)條滾動(dòng)而變化的元素硫朦，如對(duì)聯(lián)廣告等。
4.z-index 有什么作用? 如何使用? 引用自
z-index只可以給設(shè)置了position為非static的元素使用背镇。z-index決定了元素的堆疊順序咬展。
每次給一個(gè)新元素設(shè)置z-index除auto以外的值都會(huì)創(chuàng)造一個(gè)新的層疊上下文。
在同一個(gè)層疊上下文中z-index較大一方會(huì)排在z-index較小一方的上面瞒斩。
在同一個(gè)層疊層中z-index較大一方會(huì)排在z-index較小一方的上面破婆。
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative只改變?cè)氐娘@示位置，而不改變?cè)卦谄胀髦械奈恢眯卮眩圆粫?huì)對(duì)其他元素產(chǎn)生影響荠割。
負(fù)margin改變了元素在普通流的位置并且會(huì)影響其他元素。
6.BFC 是什么旺矾？如何生成 BFC？BFC 有什么作用夺克？舉例說(shuō)明
是什么：BFC可以使元素形成一個(gè)容器箕宙，容器中的元素不會(huì)影響到外部的其他元素。
如何生成：
- 設(shè)置float為left或者right铺纽。
- 設(shè)置overflow為hidden柬帕、auto、scroll三者中的一種狡门。
- 設(shè)置display為inline-block陷寝、table-caption、table-cell三者中的一種其馏。
- 設(shè)置position為inline-block, table-cell, table-caption, flex, inline-flex.
作用：解決margin重疊問(wèn)題凤跑，清除浮動(dòng)。
7.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并叛复？如何合并仔引？如何不讓相鄰元素外邊距合并扔仓？給個(gè)父子外邊距合并的范例
- 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？
- 相鄰的兄弟姐妹元素
- 塊級(jí)父元素與其第一個(gè)/最后一個(gè)子元素
- 空塊元素
- 如何合并咖耘？
兩個(gè)正margin會(huì)留下較大的一個(gè)
兩個(gè)負(fù)margin會(huì)留下絕對(duì)值較大的一個(gè)
一正一副會(huì)留下兩個(gè)相加的和 -
如何不讓相鄰元素外邊距合并翘簇？
給元素設(shè)置border或者padding或者讓元素形成BFC。
Capture.PNG
圖中box2為父元素儿倒，box1為子元素版保。
