1.浮動(dòng)元素有什么特征蕾盯？對(duì)父容器竹揍、其他浮動(dòng)元素、普通元素痕鳍、文字分別有什么影響?
- 浮動(dòng)模型也是一種可視化格式模型硫豆，浮動(dòng)的框可以左右移動(dòng)（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣笼呆。浮動(dòng)元素不在文檔的普通流中熊响，文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣.
- 對(duì)父元素的影響：浮動(dòng)元素脫離文檔流向左或者向右移動(dòng)，直到邊框碰到父元素的邊緣诗赌。引起的父元素高度塌陷汗茄。
- 對(duì)其他浮動(dòng)元素的影響：
a.父容器足夠?qū)挘c其他浮動(dòng)元素同一水平方向依次排列铭若。
b.父容器寬度在同一水平方向上不能同時(shí)容納全部浮動(dòng)元素時(shí)洪碳，超出父容器寬度的浮動(dòng)元素向下移動(dòng),直到有足夠的空間
c.如果水平排列三個(gè)以上高度不同浮動(dòng)元素，那么向下移動(dòng)的時(shí)候可能被卡住叼屠。 - 對(duì)普通元素的影響：浮動(dòng)元素之前的普通元素不受影響瞳腌。浮動(dòng)元素之后的普通元素因感知不到浮動(dòng)元素的存在會(huì)被浮動(dòng)元素覆蓋。
- 對(duì)文元素的影響：浮動(dòng)會(huì)讓元素脫離普通流, 如果浮動(dòng)的元素后面有一個(gè)文檔流中元素,那么這個(gè)元素的框會(huì)表現(xiàn)的像浮動(dòng)元素不存在,但是框的文本內(nèi)容會(huì)受到浮動(dòng)元素的影響,會(huì)移動(dòng)以留出空間镜雨。用術(shù)語說就是浮動(dòng)元素旁邊的行框被縮短,從而給浮動(dòng)元素流出空間,因而行框圍繞浮動(dòng)框嫂侍。
2.清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
清除浮動(dòng)：用于解決浮動(dòng)父容器高度塌陷問題
清除浮動(dòng)方法：
1.添加新的元素 并應(yīng)用 clear：both. *缺點(diǎn)是增加了一個(gè)無意義的標(biāo)簽
2.使父容器形成BFC
(如：float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block
position為 absolute|fixed)*有局限性
3.有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么挑宠，使用場(chǎng)景是什么菲盾？
|值 |定位實(shí)現(xiàn)方式|參考點(diǎn)|適用場(chǎng)景|
|---|---|
|inherit |規(guī)定從父元素繼承 position 屬性的值|||
|static |默認(rèn)值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）|||
|relative |相對(duì)定位痹栖，元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定|相對(duì)于元素本身正常位置進(jìn)行定位|一般作為絕對(duì)定位的元素參考點(diǎn)|
|absolute| 絕對(duì)定位亿汞，元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定|相對(duì)于static定位以外的第一個(gè)祖先元素（offset parent）進(jìn)行定位|元素的水平垂直居中|
|fixed| 絕對(duì)定位，元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定|相對(duì)于瀏覽器窗口進(jìn)行定位揪阿，不隨滾動(dòng)條的滾動(dòng)而移動(dòng)|飄窗疗我、固定導(dǎo)航等|
|sticky |CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體南捂，在目標(biāo)區(qū)域在屏幕中可見時(shí)吴裤，它的行為就像position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像position:fixed溺健，它會(huì)固定在目標(biāo)位置||||
4.z-index 有什么作用? 如何使用?
- z-index 指定元素z-軸的堆疊順序麦牺。因?yàn)榻^對(duì)定位的元素脫離了普通流，所以絕對(duì)定位的元素可以覆蓋頁面上的其它元素鞭缭。這時(shí)可以通過給元素設(shè)置z-index屬性來控制疊放順序剖膳，擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
- z-index有三個(gè)屬性
auto ：默認(rèn)岭辣，堆疊順序與父元素相等吱晒。
number：設(shè)置元素的堆疊順序。
inherit：規(guī)定從父元素繼承 z-index 屬性的值沦童。
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative仑濒，元素顯示位置發(fā)生變化，但是元素在文檔流中的位置不變偷遗，不影響后面元素在文檔流中的布局墩瞳。
- 負(fù)margin，元素的顯示位置和在文檔流中的位置均發(fā)生變化氏豌，會(huì)影響后面元素在文檔流中的位置喉酌。
6.BFC 是什么？如何生成 BFC泵喘？BFC 有什么作用泪电？舉例說明
- 概念：BFC為塊格式化上下文（block formatting context）
BFC中的元素的布局是不受外界的影響，并且在一個(gè)BFC中涣旨，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會(huì)垂直的沿著其父元素的邊框排列歪架。
- 如何生成 BFC： 浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions）霹陡，以及overflow值不為“visiable”的塊級(jí)盒子和蚪，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）
- BFC 作用：
（1） 解決margin重疊問題：對(duì)于相鄰元素止状，讓他們不在同一個(gè)BFC；對(duì)于嵌套元素只要把父元素設(shè)為BFC就可以了攒霹。
（2）清除浮動(dòng)怯疤。BFC不會(huì)重疊浮動(dòng)元素。
7.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并催束？如何合并集峦？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
- 出現(xiàn)外邊距合并場(chǎng)景及合并情況：
1.相鄰的兄弟姐妹元素毗鄰的兩個(gè)兄弟元素之間的外邊距會(huì)塌陷抠刺，前一個(gè)元素的下邊距和后一個(gè)元素的上邊距合并塔淤，均為正數(shù)取其中的較大值，均為負(fù)數(shù)取其中的較小值速妖，有正有負(fù)運(yùn)算后的值正常偏移高蜂。
2.塊級(jí)父元素與其第一個(gè)/最后一個(gè)子元素
如果塊級(jí)父元素中，不存在上邊框罕容、上填充
备恤、inline content、清除浮動(dòng)這四條屬性（對(duì)于上邊框和上內(nèi)補(bǔ)锦秒，也可以說露泊，當(dāng)上邊距及上內(nèi)補(bǔ)寬度為0時(shí)），那么這個(gè)塊級(jí)元素和其第一個(gè)子元素的上邊距就可以說”挨到了一起“旅择。此時(shí)這個(gè)塊級(jí)父元素和其第一個(gè)子元素就會(huì)發(fā)生 上外邊距合并 現(xiàn)象惭笑，換句話說，此時(shí)這個(gè)父元素對(duì)外展現(xiàn)出來的外邊距將直接變成這個(gè)父元素和其第一個(gè)子元素的margin-top砌左，均為正數(shù)取其中的較大值脖咐，均為負(fù)數(shù)取其中的較小值铺敌，有正有負(fù)運(yùn)算后的值正常偏移汇歹。
類似的，若塊級(jí)父元素的 margin-bottom與它的最后一個(gè)子元素的margin-bottom之間沒有父元素的 border偿凭、padding产弹、inline content、height弯囊、min-height痰哨、max-height分隔時(shí)，就會(huì)發(fā)生 下外邊距合并 現(xiàn)象匾嘱。
3.空塊元素
如果存在一個(gè)空的塊級(jí)元素斤斧，其 border、padding霎烙、inline content撬讽、height
蕊连、min-height都不存在。那么此時(shí)它的上下邊距中間將沒有任何阻隔游昼，此時(shí)它的上下外邊距將會(huì)合并
- 解決合并方法
對(duì)于相鄰元素甘苍，讓他們不在同一個(gè)BFC；對(duì)于嵌套元素只要把父元素設(shè)為BFC就可以了烘豌。
