1. 浮動(dòng)元素有什么特征臀防？對(duì)父容器、其他浮動(dòng)元素畏邢、普通元素、文字分別有什么影響?
特征：浮動(dòng)元素不在普通的文檔流中检吆， 根據(jù)float屬性值左右移動(dòng) 沒有center值舒萎，知道它的外邊緣碰到父元素的border時(shí) 或者另一個(gè)浮動(dòng)元素的border就停止移動(dòng)
對(duì)父容器的影響
如果父元素都是浮動(dòng)元素，那么父元素普通文檔流沒有元素 父元素沒有被撐開蹭沛，父元素會(huì)失去高度臂寝，在浮動(dòng)元素之外章鲤。看起來咆贬，父元素沒有包含住浮動(dòng)子元素
其他浮動(dòng)元素的影響
1.如果父級(jí)元素寬度不夠 無法容納水平排列的全部浮動(dòng)元素 排列不下的元素將會(huì)向下移動(dòng)败徊，直到有足夠的空間
2.如果父級(jí)元素寬度不夠 而且浮動(dòng)元素的高度不同， 那么向下移動(dòng)的時(shí)候可能會(huì)被卡滋投小（）
普通元素的影響
普通元素 和 浮動(dòng)元素 像有厚度一樣 浮動(dòng)元素在普通元素上面 看起來普通元素占據(jù)浮動(dòng)元素原有的位置皱蹦，但會(huì)被浮動(dòng)元素遮罩
對(duì)文字的影響
與浮動(dòng)元素同級(jí)元素里面的文字 與 浮動(dòng)元素是同一層的 所以會(huì)感知到浮動(dòng)元素的存在 形成環(huán)繞效果
2. 清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
清除浮動(dòng)是指結(jié)合clearCss屬性讓父元素在視覺上包圍浮動(dòng)元素。
清除浮動(dòng)：
- 在父級(jí)元素的子元素最后面添加一個(gè)紅div眷蜈， 并對(duì)其設(shè)置樣式： clear: both(元素被向下移動(dòng)用于清除之前的左右浮動(dòng))
由于在子元素最后添加了div沪哺， 被清除了浮動(dòng)， 因此父容器被撐開酌儒，實(shí)現(xiàn)了在視覺上包圍浮動(dòng)元素的效果
- 利用BFC（ block formatting contexts）來清除浮動(dòng)
BFC可以包含浮動(dòng)辜妓，因此可以讓父元素生成一個(gè)新的BFC從而包圍浮動(dòng)的子元素
可以對(duì)父元素設(shè)定以下樣式之一觸發(fā)這個(gè)元素的BFC生成BFC
float： left| right
overflow： hidden | auto | scroll
display： table-cell | table-caption | inline-block
position: absolute | fixed
- 結(jié)合css特性的通用清除浮動(dòng)方案， 其本質(zhì)還是第一種方法
.clearfix{zoom:1;}
.clearfix:after {
content: "";
display: block;
clear: both;
}
3. 有幾種定位方式忌怎， 分別是如何實(shí)現(xiàn)定位的 參考點(diǎn)是什么籍滴， 使用場(chǎng)景是什么
inherit： 基礎(chǔ)父元素的定位
static： 默認(rèn)值沒有定位， 元素出現(xiàn)在正常的文檔流中榴啸。 參考點(diǎn)是文檔流中的位置
relative： 相對(duì)定位 相對(duì)于元素本身正常位置進(jìn)行定位 通過top bottom left right 屬相來設(shè)置偏移量孽惰。使用場(chǎng)景：為絕對(duì)定位設(shè)定參照物或?qū)υ刈陨砦恢眠M(jìn)行局部調(diào)整
absolute： 絕對(duì)定位。相對(duì)于static 定義意外的第一個(gè)祖先元素進(jìn)行定位插掂，若都沒有發(fā)現(xiàn)則以html標(biāo)簽為參考對(duì)象進(jìn)行定位灰瞻。使用場(chǎng)景：當(dāng)想讓元素參照特定的元素進(jìn)行定位時(shí)使用
sticky： 對(duì)象在常態(tài)時(shí)遵循普通流腥例。他就像relative 和 fixed的合體 擋在屏幕中按常規(guī)流排版辅甥，當(dāng)轉(zhuǎn)動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed
4. z-index有什么作用？ 如何使用
css 為盒模型的布局提供了三種不同的定位方案
常規(guī)文檔流燎竖， 浮動(dòng)璃弄，絕對(duì)定位
絕對(duì)定位將一個(gè)元素從常規(guī)流中移除，完全依賴開發(fā)者來確定元素顯示的位置
通過賦予 top构回，left夏块， bottom， right 屬性值纤掸， 可以在二維平面上防止元素脐供，此外css還可以使用z-index屬性讓元素在第三維上放置元素
z-index可以設(shè)置三中值： auto（自動(dòng)， 默認(rèn)值）整數(shù)（正值借跪， 負(fù)值政己， 或0）數(shù)值越大，元素也就越靠近觀察者掏愁。數(shù)值越小歇由，元素看起來就越遠(yuǎn)
- 當(dāng)一個(gè)設(shè)置了z-index值的定位與常規(guī)文檔流中的元素相互重疊時(shí)卵牍，誰會(huì)在誰的上面
- 當(dāng)定位元素與浮動(dòng)元素相互重疊的時(shí)候，誰會(huì)在誰的上面
- 當(dāng)定位元素被嵌套在其他定位元素中會(huì)發(fā)生什么
帶著疑問 來了解 z-index 原理 幾個(gè)重點(diǎn)概念 層疊上下文 層疊層 以及超跌次序這些概念
層疊上下文 和 層疊層
層疊上下文 和層疊層沒有確切概念沦泌， 所以我們想像一張桌子糊昙，上面有一堆物品。桌子為層疊上下文 如果在桌子旁還有第二張桌子谢谦，則也代表另一個(gè)層疊上下文
現(xiàn)在想象在第一張桌子上有四個(gè)小模塊船侧，他們都直接放在桌子上。在這四個(gè)小方塊上有一片玻璃厅各，而在玻璃片上有一盤水果镜撩。這些方塊，玻璃片队塘， 水果盤袁梗，各自都代表著層疊上下文中一個(gè)不同的層疊層， 而這個(gè)層疊上下文就是桌子
每一個(gè)網(wǎng)頁(yè)都有一個(gè)默認(rèn)的層疊上下文憔古。 這個(gè)層疊上下文的根源就是 html 元素遮怜。 html標(biāo)簽中的一切都被置于這個(gè)默認(rèn)的層疊上下文的一個(gè)層疊層上
當(dāng)你給一個(gè)元素賦予了除auto(自動(dòng))外的z-index值時(shí)， 你就創(chuàng)建了一個(gè)新的層疊上下文 其中有著獨(dú)立于頁(yè)面上 其他層疊上下文和層疊層的 層疊層鸿市。 就相當(dāng)于你把另一張桌子帶到了房間里
層疊次序
最容易理解層疊次序的方法就是用一個(gè)簡(jiǎn)單的例子來說明锯梁，這個(gè)例子簡(jiǎn)單到我們甚至?xí)簳r(shí)不考慮定位元素。
想象一張非常簡(jiǎn)單的網(wǎng)頁(yè)焰情。除了默認(rèn)的 <html>, <head>, <body> 之類的元素陌凳，你會(huì)發(fā)現(xiàn)在每個(gè)頁(yè)面上都有那么一個(gè)<div> 元素。在你的css文件中内舟， 你給html元素設(shè)置了藍(lán)色的背景顏色合敦。對(duì)于div元素， 你設(shè)置了高度和紅色的背景顏色验游。
那么在你你加載頁(yè)面的時(shí)候充岛， 你會(huì)期望看到什么呢？
應(yīng)該及時(shí)一幅 幾乎全是藍(lán)色的屏幕耕蝉，除了上面有一塊紅色的方塊崔梗，這個(gè)方塊由著你設(shè)置的寬和高。這個(gè)紅色方塊應(yīng)該會(huì)出現(xiàn)在頁(yè)面的左上角
你也許會(huì)想”那又怎樣垒在？ 這不是很明顯么“蒜魄， 但是不明顯的是 為什么你會(huì)在藍(lán)色的背景上看到有一個(gè)紅色的方塊。為什么你會(huì)看到div元素在html元素上方呢？奇不奇怪 原因就是他們都遵循層疊次序的規(guī)則
比如在這個(gè)簡(jiǎn)單的例子里权悟，規(guī)則規(guī)定常規(guī)流（例子中的div）中的子塊會(huì)被置于根元素（例子中的html元素）的背景和邊框之上砸王。 你會(huì)看到div元素在最上面是因?yàn)樗诟叩膶盈B層上面
盡管上面的給出的例子只包含了一個(gè)兩級(jí)的層疊， 事實(shí)上在一個(gè)層疊上下文中一共可以有7種 層疊等級(jí)峦阁， 列舉如下：
- 背景和邊框 ---- 形成層疊上下文的元素背景和邊框谦铃。層疊上下文中的最低等級(jí)
- 負(fù)z-index值 ---- 層疊上下文內(nèi)有負(fù)z-index值的子元素
- 塊級(jí)盒 ---- 文檔流中非行內(nèi)非定位子元素
- 浮動(dòng)盒 ---- 非定位浮動(dòng)元素
- 行內(nèi)盒 --- 文檔流中行內(nèi)級(jí)別非定位子元素
- z-index:0 ---- 定位元素。這些元素形成了新的層疊上下文榔昔。
-
正z-index值 -- 定位元素驹闰。 層疊上下文中的最高等級(jí)
層疊上下文中的七種層疊等級(jí)
這七個(gè)層疊等級(jí)構(gòu)成了層疊次序的規(guī)則
在一個(gè)層級(jí)上下文中 背景邊框< z-index負(fù)數(shù) < 普通塊級(jí)元素 < float浮動(dòng)元素 < 行內(nèi)元素 < z-index = 0 < z-index 正數(shù)
綜合總結(jié)
當(dāng)你將除了 auto 以外的z-index值賦給一個(gè)元素，你就創(chuàng)建了一個(gè)新的層疊上下文撒会， 它獨(dú)立于其他的層疊上下文嘹朗。
讓我們?cè)俅伟炎雷赢?dāng)做層疊上下文來考慮。之前诵肛，我們有一張桌子 桌子上有四個(gè)方塊 一片玻璃 和 一盤水果屹培。 想象在這個(gè)第二張桌子上也有四個(gè)同樣大小的方塊， 方塊上有一片玻璃 不過沒有水果盤怔檩。
你一定會(huì)想第一張桌子上的水果盤是房間里最高的東西了褪秀。因?yàn)樗谧罡叩膶盈B層上， 但要是我們把第一張桌子和這張桌子上的一切東西都放到地下室去呢薛训？ 那么水果盤現(xiàn)在就會(huì)比所有在第二張桌子的東西低了媒吗，因?yàn)榈谝粡堊雷颖旧硪呀?jīng)移到比第二張桌子低的層疊層了
5. position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative;只相對(duì)自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置乙埃。
margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素闸英。
6. BFC 是什么？如何生成 BFC介袜？BFC 有什么作用甫何？舉例說明
BFC是塊級(jí)格式上下文。其解釋是：浮動(dòng)米酬、絕對(duì)定位（絕對(duì)定位沛豌、固定定位）元素趋箩、塊級(jí)容器（如inline-block赃额、 table-cell、table-caption）并不是塊級(jí)盒子叫确，還包括那些overflow屬性值取值visible以外的塊級(jí)盒子跳芳，會(huì)為它們的內(nèi)容物創(chuàng)建一個(gè)新的塊級(jí)格式化上下文。對(duì)元素設(shè)置以下屬性就可以生成BFC：
- float: left | right;
- overflow: hidden | auto | scroll;
- display: table-cell | table-caption | inline-block;
- position: absolute | fixed;
BFC的作用有：
（1）解決margin重疊問題竹勉。所謂margin重疊是指處于同一個(gè)BFC的相鄰元素飞盆、嵌套元素，只要它們之間沒有阻擋（如：邊框、非空內(nèi)容吓歇、padding等）就會(huì)發(fā)生margin重疊孽水。這是只要讓其中一個(gè)元素生成新的BFC就能解決margin重疊問題。
（2）清除浮動(dòng)城看。因?yàn)锽FC可以包含浮動(dòng)女气，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動(dòng)的子元素，因而清除了浮動(dòng)测柠。
7. 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并炼鞠？如何合并？如何不讓相鄰元素外邊距合并轰胁？給個(gè)父子外邊距合并的范例
塊的頂部外邊距和底部外邊距有時(shí)被組合（折疊）為單個(gè)外邊距谒主， 其大小是組合到其中的最大外邊距， 這種行為稱為外邊距塌陷
發(fā)生外邊距塌陷的三種基本情況：
-
相鄰的兄弟元素
毗鄰的兩個(gè)兄弟元素之間的外邊距會(huì)塌陷（除非后者兄弟元素需要除去浮動(dòng)）例如：
<p style="margin-bottom: 30px;">這個(gè)段落的下外邊距被合并...</p>
<p style="margin-top: 20px;">...這個(gè)段落的上外邊距被合并赃阀。</p>
可以發(fā)現(xiàn)這兩個(gè)段落中間的距離霎肯，不是 ”上面段落的下邊距“ 與 ”下面段落的上邊距“ 的 求和 ，而是兩者中的較大者（在此示例中為30px）榛斯。
- 塊級(jí)元素與其第一個(gè)/最后一個(gè)子元素
如果塊級(jí)父元素中姿现，不存在上邊框
、上內(nèi)邊距
肖抱、內(nèi)聯(lián)元素备典、* 清除浮動(dòng)
***** 這四條屬性（也可以說，當(dāng)上邊框?qū)挾燃吧蟽?nèi)邊距距離為0時(shí)）意述，那么這個(gè)塊級(jí)元素和其第一個(gè)子元素的上邊距就可以說”挨到了一起“提佣。此時(shí)這個(gè)塊級(jí)父元素和其第一個(gè)子元素就會(huì)發(fā)生上外邊距合并現(xiàn)象，換句話說荤崇，此時(shí)這個(gè)父元素對(duì)外展現(xiàn)出來的外邊距將直接變成這個(gè)父元素和其第一個(gè)子元素的margin-top的較大者拌屏。
類似的，若塊級(jí)父元素的 margin-bottom
與它的最后一個(gè)子元素的margin-bottom
之間沒有父元素的 border
术荤、padding
倚喂、inline content、height
瓣戚、min-height
端圈、 max-height 分隔時(shí)，就會(huì)發(fā)生 下外邊距合并 現(xiàn)象子库。
- 空快元素
如果存在一個(gè)空的塊級(jí)元素舱权，其 border
、padding
仑嗅、inline content宴倍、height
张症、min-height
都不存在。那么此時(shí)它的上下邊距中間將沒有任何阻隔鸵贬，此時(shí)它的上下外邊距將會(huì)合并俗他。例如：
<p style="margin-bottom: 0px;">這個(gè)段落的和下面段落的距離將為20px</p>
<div style="margin-top: 20px; margin-bottom: 20px;"></div>
<p style="margin-top: 0px;">這個(gè)段落的和上面段落的距離將為20px</p>
當(dāng)以上情形同時(shí)出現(xiàn)時(shí)，外邊距合并會(huì)更加復(fù)雜（會(huì)比較兩個(gè)以上外邊距來最終計(jì)算出真實(shí)的邊距值）阔逼。
即使外邊距為0拯辙，這些規(guī)則也仍舊生效。因此颜价，無論父元素的外邊距是否為0涯保，第一個(gè)或者最后一個(gè)子元素的外邊距會(huì)被父元素的外邊距"截?cái)?(根據(jù)上面的規(guī)則)，在負(fù)外邊距的情況下周伦，合并后的外邊距為最大正外邊距與最小負(fù)外邊距之和夕春。
當(dāng)有負(fù)邊距存在時(shí)，合并后的外邊距將是最大正邊距加上最小負(fù)邊距（即負(fù)邊距中絕對(duì)值最大的一個(gè)）专挪。
如兩個(gè)兄弟元素及志，上面的元素的下邊距為 20px ，下面的元素的上邊距為 -20px 寨腔，那么發(fā)生外邊距合并后速侈，這兩個(gè)元素的實(shí)際距離將變成 0px 。
BFC會(huì)阻止元素外邊距合并迫卢。
