1.浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?
- 浮動(dòng)模型也是一種可視化格式模型，浮動(dòng)的框可以左右移動(dòng)（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣。浮動(dòng)元素不在文檔的普通流中，文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣.
- 對(duì)于父元素，若其子元素都是浮動(dòng)元素，則其失去高度，視覺上在子元素外面，不包含。
1.png
- 對(duì)于其它浮動(dòng)元素的影響,如果包含塊太窄無法容納水平排列的全部浮動(dòng)元素，那么其它浮動(dòng)元素會(huì)向下移動(dòng)，直到有足夠的空間，而如果浮動(dòng)元素的高度不同，那么向下移動(dòng)的時(shí)候可能會(huì)被卡住。
2.png
- 普通元素會(huì)視浮動(dòng)元素不見，占據(jù)浮動(dòng)元素原有的位置，但會(huì)被浮動(dòng)元素遮罩。
3.png
- 文字會(huì)感知到浮動(dòng)元素的存在，會(huì)留出空間，形成環(huán)繞效果。
4.png
2.清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
- 清除浮動(dòng)指解決浮動(dòng)父容器高度塌陷問題
- 在父元素的子元素最后添加一個(gè)空div，并對(duì)其設(shè)置樣式：clear:both;
5.png
- 利用BFC來清除浮動(dòng)。
因?yàn)锽FC可以包含浮動(dòng)，因此可以讓父元素生成一個(gè)新的BFC從而包圍浮動(dòng)的子元素,可以對(duì)父元素設(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.有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場(chǎng)景是什么？
- inherit 規(guī)定從父元素繼承 position 屬性的值
- static 默認(rèn)值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
-
relative 相對(duì)定位，元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定 相對(duì)于元素本身正常位置進(jìn)行定位 一般作為絕對(duì)定位的元素參考點(diǎn)
8.png - absolute 絕對(duì)定位，元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定 相對(duì)于static定位以外的第一個(gè)祖先元素（offset parent）進(jìn)行定位如果元素沒有已定位的祖先元素，那么他的位置就相對(duì)于初始包含塊html來定位demo。適用于元素的水平垂直居中
9.png
- fixed 絕對(duì)定位，元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定 相對(duì)于瀏覽器窗口進(jìn)行定位，不隨滾動(dòng)條的滾動(dòng)而移動(dòng) ；適用于飄窗、固定導(dǎo)航等
10.png
- sticky CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體，在目標(biāo)區(qū)域在屏幕中可見時(shí)，它的行為就像position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像position:fixed，它會(huì)固定在目標(biāo)位置
4.z-index 有什么作用? 如何使用?
因?yàn)榻^對(duì)定位的元素脫離了普通流，所以絕對(duì)定位的元素可以覆蓋頁面上的其它元素。這時(shí)可以通過給元素設(shè)置z-index屬性來控制疊放順序,默認(rèn)值為auto,則不建立層疊上下文。設(shè)置為0則會(huì)建立層疊上下文
11.png
image.png
image.png
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative，元素顯示位置發(fā)生變化，但是元素在文檔流中的位置不變，不影響后面元素在文檔流中的布局。
- 負(fù)margin，元素的顯示位置和在文檔流中的位置均發(fā)生變化，會(huì)影響后面元素在文檔流中的位置
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
- BFC是塊級(jí)格式上下文
- 對(duì)元素設(shè)置以下屬性
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed; - 解決margin重疊問題。所謂margin重疊是指處于同一個(gè)BFC的相鄰元素、嵌套元素，只要它們之間沒有阻擋（如：邊框、非空內(nèi)容、padding等）就會(huì)發(fā)生margin重疊。這是只要讓其中一個(gè)元素生成新的BFC就能解決margin重疊問題。
12.png
13.png
清除浮動(dòng)。因?yàn)锽FC可以包含浮動(dòng)，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動(dòng)的子元素，因而清除了浮動(dòng)
image.png
7.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
- 兩個(gè)兄弟元素在垂直方向上合并外邊距，取較大值進(jìn)行合并
14.png
- 父子元素間沒有阻擋（如：邊框、非空內(nèi)容、padding等）時(shí)發(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 都是負(fù)值的時(shí)候，取的是其中絕對(duì)值較大的，然后，從0位置，負(fù)向位移，當(dāng)有正有負(fù)的時(shí)候，先取出負(fù) margin 中絕對(duì)值中最大的，然后，和正 margin 值中最大的 margin 相加。
- 如果存在一個(gè)空的塊級(jí)元素，其 border、padding、inline content、height、min-height都不存在。那么此時(shí)它的上下邊距中間將沒有任何阻隔，此時(shí)它的上下外邊距將會(huì)合并.
- 對(duì)于相鄰元素，讓他們不在同一個(gè)BFC，外邊距就不會(huì)合并。
代碼練習(xí)
- 實(shí)現(xiàn)如下alert效果，效果范例
代碼如下：http://js.jirengu.com/fijam/5/edit - 實(shí)現(xiàn)如下表單效果， 效果范例
代碼如下：http://js.jirengu.com/xaga/2/edit - 實(shí)現(xiàn)如下模態(tài)框效果， 效果范例
代碼如下：http://js.jirengu.com/deni/1/edit?html,css - 實(shí)現(xiàn)如下導(dǎo)航欄效果，效果范例
代碼如下：http://js.jirengu.com/xaba/1/edit?html,css,output
