1.浮動元素有什么特征?對父容器、其他浮動元素氨肌、普通元素、文字分別有什么影響?
特征:浮動模型也是一種可視化格式模型酌畜,浮動的框可以左右移動(根據(jù)float屬性值確定)怎囚,知道浮動框碰到包含框或者另一浮動元素的框的邊緣。浮動元素不在文檔的普通流中桥胞,因此文檔普通流的塊級元素感知不到浮動的存在恳守。
對父容器的影響:如果父容器的子元素都是浮動元素,那么父容器會造成高度塌陷贩虾,在浮動元素之外催烘。視覺上,父容器沒有包含住浮動的子元素缎罢。
其他浮動元素:如果包含塊太窄無法容納水平排列的全部浮動元素伊群,那么其它浮動元素會向下移動,直到有足夠的空間策精,而如果浮動元素的高度不同舰始,那么向下移動的時(shí)候可能會被卡住。
普通元素:浮動元素之前的普通元素不受影響咽袜。浮動元素之后的普通元素因感知不到浮動元素的存在會被浮動元素覆蓋丸卷。
文字:文字所在行框內(nèi)會受浮動元素的排擠,文字環(huán)繞浮動元素排列酬蹋。
2. 清除浮動指什么? 如何清除浮動?
清除浮動:消除浮動元素對其父元素因浮動元素造成的高度塌陷的問題
清除浮動方法:
1.在父元素的子元素最后添加一個(gè)空div及老,并對其設(shè)置樣式:clear:both;
由于在子元素最后添加了空div抽莱,并清除了浮動范抓,因此父容器被撐開,實(shí)現(xiàn)了在視覺上包圍浮動元素的效果食铐。
2.使父元素形成 BFC包含浮動匕垫!
float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block
position為 absolute|fixed
根據(jù)實(shí)際情況來形成BFC!
3.通用法
對父元素設(shè)置css來清除浮動虐呻,通用方法象泵,無副作用
.clearfix {
*zoom:1;
}
.clearfix {
content: "";
display: block;
clear: both;
}
3.有幾種定位方式寞秃,分別是如何實(shí)現(xiàn)定位的,參考點(diǎn)是什么偶惠,使用場景是什么春寿?
- inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值
- static 默認(rèn)值,沒有定位忽孽,元素出現(xiàn)在正常的文檔流中绑改。
- relative 相對定位,相對元素本身正常位置進(jìn)行定位兄一。left:20px 會向元素的 left 位置添加20px厘线。使用場景:部分居中布局
- absulute 絕對定位,相對于static以外的第一個(gè)祖先元素進(jìn)行定位出革。使用場景:二級菜單
- fixed 固定定位造壮,相對于瀏覽器窗口進(jìn)行定位。使用場景:頁面廣告
- sticky css3新屬性骂束,表現(xiàn)類似position:relative和position:fixed的合體耳璧,在目標(biāo)區(qū)域在屏幕中可見時(shí),它的行為就像position:relative;而當(dāng)頁面滾動超出目標(biāo)區(qū)域時(shí)展箱,它的表現(xiàn)就像position:fixed楞抡,會固定在目標(biāo)位置。使用場景:搜索列表頁的側(cè)邊菜單
4.z-index 有什么作用? 如何使用?
z-index作用:z-index屬性設(shè)置了元素的堆疊順序析藕,擁有更高堆疊順序的元素會處于堆疊順序較低的元素前面召廷。
- z-index屬性設(shè)置了一個(gè)定位元素沿Z軸(垂直屏幕的一條軸線)的位置,如果軸線的只為正账胧,則離用戶更近竞慢,如果軸距為負(fù),離用戶更遠(yuǎn)治泥。
- z-index可以影響層疊水平筹煮,但只限于position(非static)定位元素以及flex盒子的子元素生效。
- z-index值為auto時(shí)居夹,不建立層疊上下文败潦,設(shè)置了數(shù)值(即使是0)就會創(chuàng)建層疊上下文了。
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別?
position:relative元素相對自身偏移准脂,不會影響同一級的其他元素劫扒。
而margin則會影響到其他元素的布局
6.BFC 是什么?如何生成 BFC狸膏?BFC 有什么作用沟饥?
BFC(Block formatting contexts):翻譯過來就是塊級格式化上下文,指的是一種上下文環(huán)境,具有對內(nèi)部元素的包裹性及對外部元素的獨(dú)立性贤旷」懔希可以用來清除浮動。
特性:
- BFC會阻止垂直外邊距
- BFC不會重疊浮動元素
- BFC可以包含浮動
如何形成BFC:
float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block
position為 absolute|fixed
可以利用BFC可以包含浮動的特性來“清除”浮動幼驶,第二個(gè)(清除浮動)問題里有舉例子艾杏!
7.在什么場景下會出現(xiàn)外邊距合并?如何合并盅藻?如何不讓相鄰元素外邊距合并糜颠?
外邊距合并指的是,當(dāng)兩個(gè)垂直外邊距相遇時(shí)萧求,它們將形成一個(gè)外邊距其兴。
合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
外邊距合并的三種情況:
1.相鄰的兄弟姐妹元素
2.塊級父元素與其第一個(gè)/最后一個(gè)子元素(若塊級父元素的 margin-bottom 與它的最后一個(gè)子元素的margin-bottom 之間沒有父元素的 border夸政、padding元旬、inline- content、height守问、min-height匀归、 max-height 分隔時(shí),就會發(fā)生下外邊距合并現(xiàn)象耗帕。)
3.空塊元素
合并方式:
- 兩個(gè)margin為正時(shí)穆端,取兩者較大值
- 兩個(gè)都為負(fù)時(shí)候,取絕對值的較大值仿便,負(fù)方向移動
- 當(dāng)有負(fù)邊距存在時(shí)体啰,合并后的外邊距將是最大正邊距加上最小負(fù)邊距(即負(fù)邊距中絕對值最大的一個(gè))。
消除邊距合并方式
方式一:形成BFC
overflow的值為auto或者h(yuǎn)idden時(shí)這個(gè)必須外面還要包裹一層父元素嗽仪。
方式二:浮動元素荒勇、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊(注意這里指的是上下相鄰的元素)
【個(gè)人總結(jié)闻坚,如有錯(cuò)漏沽翔,歡迎指出】
:>