1. 浮動元素有什么特征谆焊？對父容器蹲坷、其他浮動元素航揉、普通元素塞祈、文字分別有什么影響？
浮動元素有3個特征：
- 浮動元素會脫離正常的文檔流帅涂，按照其外邊距指定的位置相對于它的上一個塊級元素（或父元素）顯示议薪；
- 浮動元素后面的塊級元素的內(nèi)容會向此浮動元素的外邊距靠齊尤蛮，但是邊框和背景卻忽略浮動元素而向上一個（實例中為父元素）任意非浮動元素靠齊；
- 浮動元素后面的內(nèi)聯(lián)元素會向此浮動元素的外邊距靠齊斯议。
影響：
- 對父元素：浮動后會無法撐開父元素产捞，父元素會發(fā)生塌陷，變成一條線哼御；
- 對其他浮動元素：
同一方向浮動：浮動的元素會在一個水平上 坯临，彼此緊貼，當(dāng)寬度不夠后面的浮動元素會被擠到下一行,如果浮動元素的高度不同,那么向下移動的時候可能被卡琢抵纭看靠；
不同方向浮動：一左一右處于一個水平線； - 對普通元素
浮動元素會改變它后面普通元素在文檔流中的位置液肌，在浮動元素后的普通元素會圍繞浮動元素挟炬，在浮動元素之前的元素不受影響； - 對文字：會環(huán)繞在浮動元素的外圍
2.清除浮動指什么? 如何清除浮動? 兩種以上方法
-
清除浮動指清除掉元素的float屬性嗦哆，消除浮動元素對其他元素的影響（如父元素高度坍塌）
1.父元素添加overflow屬性清除浮動
優(yōu)點：簡單辟宗、代碼少、瀏覽器支持好
缺點：不能和position配合使用吝秕，因為超出的尺寸的會被隱藏泊脐。
父級元素增加overflow：hiddden
2.父元素添加一個偽類元素清除浮動
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似烁峭，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題 優(yōu)點：瀏覽器支持好容客、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅约郁，網(wǎng)易缩挑，新浪等等） 缺點：代碼多、不少初學(xué)者不理解原理鬓梅，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持供置。
3.用clear屬性
優(yōu)點：簡單、代碼少绽快、容易掌握
缺點：只適合高度固定的布局芥丧，要給出精確的高度，如果高度和父級div不一樣時坊罢，會產(chǎn)生問題
3.有幾種定位方式续担，分別是如何實現(xiàn)定位的，參考點是什么活孩，使用場景是什么物遇？
答：有4種定位方式。
1.static **
position: static
靜態(tài)定位，所有的標(biāo)準(zhǔn)流中的元素都是靜態(tài)定位询兴。
2.relative
position： relative
相對定位
需使用top乃沙，left，right诗舰，bottom屬性警儒，盒子相對自身發(fā)生偏移。但是在文檔流中始衅，它仍然占據(jù)著原來的位置冷蚂，所以其他元素的位置不會發(fā)生變化。
使用場景：一般作為絕對定位的元素參考點**
3.absolute
position: absolute
絕對定位
- 無父級元素或父級元素未設(shè)置定位相當(dāng)于body定位
- 相對于 static 定位以外的第一個父元素進行定位（也可以說是根據(jù)最近的定位上下文來定位）汛闸。元素會具有收縮性蝙茶，如果沒有設(shè)置寬度，元素會根據(jù)內(nèi)容自動調(diào)整寬度诸老。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定隆夯。絕對定位使元素脫離文檔流，因此不占據(jù)空間别伏。頁面中經(jīng)常是絕對定位和相對定位一起使用子元素使用絕對定位蹄衷，父元素使用相對定位（即子絕父相）
4.fixed
position：fixed
固定定位
相對于瀏覽器邊框；
fixed其實特性跟absolute都一樣厘肮，唯一的區(qū)別在于定位不一樣愧口，fixed永遠(yuǎn)是根據(jù)瀏覽器窗口來定位，無論其他元素怎么設(shè)置类茂，都影響不了它耍属。
使用場景：一般用于頁面中的廣告，固定頂欄巩检，回到頂部按鈕等
4.z-index 有什么作用? 如何使用?
z-index是針對網(wǎng)頁顯示中的一個特殊屬性厚骗。因為顯示器是顯示的圖案是一個二維平面，擁有x軸和y軸來表示位置屬性兢哭。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區(qū)別领舰。表示一個元素在疊加順序上的上下立體關(guān)系。
z-index值較大的元素將疊加在z-index值較小的元素之上迟螺。對于未指定此屬性的定位對象冲秽，z-index 值為正數(shù)的對象會在其之上，而 z-index 值為負(fù)數(shù)的對象在其之下煮仇。
5. position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position: relative是相對定位劳跃，margin是外間距。
1.position:relative偏移的距離的參照物是元素本身的位置浙垫，負(fù)margin偏移的距離的參照物是該元素到其他元素的距離。
2.position:relative使元素位置發(fā)生偏移不會影響其他元素在文檔流中的位置，負(fù)margin元素位置發(fā)生偏移會影響其他元素在文檔流中的位置夹姥，后面的元素會補上位置杉武。
6. 如何讓一個固定寬高的元素在頁面上垂直水平居中?
設(shè)置position: absolute然后top，left值為50%辙售，最后設(shè)置margin-top轻抱，margin-right負(fù)數(shù)值,其絕對值為寬高的一半但該方法的缺點是必須要知道要居中元素的高度和寬度
7.BFC 是什么？如何生成 BFC旦部？BFC 有什么作用祈搜？舉例說明
- BFC(Block Formatting Context)塊級格式化上下文，它是一個獨立的渲染區(qū)域士八， 它規(guī)定了內(nèi)部的元素如何布局容燕，不受這個區(qū)域外的元素影響。
- 生成BFC的條件：
1.根元素
2.有float屬性且float值不為none
3.position為absolute或fixed
4.display為inline-block, table-cell, table-caption, flex, inline-flex中的任意一個婚度。
5.有overflow屬性且overflow屬性不為visible
只要元素有以上屬性中的任意一條蘸秘，那么該元素內(nèi)部的空間就形成了BFC
BFC 的作用 - 清除浮動
-
兩欄布局
兩欄布局.png - 阻止上下相鄰塊級元素的外邊距合并
8. 在什么場景下會出現(xiàn)外邊距合并？如何合并蝗茁？如何不讓相鄰元素外邊距合并醋虏？給個父子外邊距合并的范例？
出現(xiàn)外邊距合并的場景：
外邊距合并的根本原因是兩個不同的margin直接接觸
在什么場景下會出現(xiàn)外邊距合并哮翘？
兄弟元素：第一個元素的下margin和第二個元素的上margin發(fā)生合并
父子元素：元素的上margin和父容器的上margin發(fā)生合并颈嚼，元素下margin和父容器的下margin發(fā)生合并
單個元素：元素本身為空元素，那么元素的上margin和下margin發(fā)生合并
外邊距如何合并饭寺？所涉及的兩個margin值若不等：外邊距值總是取這兩個外margin值最大的一個顯示效果
所涉及的兩個margin值若相等：外邊距值就取這個相等的值顯示效果
如何不讓相鄰元素外邊距合并阻课？生成BFC——給元素規(guī)定浮動或者是絕對定位等
解決父子外邊距合并border:1px solid transparent;(父元素設(shè)置邊框)
padding;(父元素設(shè)置內(nèi)邊距)
float:left/right
position:absolute
display:inline-block
-
overflow:hidden/auto
父子外邊距重合.png
(http://upload-images.jianshu.io/upload_images/3889793-4009e57c1e07d91e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
