1.浮動(dòng)元素有什么特征萍虽?對(duì)父容器齐疙、其他浮動(dòng)元素膜楷、普通元素、文字分別有什么影響?
當(dāng)浮動(dòng)元素的邊框觸碰到父元素的邊框或者其他浮動(dòng)元素的邊框贞奋,他就會(huì)停下來赌厅。
浮動(dòng)會(huì)讓元素脫離文檔流,如果浮動(dòng)的元素后面有一個(gè)文檔流中元素轿塔,那么這個(gè)元素的框會(huì)表現(xiàn)的和浮動(dòng)元素不存在一樣特愿。但是框的文本內(nèi)容會(huì)為浮動(dòng)元素留出位置空間仲墨。
2.清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
清除浮動(dòng):清除對(duì)應(yīng)的單詞是 clear,對(duì)應(yīng)CSS中的屬性是 clear:left | right | both | none揍障;
(1)利用clear屬性清楚浮動(dòng)
(2)使父元素形成bfc
3.有幾種定位方式目养,分別是如何實(shí)現(xiàn)定位的,參考點(diǎn)是什么毒嫡,使用場(chǎng)景是什么癌蚁?
Inherit 規(guī)定應(yīng)該從父元素繼承position的值
static 默認(rèn)值,沒有定位元素出現(xiàn)在正常的流中(忽略top兜畸,bottom努释,left,right或者z-index聲名)
relative 生成相對(duì)定位的元素咬摇,相對(duì)于元素本身正常位置進(jìn)行定位伐蒂,因此left 20px會(huì)向元素的left位置添加20px;
absolute 生成絕對(duì)定位的元素,相對(duì)于static定位以外的第一個(gè)祖先元素進(jìn)行定位肛鹏,元素的位置通過left,top,bottom,right屬性進(jìn)行規(guī)定逸邦。
fixed 生成絕對(duì)定位的元素,相對(duì)于瀏覽器窗口進(jìn)行定位在扰,元素的位置通過left昭雌,top,bottom健田,right屬性進(jìn)行規(guī)定烛卧。
Sticky CSS3新屬性,表現(xiàn)類似position:relative和position:fixed的合體妓局,在目標(biāo)區(qū)域在屏幕中可見時(shí)总放,他的行為就像position:relative
4.z-index 有什么作用? 如何使用?
z-index 屬性指定了一個(gè)元素及其子元素的 z-order。 當(dāng)元素之間重疊的時(shí)候好爬,z-order 決定哪一個(gè)元素覆蓋在其余元素的上方顯示局雄。 通常來說 z-index 較大的元素會(huì)覆蓋較小的一個(gè)。
對(duì)于一個(gè)已經(jīng)定位的元素(即position屬性值是非static的元素)存炮,z-index 屬性指定:
1.元素在當(dāng)前堆疊上下文中的堆疊層級(jí)炬搭。
2.元素是否創(chuàng)建一個(gè)新的本地堆疊上下文。
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
負(fù)margin文檔流的位置發(fā)生偏移穆桂,position:relative文檔流的位置不會(huì)發(fā)生偏移
6.BFC 是什么宫盔?如何生成 BFC?BFC 有什么作用享完?舉例說明
BFC全稱是Block Formatting Context灼芭,即塊格式化上下文。包括浮動(dòng)般又,絕對(duì)定位的元素彼绷,還有某些塊容器(比如設(shè)置絕對(duì)定位巍佑,固定定位,浮動(dòng)寄悯,inline-block萤衰,table-cell,over-flower:auto猜旬,hidden腻菇,scroll的塊級(jí)元素。)昔馋,會(huì)建立新的塊級(jí)格式化上下文。
bfc會(huì)阻止垂直外邊距的折疊糖耸,不會(huì)重疊浮動(dòng)元素秘遏,可以包含浮動(dòng)
7.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并?如何合并嘉竟?如何不讓相鄰元素外邊距合并邦危?給個(gè)父子外邊距合并的范例同一文檔流中的兩個(gè)相鄰塊級(jí)元素,會(huì)出現(xiàn)外邊距合并舍扰。
合并方式:
(1)上下兩個(gè)相鄰的塊級(jí)元素倦蚪,會(huì)margin發(fā)生合并,合并的值以兩者距離較大的值為準(zhǔn)边苹,可通過建立BFC來取消外邊距合并陵且;
(2)父子元素的外邊距合并「鍪可以給父元素添加邊框慕购,內(nèi)邊距或內(nèi)容當(dāng)做分界線,也可以讓父元素形成bfc茬底,這樣就不會(huì)發(fā)生邊距合并沪悲。