一渤愁、浮動(dòng)元素有什么特征？對(duì)父容器深夯、其他浮動(dòng)元素抖格、普通元素、文字分別有什么影響?
特征：
1塌西、浮動(dòng)模型是一種可視化格式模型他挎，浮動(dòng)的框可以左右移動(dòng)（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣捡需。
2办桨、浮動(dòng)元素不在文檔的普通流中，文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣站辉。
3呢撞、如果包含塊兒太窄無法容納水平排列的三個(gè)浮動(dòng)元素,那么其它浮動(dòng)塊兒向下移動(dòng),直到有足夠的空間,如果浮動(dòng)元素的高度不同,那么向下移動(dòng)的時(shí)候可能被“卡住”损姜，即向下移動(dòng)時(shí)，它會(huì)優(yōu)先向著有足夠空間的區(qū)域移動(dòng)殊霞。
4摧阅、浮動(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)框绷蹲。
影響：
1棒卷、對(duì)父容器影響：父容器下的子元素如果都出現(xiàn)浮動(dòng)，就會(huì)造成父元素容器高度坍塌（高度為0px）的問題祝钢。但是浮動(dòng)還是以父容器的內(nèi)邊框?yàn)榻绫裙妫⑶視?huì)出現(xiàn)邊框合并的現(xiàn)象。
2拦英、對(duì)其它浮動(dòng)元素影響：浮動(dòng)的框可以左右移動(dòng)（根據(jù)float屬性值而定）蜒什，直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣。
3疤估、對(duì)普通元素影響：浮動(dòng)會(huì)讓元素脫離普通流, 如果浮動(dòng)的元素后面有普通元素,那么這個(gè)元素的框會(huì)表現(xiàn)的像沒有浮動(dòng)元素存在一樣灾常。
4、對(duì)文本影響：普通元素會(huì)忽略浮動(dòng)元素铃拇，但是文本內(nèi)容會(huì)移動(dòng)钞瀑，給浮動(dòng)元素流出空間，就會(huì)有文本行框圍繞浮動(dòng)元素的現(xiàn)象锚贱。
二仔戈、清除浮動(dòng)指什么? 如何清除浮動(dòng)的方法。
清除浮動(dòng)：指清除你所需要的元素受到浮動(dòng)元素的影響拧廊，例如邊距合并监徘，控制位置等樣式。
方法1吧碾、使用clear屬性凰盔，屬性值left，right倦春，both户敬，none表示普通元素的框的哪些邊不挨著浮動(dòng)框。需要注意的是睁本，clear屬性只對(duì)自身有效尿庐，只能在自身元素中使用clear。在被清理的元素的外邊距上添加足夠的空間呢堰。
方法2抄瑟、用clear時(shí)，需要邊框才能清理枉疼，但有時(shí)候有些浮動(dòng)元素沒有現(xiàn)有的元素的邊框可以應(yīng)用清理皮假，所以我們只能添加一個(gè)空元素并且清理它鞋拟。這樣可以實(shí)現(xiàn)我們希望的效果，但是需要添加多余的代碼<div class="clear"></div>惹资，添加為父元素的最后一個(gè)塊贺纲。常常有元素可以應(yīng)用 clear，但是有時(shí)候不得不為了進(jìn)行布局而添加無意義的標(biāo)記褪测。（參考float）
方法3猴誊、使用E：after屬性選擇器，在父級(jí)容器最下面輸出一個(gè)空格汰扭，這種方法與方法二類似稠肘。解決父容器坍塌問題福铅。（*zoom:1;是解決IE6/7兼容的問題）
.clearfix{ *zoom:1; } .clearfix:after{ content:""; display:block; clear:left; }
方法3萝毛、對(duì)容器 div 進(jìn)行浮動(dòng)，浮動(dòng)父容器可以包括子浮動(dòng)元素這樣會(huì)得到我們希望的效果滑黔。但有可能笆包，下一個(gè)元素會(huì)受到這個(gè)浮動(dòng)元素的影響。為了解決這個(gè)問題略荡，有些人選擇對(duì)布局中的所有東西進(jìn)行浮動(dòng)庵佣，然后使用適當(dāng)?shù)挠幸饬x的元素（常常是站點(diǎn)的頁腳）對(duì)這些浮動(dòng)進(jìn)行清理。這有助于減少或消除不必要的標(biāo)記汛兜。（參考W3）
方法4巴粪、BFC（塊級(jí)格式化上下文）“清理”浮動(dòng)，對(duì)于嵌套元素粥谬，子元素浮動(dòng)會(huì)對(duì)父容器產(chǎn)生影響肛根，我們可以通過BFC這種方式，令父容器包含浮動(dòng)子元素漏策。實(shí)現(xiàn)BFC有多種方式派哲，（參考MDN、參考W3）掺喻。但是使用這種方法也是有影響或者是局限性芭届，例如使用display: inline-block，會(huì)縮短父容器長(zhǎng)度感耙。
綜上所述：對(duì)于特定的效果褂乍，我們需要使用合適的方法和屬性來解決問題。
三即硼、有幾種定位方式逃片，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么谦絮，使用場(chǎng)景是什么题诵？
CSS的 position 屬性設(shè)置元素的定位方式洁仗，為將要定位的元素定義定位規(guī)則。通常有四種定位方式：
1性锭、普通流定位：也就是默認(rèn)值為static,即沒有定位赠潦。
該值指定元素使用正常的布局行為，即元素在文檔流中當(dāng)前的布局位置草冈。此時(shí) top, right, bottom, left 和 z-index 屬性無效她奥。
2、相對(duì)定位元素（relatively positioned element）是計(jì)算后位置屬性為 relative 的元素怎棱。
該關(guān)鍵字下哩俭，元素先放置在未添加定位時(shí)的位置，再在不改變頁面布局的前提下調(diào)整元素位置（因此會(huì)在此元素未添加定位時(shí)所在位置留下空白）拳恋。
position:relative 未定義對(duì) table--group, table-row, table-column, table-cell, table-caption 元素應(yīng)用的效果凡资。
3、絕對(duì)定位元素（absolutely positioned element）是計(jì)算后位置屬為 absolute 或 fixed 的元素谬运。絕對(duì)定位寬度是收縮的隙赁，如果想撐滿父容器，可以設(shè)置 width: 100%梆暖。
absolute：不為元素預(yù)留空間伞访，通過指定元素相對(duì)于最近的非 static 定位祖先元素的偏移，來確定元素位置轰驳。絕對(duì)定位的元素可以設(shè)置外邊距（margins）厚掷，且不會(huì)與其他邊距合并。參考點(diǎn)是相對(duì)于最近的未定位的祖先元素级解，例如：如果父元素被定位了冒黑，其參考點(diǎn)就是父容器的內(nèi)邊界（lef/topt等四個(gè)屬性值為0，這樣更加精確一些蠕趁，如果不設(shè)薛闪，就是內(nèi)邊框內(nèi)）；如果父元素沒有被定位俺陋，就參考父容器的父容器豁延，直到找到被定為的祖先級(jí)元素，如果都沒有就是以html的內(nèi)邊界（left/top等四個(gè)個(gè)屬性值為0腊状，這樣更加精確一些）诱咏，也就是根節(jié)點(diǎn)為參考點(diǎn)。
fixed：不為元素預(yù)留空間缴挖，而是通過指定元素相對(duì)于屏幕視口（viewport）的位置來指定元素位置袋狞。元素的位置在屏幕滾動(dòng)時(shí)不會(huì)改變。打印時(shí)，元素會(huì)出現(xiàn)在的每頁的固定位置苟鸯。fixed 屬性會(huì)創(chuàng)建新的棧上下文同蜻。當(dāng)元素祖先的 transform 屬性非 none 時(shí)，容器由視口改為該祖先早处。參考點(diǎn)是屏幕視口湾蔓。
4、粘性定位元素（stickily positioned element）是計(jì)算后位置屬性為 sticky的元素砌梆。
sticky ：元素先按照普通文檔流定位默责，然后相對(duì)于該元素在流中的 flow root（BFC）和 containing block（最近的塊級(jí)祖先元素）定位。在所有情況下（即便被定位元素為 table 時(shí)）咸包，該元素定位均不對(duì)后續(xù)元素造成影響桃序。當(dāng)元素 B 被粘性定位時(shí)，后續(xù)元素的位置仍按照 B 未定位時(shí)的位置來確定烂瘫。position: sticky 對(duì) table 元素的效果與 position: relative 相同媒熊。由于兼容性很差，效果又可以在js中容易實(shí)現(xiàn)忱反，所以一般不采用此種定位泛释。
注意：
對(duì)于相對(duì)定位元素，top和 bottom 屬性指定它相對(duì)于正常位置的垂直偏移温算、left 和 right屬性指定水平偏移。
對(duì)于絕對(duì)定位元素间影，top注竿、right、bottom 和 left 屬性指定元素相對(duì)于其包含塊的偏移魂贬，即此時(shí)位置為與包含塊的相對(duì)位置巩割。元素的邊距（margin）定位在這些偏移之中。
在大多數(shù)時(shí)候付燥，絕對(duì)定位元素的 height 和 width屬性的值為 auto宣谈，它們會(huì)自動(dòng)計(jì)算以適合元素的內(nèi)容。但是非替換（non-replaced）絕對(duì)定位元素可以占據(jù) top和 bottom 的值（除 auto 外）所共同指定的可用空間键科，而不必設(shè)置 height（也就是設(shè)其為 auto）闻丑。left、right 與 width也類似勋颖。
絕對(duì)定位元素的定位值發(fā)生沖突時(shí)的解決方法:
1嗦嗡、如果同時(shí)指定 top和 bottom（非 auto），優(yōu)先采用 top饭玲。
2侥祭、如果同時(shí)指定 left和 right，若 direction為 ltr（英語、漢語等）矮冬，則
3谈宛、先采用 left；若 direction 為 rtl（阿拉伯語胎署、希伯來語等）入挣，則優(yōu)先采用 right。
四硝拧、z-index 有什么作用? 如何使用?
因?yàn)榻^對(duì)定位與文檔流無關(guān)径筏，所以絕對(duì)定位的元素可以覆蓋頁面上的其他元素。z-index 屬性設(shè)置元素的堆疊順序障陶。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面滋恬。該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸抱究。如果為正數(shù)恢氯，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)鼓寺。
屬性值auto：
元素不會(huì)建立一個(gè)新的本地堆疊上下文勋拟。當(dāng)前堆疊上下文中新生成的元素和父元素堆疊層級(jí)相同。
屬性值<integer>：
整型數(shù)字是生成的元素在當(dāng)前堆疊上下文中的堆疊層級(jí)妈候。元素同時(shí)會(huì)創(chuàng)建一個(gè)堆疊層級(jí)為0的本地堆疊上下文敢靡。這意味著子元素的 z-indexes 不與元素外的其余元素的 z-indexes 進(jìn)行對(duì)比。
五苦银、position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別啸胧？
position:relative是指定元素相對(duì)未定位時(shí)的位置，在使用相對(duì)定位時(shí)幔虏，無論元素是否移動(dòng)纺念，元素在文檔流中占據(jù)原來空間，只是表現(xiàn)出來的位置會(huì)改變想括，而對(duì)后面元素的空間沒有影響陷谱。
margin偏移，會(huì)指定元素移動(dòng)瑟蜈，但是由于元素是普通流烟逊，是會(huì)占用移動(dòng)后的和移動(dòng)前的空間，而且也會(huì)對(duì)后面的元素的位置造成影響踪栋。
六焙格、BFC 是什么？如何生成 BFC夷都？BFC 有什么作用眷唉？舉例說明
BFC：塊格式化上下文（block formatting context） 予颤，是Web頁面的可視CSS渲染的一部分。它是塊盒子的布局發(fā)生及浮動(dòng)體彼此交互的區(qū)域冬阳。對(duì)于定位 (參見 float
) 與清除浮動(dòng) (參見 clear
) 很重要蛤虐。定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。浮動(dòng)不會(huì)影響其它塊格式化上下文中元素的布局肝陪，并且清除浮動(dòng)只能清除同一塊格式化上下文中在它前面的元素的浮動(dòng)驳庭。（參考MDN）。
通俗的講氯窍，兩個(gè)相鄰元素或者嵌套元素饲常，對(duì)其使用BFC，就會(huì)發(fā)生一些相互影響狼讨，通過通過使用不同的BFC屬性贝淤，可以達(dá)到不同的影響目的。
塊格式化上下文由以下之一創(chuàng)建：
根元素或其它包含它的元素
浮動(dòng) (元素的 float不是 none）
絕對(duì)定位的元素 (元素具有 position
為 absolute或 fixed)
內(nèi)聯(lián)塊 inline-blocks (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell政供，HTML表格單元格默認(rèn)屬性)
表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
塊元素 元素具有overflow 值不是 visible
彈性盒子 flex boxes (元素具有display: flex或 inline-flex)display: flow-root
BFC作用：
1播聪、BFC會(huì)阻止垂直外邊距（margin-top、margin-bottom）折疊布隔。
例如：解決嵌套元素margin合并問題离陶，只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會(huì)和父元素的margin發(fā)生重疊衅檀。
示列1：
<div class="ct"> <h1 style=" border: 1px solid; background: blue; margin: 50px; display: inline-block;">h1</h1> <h2 style="border: 1px solid; background: red; margin: 50px;">h2</h2> </div>
2招刨、BFC不會(huì)重疊浮動(dòng)元素。
示列2：
<div class="ct"> <h1 style=" border: 1px solid; background: blue; margin: 50px; display: inline-block;">h1</h1> <h2 style="border: 1px solid; background: red; margin: 50px; float: left;">h2</h2> </div>
3术吝、BFC可以“清浮動(dòng)”计济，這里其實(shí)說清浮動(dòng)已經(jīng)不再合適，應(yīng)該說包含浮動(dòng)排苍。也就是說只要父容器形成BFC就可以，簡(jiǎn)單看看如何形成BFC学密。
示列3：
<div class="ct" style=" border: 1px solid; overflow: hidden;"> <h1 style=" border:2px solid; float: right;">1</h1> </div>
參考BFC
七淘衙、在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并腻暮？如何不讓相鄰元素外邊距合并彤守？給個(gè)父子外邊距合并的范例
外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)哭靖，它們將形成一個(gè)外邊距具垫。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。這種行為也稱為外邊距塌陷(margin collapsing)试幽。
阻止外邊距合并可以有多種方式筝蚕，例如使用定位position屬性；
示列1：
.ct{ margin: 20px; border: 2px solid; padding:10px; background: green; } .p2{ position: relative; margin：10px; background: yellow; /* left:20px; */ }
當(dāng)把 left:20px加上，就會(huì)阻止外邊距合并起宽。
示列2：使用浮動(dòng)
.ct{ border: 2px solid; background: green; padding: 10px; display: inline-block; } .p2{ background:red; /* float: left; */ margin-left:10px; }
同樣洲胖，把float:left加上也會(huì)阻止合并。
源代碼是
<div class="ct"> <div class="p2">121</div> </div>
八坯沪、代碼
1绿映、實(shí)現(xiàn)如下alert效果，效果范例
利用絕對(duì)定位實(shí)現(xiàn)居中效果效果1腐晾，也可以用margin:0 auto;實(shí)現(xiàn)居中效果叉弦。
2、實(shí)現(xiàn)如下表單效果藻糖， 效果范例
效果2多審查元素淹冰，查找錯(cuò)誤的地方。
3颖御、實(shí)現(xiàn)如下模態(tài)框效果榄棵， 效果范例
效果3實(shí)現(xiàn)模態(tài)框，首先在html上定義兩個(gè)div元素潘拱，其中外層div表示模態(tài)框外面的覆蓋層, 內(nèi)層的div表示模態(tài)框疹鳄。對(duì)兩個(gè)div設(shè)置絕對(duì)定位，使模態(tài)框居中芦岂。
4瘪弓、實(shí)現(xiàn)如下導(dǎo)航欄效果，效果范例
效果4禽最，本體難點(diǎn)是使“更多”子元素通過鼠標(biāo)動(dòng)作顯示腺怯。先在子元素選擇其中指定不顯示，再在偽類選擇器中指定為塊級(jí)元素顯示川无。
