1.浮動元素有什么特征或舞？對父容器荆姆、其他浮動元素、普通元素嚷那、文字分別有什么影響?
浮動元素特征：
- 浮動元素會脫離正常的文檔流胞枕，按照其外邊距指定的位置相對于它的上一個塊級元素（或父元素）顯示
- 浮動元素后面的塊級元素的內(nèi)容會向此浮動元素的外邊距靠齊，但是邊框和背景卻忽略浮動元素而向上一個任意非浮動元素靠齊
- 浮動元素后面的內(nèi)聯(lián)元素會向此浮動元素的外邊距靠齊
浮動元素造成的影響：
- 對其父元素的影響
對于其父元素來說魏宽，元素浮動之后，它脫離當前正常的文檔流决乎，所以它也無法撐開其父元素队询，造成父元素的塌陷 - 對其兄弟元素（非浮動）的影響
如果兄弟元素為塊級元素，該元素會忽視浮動元素的而占據(jù)它的位置构诚，并且元素會處在浮動元素的下層（并且無法通過z-index屬性改變他們的層疊位置）蚌斩，但它的內(nèi)部文字和其他行內(nèi)元素都會環(huán)繞浮動元素。如果如果兄弟元素為內(nèi)聯(lián)元素范嘱，則元素會環(huán)繞浮動元素排列送膳。 - 對其兄弟元素（浮動）的影響
同一個方向的浮動元素：當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時，它會緊跟在它們后面
反方向的浮動元素：互不影響丑蛤，位于同一條水平線上叠聋，當空間不夠時會被擠下 - 對子元素的影響
當一個元素浮動時，在沒有清除浮動的情況下受裹，它無法撐開其父元素碌补，但它可以讓自己的浮動子元素撐開它自身虏束，并且在沒有定義具體寬度情況下，使自身的寬度從100%變?yōu)樽赃m應(yīng)（浮動元素display:block）厦章。其高度和寬度均為浮動元素高度和非浮動元素高度之間的最大值镇匀。
2.清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動是指清除掉元素float屬性
清除浮動的方法:
1.添加新的元素 、應(yīng)用 clear：both袜啃；
HTML：
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
CSS：
.clear{
clear:both;
height: 0;
line-height: 0;
font-size: 0
}
2.使浮動元素的父容器變成BFC,父級div定義 overflow: auto等
HTML：
<div class="outer over-flow"> //這里添加了一個class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<!--<div class="clear"></div>-->
</div>
CSS：
.over-flow{
overflow: auto;
zoom: 1; //zoom: 1; 是在處理ie6兼容性問題
}
3.div:after 方法：（注意：作用于浮動元素的父親）
.outer{
content:"";
display:block;
clear:both;
}
3.有幾種定位方式汗侵，分別是如何實現(xiàn)定位的，參考點是什么群发，使用場景是什么晰韵？
- inherit
規(guī)定應(yīng)該從父元素繼承 position 屬性的值 - static
默認值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
當你沒有為一個元素(例如div)指定定位方式時也物，默認為static宫屠，也就是按照文檔的流式(flow)定位，將元素放到一個合適的地方滑蚯。所以在不同的分辨率下浪蹂，采用流式定位能很好的自適合，取得相對較好的布局效果告材。left,top屬性對static沒有效果坤次，static是靠margin這些定位的。 - relative
生成相對定位的元素斥赋，相對于元素本身正常位置進行定位,因此缰猴，left:20px 會向元素的 left 位置添加20px
相對定位的元素仍然在文檔流中，仍然占據(jù)著他本來占據(jù)的位置空間——雖然他現(xiàn)在已經(jīng)不在本來的位置了疤剑。 - absolute
生成絕對定位的元素滑绒，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top, right 以及 bottom 屬性進行規(guī)定
如果你想在一個文檔(Document)中將一個元素放至指定位置，你可以使用absolute來定位隘膘，將該元素的position設(shè)置為absolute疑故，同時使用top,bottom,left,right來定位。
如果沒有父元素弯菊，位置是相對于body來進行的纵势。
絕對定位會使元素從文檔流中被刪除，結(jié)果就是該元素原本占據(jù)的空間被其它元素所填充管钳。 - fixed
生成絕對定位的元素钦铁，相對于瀏覽器窗口進行定位。元素的位置通過 left, top, right 以及 bottom 屬性進行規(guī)定
fixed定位的參照物總是當前的文檔才漆。利用fixed定位牛曹，我們很容易讓一個div定位在瀏覽器文檔的左上，右上等方位栽烂。 - sticky
CSS3新屬性躏仇，表現(xiàn)類似position:relative和position:fixed的合體恋脚，在目標區(qū)域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區(qū)域時焰手，它的表現(xiàn)就像position:fixed糟描，它會固定在目標位置
兼容性較差，一般用JS實現(xiàn)
4.z-index 有什么作用? 如何使用?
z-index 屬性設(shè)置元素的堆疊順序书妻。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面船响。
z-index只對定義元素有效
z-index的屬性值:
- auto 默認值
- number 類型,number越大,層級越高
- inherit 繼承父元素的z-index
5.position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative和負margin都可以使元素位置發(fā)生偏移
- position:relative 相對于元素本身正常位置進行偏移，普通文檔流中的位置仍然保留躲履，即原來位置會留有空白见间，
不影響周圍其他元素的布局。 - 負margin產(chǎn)生的偏移會影響周圍其他普通流中的元素的布局
6.BFC 是什么工猜？如何生成 BFC米诉？BFC 有什么作用？舉例說明
BFC是什么
BFC是block formatting context 塊級格式化上下文的縮寫篷帅，是Web頁面中盒模型布局的CSS渲染模式史侣。它的定位體系屬于常規(guī)文檔流。BFC是頁面上的一個隔離的獨立容器魏身， 容器里面的子元素不會影響到外面的元素惊橱，反之也是如此。
如何生成BFC
給元素添加任何一個可以觸發(fā)BFC的css樣式箭昵，例如：overflow:hidden,overflow:scroll,display:table-cell,display:inline-block,float:left税朴，float:right等
BFC有什么作用
- 解決margin重疊:同一BFC下,相鄰元素外邊距會出現(xiàn)重疊,此時改變其中一個元素的BFC就可以解決該問題(多用于嵌套關(guān)系)
- 清浮動:overflow:hidden/auto/scroll或display:inline-block，table-cell或float:left,right添加浮動等方式讓父級形成新的BFC
7.在什么場景下會出現(xiàn)外邊距合并家制？如何合并正林？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
合并場景
- 當一個元素出現(xiàn)在另一個元素上面時颤殴，第一個元素的底外邊距與第二個元素的頂外邊距會合并
- 當一個元素包含在另一個元素中時(假設(shè)沒有內(nèi)邊距或邊框?qū)⑼膺吘喾指糸_)卓囚，它們的頂和/或底外邊距會合并
- 當一個空元素有外邊距，但沒有邊框或內(nèi)邊距時诅病，它的頂外邊距和底外邊距會發(fā)生合并，如果空元素與另一個非空元素相鄰粥烁，它們的外邊距仍然會發(fā)生合并贤笆。
注意：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并，行內(nèi)框讨阻，浮動框或者絕對定位框之間的外邊距不會發(fā)生合并芥永。
如何合并
- 兩個margin都是正值的時候，取兩者的最大值钝吮；
- 當 margin 都是負值的時候埋涧，取的是其中絕對值較大的板辽，然后，從0位置棘催，負向位移劲弦；
- 當有正有負的時候，先取出負 margin 中絕對值中最大的醇坝，然后邑跪，和正 margin 值中最大的 margin 相加。
- 所有毗鄰的margin要一起參與運算呼猪，不能分步進行画畅。
禁止合并
- 被非空內(nèi)容、padding宋距、border 或 clear 分隔開轴踱。
- 不在一個普通流中或一個BFC中。
- margin在垂直方向上不相鄰谚赎。
范例
<style>
*{margin:0;padding:0;}
.parent{width:200px;height:200px;margin:10px 0;background:yellow;}
.child{width:50px;heightz:50px;margin:20px 0;background:blue;}
</style>
</head>
<body>
<divclass="parent">
<div class="child"></div>
</div>
</body>
