浮動元素有什么特征?對父容器桩卵、其他浮動元素验靡、普通元素、文字分別有什么影響?
浮動元素脫離了普通文檔流雏节,文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣胜嗓。浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止钩乍。
- 對父容器的影響:如果父容器的子元素都是浮動元素辞州,那么父容器會失去高度。
- 對其他浮動元素的影響:如果包含塊兒太窄無法容納水平排列的幾個浮動元素,那么其它浮動塊兒向下移動,直到有足夠的空間,如果浮動元素的高度不同,那么向下移動的時候可能被卡住寥粹。
- 對普通元素的影響:因為浮動元素脫離了文檔的普通流变过,文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣。
- 對文字的影響:文字會感應到浮動元素的存在涝涤,并產(chǎn)生文字環(huán)繞浮動元素的效果媚狰。
清除浮動指什么? 如何清除浮動? 兩種以上方法
清楚浮動指解決浮動元素父容器高度塌陷問題。
- 在父容器最后添加一個空div阔拳,并清理這個div崭孤。
clear:both;
- 使父容器生成一個BFC,因為BFC可以包含浮動辨宠。
規(guī)定滿足下列CSS聲明之一的元素便會生成BFC遗锣。
- 根元素
- float的值不為none
- overflow的值不為visible
- display的值為inline-block、table-cell嗤形、table-caption
- position的值為absolute或fixed
- 通用的清除浮動方法精偿。
/*方法1*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}?
有幾種定位方式,分別是如何實現(xiàn)定位的赋兵,參考點是什么还最,使用場景是什么?
|定位方式|實現(xiàn)方式|參考點|使用場景|
| :--------- :|-----------|----------|------------|
|static|默認值,沒有定位毡惜,元素出現(xiàn)在正常的流中。|無||
|relative|相對定位斯撮,元素框偏移某個距離经伙。元素仍保持其未定位前的形狀,它原本所占的空間仍保留勿锅。|元素本身位置|元素的偏移|
|absolute|絕對定位帕膜,元素框從文檔流中刪除,元素定位后生成一個塊級框溢十,而不論原來它在正常流中生成何種類型的框垮刹。|距離最近的非static元素,否則為body|元素垂直水平居中|
|fixed|固定定位张弛,生成絕對定位元素荒典,但不隨著滾動條的移動而改變位置。|瀏覽器窗口|登錄框覆蓋層|
z-index 有什么作用? 如何使用?
z-index 屬性設置元素的堆疊順序吞鸭。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面寺董。如果為正數(shù),則離用戶更近刻剥,為負數(shù)則表示離用戶更遠遮咖。Z-index 僅能在定位元素上奏效。
position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
相對定位與負margin都可以是元素位置發(fā)生偏移造虏。
區(qū)別:使用負margin的元素在文檔流中的位置會變動御吞,而相對定位不會,只是顯示的位置發(fā)生變化漓藕。
BFC 是什么陶珠?如何生成 BFC?BFC 有什么作用撵术?舉例說明
BFC的全稱是 Block Format Content背率,塊級格式化上下文。
規(guī)定滿足下列CSS聲明之一的元素便會生成BFC。
- 根元素
- float的值不為none
- overflow的值不為visible
- display的值為inline-block寝姿、table-cell交排、table-caption
- position的值為absolute或fixed
BFC 作用
- BFC會阻止垂直外邊距(margin-top、margin-bottom)折疊
按照BFC的定義饵筑,只有同屬于一個BFC時埃篓,兩個元素才有可能發(fā)生垂直Margin的重疊,這個包括相鄰元素根资,嵌套元素架专,只要他們之間沒有阻擋(例如邊框,非空內(nèi)容玄帕,padding等)就會發(fā)生margin重疊部脚。
因此要解決margin重疊問題,只要讓它們不在同一個BFC就行了裤纹,但是對于兩個相鄰元素來說委刘,意義不大,沒有必要給它們加個外殼鹰椒,但是對于嵌套元素來說就很有必要了锡移,只要把父元素設為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊 - BFC不會重疊浮動元素
- BFC可以包含浮動漆际。
在什么場景下會出現(xiàn)外邊距合并淆珊?如何合并?如何不讓相鄰元素外邊距合并奸汇?給個父子外邊距合并的范例
外邊距合并指的是施符,當兩個垂直外邊距相遇時,它們將形成一個外邊距擂找。
合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者操刀。
-
相鄰元素外邊距合并。第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并婴洼。
-
父子外邊距合并骨坑。假設沒有內(nèi)邊距或邊框把外邊距分隔開,那么它們的上和/或下外邊距也會發(fā)生合并柬采。
-
空元素外邊距合并欢唾。假設有一個空元素,它有外邊距粉捻,但是沒有邊框或填充礁遣。在這種情況下,上外邊距與下外邊距就碰到了一起肩刃,它們會發(fā)生合并祟霍。
如果這個外邊距遇到另一個元素的外邊距杏头,它還會發(fā)生合并: