關(guān)鍵字:
1 浮動(dòng)元素相關(guān)
2 清除浮動(dòng)
3 定位方式
4 z-index
5 position:relative
6 BFC是什么,作用,生成
7 外邊距合并的幾個(gè)實(shí)例
8 代碼練習(xí)4個(gè)實(shí)例
1 浮動(dòng)元素有什么特征劈狐？對(duì)父容器罐孝、其他浮動(dòng)元素、普通元素肥缔、文字分別有什么影響?
- 什么是浮動(dòng)元素?
通過設(shè)置浮動(dòng)元素是 float 屬性值不是 none 的元素,比如flaot:left的元素
浮動(dòng)特征:一個(gè)正常元素脫離普通文檔流.然后被安放到它所在容器的的左端或者右端莲兢，并且其他的文本和行內(nèi)元素環(huán)繞它,浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>
對(duì)父容器的影響:浮動(dòng)屬性的子元素造成父容器高度塌陷,像脫離一樣
- 造成影響的原因: 在CSS規(guī)范中续膳，浮動(dòng)定位不屬于正常的頁面流（page flow）改艇，是獨(dú)立定位的。所以坟岔，只含有浮動(dòng)元素的父容器谒兄，在顯示時(shí)不考慮子元素的位置，就當(dāng)它們不存在一樣社付。這就造成了顯示出來舵变，父容器好像空容器一樣酣溃。
- 對(duì)浮動(dòng)元素影響: 其中一個(gè)浮動(dòng)的外邊緣靠到包含框或另一個(gè)浮動(dòng)框的邊框,向左或向右緊挨.
- 對(duì)普通元素影響: 普通元素會(huì)當(dāng)浮動(dòng)元素不存在,不影響普通元素原來的位置.
- 對(duì)文本影響: 文字會(huì)感知浮動(dòng)元素的存在,當(dāng)有文字的普通文檔流元素與浮動(dòng)元素重疊時(shí),其文字會(huì)圍繞在浮動(dòng)元素旁,原因在上面.
2 清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
- clear 屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。
比如clear :left 屬性定義了元素的左邊上不允許出現(xiàn)浮動(dòng)元素纪隙。在 CSS1 和 CSS2 中赊豌，本質(zhì)上清楚浮動(dòng)這是通過自動(dòng)為清除元素（即設(shè)置了 clear 屬性的元素）增加上外邊距實(shí)現(xiàn)的 。在CSS2.1 中绵咱，會(huì)在元素上外邊距之上增加清除空間碘饼，而外邊距本身并不改變。
清除浮動(dòng)元素方法?
首先我們?yōu)槭裁匆宄?dòng)元素?
浮動(dòng)可能造成: 布局時(shí)出現(xiàn)重疊;被浮動(dòng)元素遮擋內(nèi)容;有時(shí)父容器高度會(huì)塌陷;父容器沒有包裹到浮動(dòng)的子元素;有時(shí)文字會(huì)圍繞浮動(dòng)元素;被浮動(dòng)影響而被隔開.怎么清除浮動(dòng)元素的影響?
方法1:在html里增加空div,并設(shè)置css樣式為clear:both;
為什么會(huì)生效?
原理是父容器現(xiàn)在必須考慮非浮動(dòng)子元素的位置悲伶，而后者肯定出現(xiàn)在浮動(dòng)元素下方艾恼，所以顯示出來，父容器就把所有子元素都包括進(jìn)去了麸锉。
這種方法比較簡(jiǎn)單钠绍，
缺點(diǎn):要在頁面中增加冗余標(biāo)簽，違背了語義網(wǎng)的原則方法2:使父容器浮動(dòng)
另一種思路是花沉，索性將父容器也改成浮動(dòng)定位柳爽，這樣它就可以帶著子元素一起浮動(dòng)了。
float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block
position為 absolute|fixed
代碼這樣寫：
<div style="float:left;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
- 這種方法不用修改HTML代碼碱屁，但是缺點(diǎn)在于父容器變成浮動(dòng)以后磷脯，會(huì)影響到后面元素的定位，而且有時(shí)候娩脾，父容器是定位死的赵誓，無法變成浮動(dòng)。
-
方法三：浮動(dòng)元素的自動(dòng)clearing
它的思路是讓父容器變得可以自動(dòng)"清理"（clearing）子元素的浮動(dòng)柿赊，從而能夠識(shí)別出浮動(dòng)子元素的位置俩功，不會(huì)出現(xiàn)顯示上的差錯(cuò)。
要做到這點(diǎn)碰声，只要為父容器加上一條"overflow: hidden"的CSS語句就行了绑雄。代碼這樣寫：
<div style="overflow: hidden;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
這種方法的缺點(diǎn)主要有二個(gè)，一個(gè)是IE 6不支持奥邮，另一個(gè)是一旦子元素的大小超過父容器的大小万牺，就會(huì)出顯示問題。
方法4:在父容器的尾部自動(dòng)創(chuàng)建一個(gè)空的子元素
代碼
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
display: block;
clear: left;
}
這樣也是可以的:
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
- 其中的"clearfix"是父容器的class名稱洽腺，"content:"";"是在父容器的結(jié)尾處放一個(gè)空白字符脚粟，"display: block; clear: both;"是確保這個(gè)空字符是非浮動(dòng)的獨(dú)立區(qū)塊。
- 為什么加: *zoom: 1;
after選擇符IE 6不支持蘸朋，也就是說上面的這段代碼在IE 6中無效核无，
我們添加一條IE 6的獨(dú)有命令"zoom:1;"就行了，這條命令的作用是激活父元素的"hasLayout"屬性藕坯，讓父元素?fù)碛凶约旱牟季帧?/li>
3 有幾種定位方式团南，分別是如何實(shí)現(xiàn)定位的噪沙，參考點(diǎn)是什么，使用場(chǎng)景是什么吐根？
- position 屬性規(guī)定元素的定位類型正歼。
這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位拷橘，不過絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框局义，而不論該元素本身是什么類型。 -
參考點(diǎn)和使用場(chǎng)景在下圖的描述當(dāng)中
Paste_Image.png
4 z-index 有什么作用? 如何使用?
- z-index 屬性設(shè)置元素的堆疊順序冗疮。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面萄唇。
- 元素可擁有負(fù)的 z-index 屬性值。
- Z-index 僅能在定位元素上奏效（例如 position:absolute;）
該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置术幔，z 軸定義為垂直延伸到顯示區(qū)的軸另萤。如果為正數(shù)，則離用戶更近诅挑，為負(fù)數(shù)則表示離用戶更遠(yuǎn)四敞。
實(shí)例:
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>默認(rèn)的 z-index 是 0。Z-index 1 擁有更高的優(yōu)先級(jí)揍障。</p>
</body>
</html>
5 position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative
位置發(fā)生偏移.是相對(duì)于自己之前正常的位置計(jì)算的,何為正常位置:沒有定位position:static.不影響普通文檔流中其他的元素的位置,但還占據(jù)原來的位置 - margin 設(shè)為負(fù)值
位置發(fā)生偏移,影響普通文檔流中其他的元素的位置.原來的位置會(huì)發(fā)生改變
6 BFC 是什么目养？如何生成 BFC俩由？BFC 有什么作用毒嫡？舉例說明
塊格式化上下文（block formatting context） 是Web頁面的可視CSS渲染的一部分。它是塊盒子的布局發(fā)生及浮動(dòng)體彼此交互的區(qū)域幻梯。
-
如何生成BFC:
Paste_Image.png
作用:
BFC會(huì)阻止垂直外邊距的折疊
BFC不會(huì)重疊浮動(dòng)元素
BFC可以包含浮動(dòng)元素BFC會(huì)阻止垂直外邊距的折疊的7個(gè)實(shí)例
- BFC不會(huì)重疊浮動(dòng)元素的1個(gè)實(shí)例:
- BFC可以包含浮動(dòng)元素的6個(gè)實(shí)例:
7 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并兜畸？如何合并？如何不讓相鄰元素外邊距合并碘梢？給個(gè)父子外邊距合并的范例
- 合并4種場(chǎng)景:
第1種.
第2種.
第3種
第4種
外邊距合并可以設(shè)置margin負(fù)值
8. 代碼練習(xí)4個(gè)實(shí)例
參考地址:
清除浮動(dòng)實(shí)例
浮動(dòng)元素和清除浮動(dòng)方法
MDN文檔:float
