1.浮動元素有什么特征扼鞋？對父容器申鱼、其他浮動元素、普通元素云头、文字分別有什么影響?
- 浮動模型也是一種可視化格式模型捐友，浮動的框可以左右移動（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣溃槐。浮動元素不在文檔的普通流中匣砖，文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣.
- 對于父元素，若其子元素都是浮動元素昏滴，則其失去高度猴鲫，視覺上在子元素外面，不包含谣殊。
1.png
- 對于其它浮動元素的影響,如果包含塊太窄無法容納水平排列的全部浮動元素拂共，那么其它浮動元素會向下移動，直到有足夠的空間姻几，而如果浮動元素的高度不同宜狐，那么向下移動的時候可能會被卡住。
2.png
- 普通元素會視浮動元素不見蛇捌，占據(jù)浮動元素原有的位置抚恒，但會被浮動元素遮罩。
3.png
- 文字會感知到浮動元素的存在络拌，會留出空間俭驮，形成環(huán)繞效果。
4.png
2.清除浮動指什么? 如何清除浮動? 兩種以上方法
- 清除浮動指解決浮動父容器高度塌陷問題
- 在父元素的子元素最后添加一個空div春贸，并對其設(shè)置樣式：clear:both;
5.png
- 利用BFC來清除浮動混萝。
因為BFC可以包含浮動，因此可以讓父元素生成一個新的BFC從而包圍浮動的子元素,可以對父元素設(shè)定以下樣式之一生成新BFC祥诽。
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
6.png
- 通用方法
.clearfix:after{
content:"";
display:block;
clear:both;
}
3.有幾種定位方式譬圣，分別是如何實現(xiàn)定位的，參考點是什么雄坪，使用場景是什么厘熟？
- inherit 規(guī)定從父元素繼承 position 屬性的值
- static 默認(rèn)值,沒有定位屯蹦，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
-
relative 相對定位，元素的位置通過 left, top, right 以及 bottom 屬性進行規(guī)定 相對于元素本身正常位置進行定位 一般作為絕對定位的元素參考點
8.png - absolute 絕對定位绳姨，元素的位置通過 left, top, right 以及 bottom 屬性進行規(guī)定 相對于static定位以外的第一個祖先元素（offset parent）進行定位如果元素沒有已定位的祖先元素登澜，那么他的位置就相對于初始包含塊html來定位demo。適用于元素的水平垂直居中
9.png
- fixed 絕對定位飘庄，元素的位置通過 left, top, right 以及 bottom 屬性進行規(guī)定 相對于瀏覽器窗口進行定位脑蠕，不隨滾動條的滾動而移動 ；適用于飄窗跪削、固定導(dǎo)航等
10.png
- sticky CSS3新屬性谴仙，表現(xiàn)類似position:relative和position:fixed的合體，在目標(biāo)區(qū)域在屏幕中可見時碾盐，它的行為就像position:relative; 而當(dāng)頁面滾動超出目標(biāo)區(qū)域時晃跺，它的表現(xiàn)就像position:fixed，它會固定在目標(biāo)位置
4.z-index 有什么作用? 如何使用?
因為絕對定位的元素脫離了普通流毫玖，所以絕對定位的元素可以覆蓋頁面上的其它元素掀虎。這時可以通過給元素設(shè)置z-index屬性來控制疊放順序,默認(rèn)值為auto,則不建立層疊上下文。設(shè)置為0則會建立層疊上下文
11.png
image.png
image.png
5.position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative付枫，元素顯示位置發(fā)生變化烹玉，但是元素在文檔流中的位置不變，不影響后面元素在文檔流中的布局阐滩。
- 負margin二打，元素的顯示位置和在文檔流中的位置均發(fā)生變化，會影響后面元素在文檔流中的位置
6.BFC 是什么叶眉？如何生成 BFC址儒？BFC 有什么作用？舉例說明
- BFC是塊級格式上下文
- 對元素設(shè)置以下屬性
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed; - 解決margin重疊問題衅疙。所謂margin重疊是指處于同一個BFC的相鄰元素、嵌套元素鸳慈，只要它們之間沒有阻擋（如：邊框饱溢、非空內(nèi)容、padding等）就會發(fā)生margin重疊走芋。這是只要讓其中一個元素生成新的BFC就能解決margin重疊問題绩郎。
12.png
13.png
清除浮動。因為BFC可以包含浮動翁逞，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動的子元素肋杖，因而清除了浮動
image.png
7.在什么場景下會出現(xiàn)外邊距合并？如何合并挖函？如何不讓相鄰元素外邊距合并状植？給個父子外邊距合并的范例
- 兩個兄弟元素在垂直方向上合并外邊距，取較大值進行合并
14.png
- 父子元素間沒有阻擋（如：邊框、非空內(nèi)容津畸、padding等）時發(fā)生上和/或下外邊距合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: gray;
margin: 20px;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
margin:40px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
</body>
</html>
效果圖
image.png
- 當(dāng) margin 都是負值的時候振定，取的是其中絕對值較大的，然后肉拓，從0位置后频，負向位移，當(dāng)有正有負的時候暖途，先取出負 margin 中絕對值中最大的卑惜，然后，和正 margin 值中最大的 margin 相加驻售。
- 如果存在一個空的塊級元素残揉，其 border、padding芋浮、inline content抱环、height、min-height都不存在纸巷。那么此時它的上下邊距中間將沒有任何阻隔镇草，此時它的上下外邊距將會合并.
- 對于相鄰元素，讓他們不在同一個BFC瘤旨，外邊距就不會合并梯啤。
代碼練習(xí)
- 實現(xiàn)如下alert效果，效果范例
代碼如下：http://js.jirengu.com/fijam/5/edit - 實現(xiàn)如下表單效果存哲， 效果范例
代碼如下：http://js.jirengu.com/xaga/2/edit - 實現(xiàn)如下模態(tài)框效果因宇， 效果范例
代碼如下：http://js.jirengu.com/deni/1/edit?html,css - 實現(xiàn)如下導(dǎo)航欄效果，效果范例
代碼如下：http://js.jirengu.com/xaba/1/edit?html,css,output
