浮動元素有什么特征?
浮動元素不在文檔的普通流中,文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣。
對父容器、其他浮動元素、普通元素、文字分別有什么影響?
對父容器的影響:若父容器的子元素都是浮動元素,那么父容器會失去高度,在浮動元素之外,父容器沒有包含住浮動的子元素。
對其它浮動元素的影響:如果包含塊太窄無法容納水平排列的全部浮動元素,那么其它浮動元素會向下移動,直到有足夠的空間,而如果浮動元素的高度不同,那么向下移動的時候可能會被卡住。
普通元素會認(rèn)為浮動元素不存在,但會被浮動元素遮罩。
文字會環(huán)繞浮動元素。
清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動是讓父元素在視覺上包圍浮動元素。
- 在父元素的子元素最后添加一個空的div,對其設(shè)置樣式為 clear:both;
- 利用BFC來清除浮動。
因為BFC可以包含浮動,因此可以讓父元素生成一個新的BFC從而包圍浮動的子元素。
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
.clearfix:after{
content:"";
display:block;
clear:left;
}
有幾種定位方式,分別是如何實現(xiàn)定位的,參考點是什么,使用場景是什么?
六鐘定位方式為:
- inherit:從父元素繼承;
- static:默認(rèn)值,沒有定位,元素出現(xiàn)在正常的文檔流中。參考點是文檔流中的位置。
- relative:相對定位。相對于元素本身正常位置進(jìn)行定位,通過top、bottom、left、right屬性來設(shè)置偏移量。使用場景:為絕對定位設(shè)定參照物或?qū)υ刈陨砦恢眠M(jìn)行局部調(diào)整。
- absolute:絕對定位。相對于static定位意外的第一個祖先元素進(jìn)行定位,若都沒有發(fā)現(xiàn)則以html標(biāo)簽為參考進(jìn)行定位。使用場景:當(dāng)想讓元素參照特定參照物進(jìn)行定位時使用。
- fixed:固定定位。生成絕對定位元素,相對于viewport進(jìn)行定位。
- sticky:對象在常態(tài)時遵循普通流。它就像是relative和fixed的合體,當(dāng)在屏幕中時按常規(guī)流排版,當(dāng)卷動到屏幕外時則表現(xiàn)如fixed。
z-index 有什么作用? 如何使用?
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative;只相對自己原本位置發(fā)生偏移,不影響其它普通流中元素的位置。
- margin:除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。
BFC 是什么?如何生成 BFC?BFC 有什么作用?舉例說明
BFC是塊級格式上下文。其定義是:浮動、絕對定位(絕對定位、固定定位)元素、塊級容器(如inline-block、 table-cell、table-caption)并不是塊級盒子,還包括哪些overflow屬性值取值visible以外的塊級盒子,會為它們的內(nèi)容物創(chuàng)建一個新的塊級格式化上下文。對元素設(shè)置以下屬性就可以生成BFC:
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
BFC的作用有:
(1) 解決margin重疊問題。所謂margin重疊是指處于同一個BFC的相鄰元素、嵌套元素,只要它們之間沒有阻擋(如:邊框、非空內(nèi)容、padding等)就會發(fā)生margin重疊。這是只要讓其中一個元素生成新的BFC就能解決margin重疊問題。
(2) 清除浮動。因為BFC可以包含浮動,所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動的子元素,因而清除了浮動。
在什么場景下會出現(xiàn)外邊距合并?
在CSS中,兩個或多個毗鄰(父子元素或兄弟元素)的普通流中的塊元素垂直方向上的 margin 會發(fā)生疊加。這種方式形成的外邊距即可稱為外邊距合并;
對于父子元素來說,當(dāng)容器沒有padding和border時,內(nèi)部的margin會引發(fā)外邊距合并;
如何合并?
外邊距合并指的是,當(dāng)兩個垂直外邊距相遇時,它們將形成一個外邊距。
若兩者都為正外邊距以最大的外邊距為準(zhǔn);
若存在負(fù)邊距, 合并后的外邊距為最大正外邊距減去絕對值最大的負(fù)邊距;
若無正外邊距,則用0減去絕對值最大負(fù)邊距。
如何不讓相鄰元素外邊距合并?
用非空內(nèi)容、padding、border 或 clear 讓它們分隔開來;
將它們其中一個設(shè)置為浮動元素、inline-block 元素或絕對定位元素的。給個父子外邊距合并的范例