浮動(dòng)元素有什么特征妒穴？
特征
- 元素浮動(dòng)之后不占據(jù)原來的位置
- 浮動(dòng)的盒子在一行上顯示
- 行內(nèi)元素浮動(dòng)之后轉(zhuǎn)換為具備有塊級(jí)元素的特征洞焙，可以設(shè)置寬高
浮動(dòng)元素對(duì)父容器吕朵、其他浮動(dòng)元素绰垂、普通元素嗅榕、文字分別有什么影響?
- 如果父容器的子元素都是浮動(dòng)元素顺饮，如果父容器沒有定義高度，那么父容器會(huì)失去高度凌那，在浮動(dòng)元素之外兼雄。
- 對(duì)于普通元素，普通元素會(huì)感知不到浮動(dòng)元素當(dāng)然存在帽蝶，如果寬高合適赦肋，后面的元素會(huì)占據(jù)浮動(dòng)元素原來的位置
- 對(duì)于文字來說，能感知到浮動(dòng)元素的存在励稳，如果位置足夠佃乘，就能夠?qū)崿F(xiàn)文本繞圖的效果
清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
清除浮動(dòng)不是不要浮動(dòng)，而是清楚浮動(dòng)帶來的不利影響
方法
- 使父元素形成新的BFC驹尼，可以使用overflow：hidden/auto/scroll
display:inline-block float:方位等等 - 使用偽元素清楚浮動(dòng),如
.clearfix{zoom:1;}
.clearfix:after{
content:"";
display:block;
visible:hidden;
clear:both;
}
然后在需要清除浮動(dòng)的元素進(jìn)行調(diào)用趣避。
有幾種定位方式，分別是如何實(shí)現(xiàn)定位的新翎，參考點(diǎn)是什么程帕，使用場(chǎng)景是什么？
- inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值
- 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è)祖先元素（offset parent）進(jìn)行定位,元素的位置通過 left, top, right以及 bottom 屬性進(jìn)行規(guī)定
- fixed生成絕對(duì)定位的元素敛苇，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定
- stickyCSS3新屬性，表現(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)位置
普通流與相對(duì)定位
CSS有三種基本的定位機(jī)制：普通流图焰，相對(duì)定位和絕對(duì)定位
普通流是默認(rèn)定位方式，在普通流中元素框的位置由元素在html中的位置決定蹦掐，元素position屬性為static或繼承來的static時(shí)就會(huì)按照普通流定位技羔，這也是我們最常見的方式
相對(duì)定位比較簡(jiǎn)單，對(duì)應(yīng)position屬性的relative值卧抗，如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位藤滥，它將出現(xiàn)在他所在的位置上，然后可以通過設(shè)置垂直或水平位置社裆，讓這個(gè)元素相對(duì)于它自己移動(dòng)拙绊，在使用相對(duì)定位時(shí)，無論元素是否移動(dòng)泳秀，元素在文檔流中占據(jù)原來空間标沪，只是表現(xiàn)出來的位置會(huì)改變
絕對(duì)定位與固定定位相對(duì)定位可以看作特殊的普通流定位，元素位置是相對(duì)于它在普通流中位置發(fā)生變化嗜傅，而絕對(duì)定位使元素的位置與文檔流無關(guān)金句，也不占據(jù)文檔流空間，普通流中的元素布局就像絕對(duì)定位元素不存在一樣
絕對(duì)定位的元素的位置是相對(duì)于距離最近的非static祖先元素位置決定的吕嘀。如果元素沒有已定位的祖先元素趴梢，那么他的位置就相對(duì)于初始包含塊html來定位
因?yàn)榻^對(duì)定位與文檔流無關(guān)，所以絕對(duì)定位的元素可以覆蓋頁面上的其他元素币他，可以通過z-index
z-index 有什么作用? 如何使用?
- z-index 屬性指定一個(gè)元素的堆疊順序坞靶。因?yàn)榻^對(duì)定位的元素脫離了普通流，所以絕對(duì)定位的元素可以覆蓋頁面上的其它元素蝴悉。這時(shí)可以通過給元素設(shè)置z-index屬性來控制疊放順序彰阴，擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
- z-index有三個(gè)屬性
auto 默認(rèn)拍冠。堆疊順序與父元素相等尿这。
number設(shè)置元素的堆疊順序。
inherit規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值庆杜。
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative;只相對(duì)自己原本位置發(fā)生偏移射众，不影響其它普通流中元素的位置。margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素晃财。
BFC 是什么叨橱？如何生成 BFC？BFC 有什么作用？舉例說明
BFC是指塊級(jí)元素格式化罗洗，在同一個(gè)BFC中愉舔，元素會(huì)遵守一些規(guī)則，如從上到下排列伙菜，邊距合并等轩缤，如果是相鄰兩個(gè)元素分別處于兩個(gè)BFC當(dāng)中，則一般不會(huì)遵循這些規(guī)則贩绕。
作用：
（1） 解決margin重疊問題火的，在同一個(gè)BFC中，相鄰元素之間的邊距會(huì)合并淑倾，如果把這兩個(gè)元素分別放在兩個(gè)BFC中馏鹤，name他們的邊距就不會(huì)合并。一般應(yīng)用于嵌套關(guān)系踊淳。
（2）清除浮動(dòng)。BFC不會(huì)重疊浮動(dòng)元素陕靠。
在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并迂尝？如何合并？如何不讓相鄰元素外邊距合并剪芥？給個(gè)父子外邊距合并的范例
外邊距合并出現(xiàn)的三個(gè)場(chǎng)景垄开。
- 同一個(gè)BFC，且同處于普通流中的垂直相鄰元素外邊距合并税肪。
- 父子元素的外邊距合并溉躲。
- 空元素的外邊距合并。
合并規(guī)則：
- 兩個(gè)margin都是正值的時(shí)候益兄，取兩者的最大值锻梳；
- 當(dāng) margin 都是負(fù)值的時(shí)候，取的是其中絕對(duì)值較大的净捅，然后疑枯，從0位置，負(fù)向位移蛔六；
- 當(dāng)有正有負(fù)的時(shí)候荆永，先取出負(fù) margin 中絕對(duì)值中最大的，然后国章，和正 margin 值中最大的 margin 相加具钥。
- 所有毗鄰的margin要一起參與運(yùn)算，不能分步進(jìn)行
不讓相鄰元素外邊距合并的方法： - 被非空內(nèi)容液兽、padding骂删、border 或 clear 分隔開。
- 不在一個(gè)普通流中或一個(gè)BFC中。
- margin在垂直方向上不毗鄰桃漾。
總結(jié)：
- 這些margin都處于普通流中坏匪，并在同一個(gè)BFC中；
- 這些margin沒有被非空內(nèi)容撬统、padding适滓、border 或 clear 分隔開；
- 這些margin在垂直方向上是毗鄰的恋追，包括以下幾種情況：
一個(gè)box的top margin與第一個(gè)子box的top margin
一個(gè)box的bottom margin與最后一個(gè)子box的bottom margin凭迹，但須在該box的height 為auto的情況下
一個(gè)box的bottom margin與緊接著的下一個(gè)box的top margin
一個(gè)box的top margin與其自身的bottom margin，但須滿足沒創(chuàng)建BFC苦囱、零min-height嗅绸、零或者“auto”的height、沒有普通流的子元素撕彤。
- 例外的情況
根元素的外邊距不會(huì)參與折疊
不設(shè)置任何屬性的空span和空div不影響任何布局鱼鸠，可以無視之。
