1.浮動(dòng)元素有什么特征责蝠?對(duì)父容器丁稀、其他浮動(dòng)元素辆脸、普通元素克握、文字分別有什么影響?
- 浮動(dòng)元素會(huì)脫離正常的文檔流蕾管,按照其外邊距指定的位置相對(duì)于它的上一個(gè)塊級(jí)元素(或父元素)顯示
- 浮動(dòng)元素后面的塊級(jí)元素的內(nèi)容會(huì)向此浮動(dòng)元素的外邊距靠齊,但是邊框和背景卻忽略浮動(dòng)元素而向上一個(gè)任意非浮動(dòng)元素靠齊
- 浮動(dòng)元素后面的內(nèi)聯(lián)元素會(huì)向此浮動(dòng)元素的外邊距靠齊
float造成的影響:
1.對(duì)其父元素的影響
對(duì)于其父元素來說菩暗,元素浮動(dòng)之后掰曾,它脫離當(dāng)前正常的文檔流,所以它也無法撐開其父元素停团,造成父元素的塌陷
2.對(duì)其兄弟元素(非浮動(dòng))的影響
如果兄弟元素為塊級(jí)元素旷坦,該元素會(huì)忽視浮動(dòng)元素的而占據(jù)它的位置,并且元素會(huì)處在浮動(dòng)元素的下層(并且無法通過z-index屬性改變他們的層疊位置)佑稠,但它的內(nèi)部文字和其他行內(nèi)元素都會(huì)環(huán)繞浮動(dòng)元素秒梅。
如果如果兄弟元素為內(nèi)聯(lián)元素,則元素會(huì)環(huán)繞浮動(dòng)元素排列舌胶。
3.對(duì)其兄弟元素(浮動(dòng))的影響
同一個(gè)方向的浮動(dòng)元素:當(dāng)一個(gè)浮動(dòng)元素在浮動(dòng)過程中碰到同一個(gè)方向的浮動(dòng)元素時(shí)捆蜀,它會(huì)緊跟在它們后面
反方向的浮動(dòng)元素:互不影響,位于同一條水平線上辆琅,當(dāng)空間不夠時(shí)會(huì)被擠下
4.對(duì)子元素的影響
當(dāng)一個(gè)元素浮動(dòng)時(shí)漱办,在沒有清除浮動(dòng)的情況下,它無法撐開其父元素婉烟,但它可以讓自己的浮動(dòng)子元素?fù)伍_它自身,并且在沒有定義具體寬度情況下暇屋,使自身的寬度從100%變?yōu)樽赃m應(yīng)(浮動(dòng)元素display:block)似袁。其高度和寬度均為浮動(dòng)元素高度和非浮動(dòng)元素高度之間的最大值。
5.對(duì)文字:文字能夠識(shí)別浮動(dòng)元素咐刨,會(huì)圍繞浮動(dòng)元素
2.清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
指清除浮動(dòng)帶來的一些副作用
浮動(dòng)會(huì)讓元素脫離文檔流昙衅,不再影響不浮動(dòng)的元素(這里不影響是指在文檔流里不占位置,后邊的元素忽視浮動(dòng)元素的存在)定鸟。實(shí)則不然而涉,浮動(dòng)不再占據(jù)文檔流的位置,也使浮動(dòng)元素周圍的元素表現(xiàn)的如同浮動(dòng)元素不存在一樣联予,給布局帶來了一些副作用啼县。
- .clear:both 在父元素中添加一個(gè)無意義的div材原,并向其添加樣式clear:both清除浮動(dòng),使得父容器撐起來
- BFC:利用某些屬性清除格式上下文的特質(zhì)季眷,使父容器形成一個(gè)新的BFC.其便具有BFC包含浮動(dòng)的特質(zhì)余蟹,使高度撐起來。
- .clearfix:{*zoom:1} *表示針對(duì)于IE6,7子刮,其原理是使父容器形成一個(gè)類似于BFC的特性
- .clearfi:before:{content:""; display:block; clear:both;} 本質(zhì)是第一個(gè)
3.有幾種定位方式威酒,分別是如何實(shí)現(xiàn)定位的,參考點(diǎn)是什么挺峡,使用場(chǎng)景是什么葵孤?
定位方式:
- 相對(duì)定位(relative):相對(duì)于元素在文檔流中本該在的位置進(jìn)行定位。 場(chǎng)景是:為絕對(duì)定位提供參照點(diǎn)或調(diào)整元素的位置
- 絕對(duì)定位(absolute):向上尋找static以外的元素進(jìn)行相對(duì)定位橱赠。若找不到則以html為參照物進(jìn)行定位 佛呻。場(chǎng)景:參照某一元素進(jìn)行定位
- 繼承(inherit)從父元素繼承其定位
- 固定定位(fixed) 會(huì)相對(duì)于視窗的位置進(jìn)行定位,即使頁(yè)面滾動(dòng)病线,仍會(huì)停留在原來的位置
- sticky :當(dāng)目標(biāo)在可見區(qū)域時(shí)吓著,其行為類似于relative;在不可見位置時(shí),類似于fixed
4.z-index 有什么作用? 如何使用?
- 作用:絕對(duì)定位元素脫離文檔流送挑,因此有時(shí)會(huì)發(fā)生元素的層疊绑莺。z-index元素為這些元素設(shè)置了層疊順序;z-index指定了非static元素顯示的優(yōu)先級(jí),z-index較大的那個(gè)覆蓋在較小的那個(gè)元素上
- 使用:對(duì)擁有absolute元素的屬性使用;
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative 是相對(duì)于自己本來的位置發(fā)生偏移惕耕,對(duì)其他元素?zé)o影響
- mairgin:負(fù)值 會(huì)影響周圍的普通流元素
6.BFC 是什么纺裁?如何生成 BFC?BFC 有什么作用司澎?舉例說明
BFC是塊級(jí)格式化上下文
生成方式:為元素設(shè)置以下屬性即可:
float:left|right
overflow:hidden|auto|scroll
display:table-cell|table-caption|inline-block
position:absolute|fixed
作用 BFC為元素生成一個(gè)獨(dú)立的空間欺缘,外界元素?zé)o法對(duì)內(nèi)界元素造成影響
1.margin的重疊。當(dāng)兩個(gè)上下相鄰的元素發(fā)生margin重疊時(shí)挤安,讓其中一個(gè)元素產(chǎn)生一個(gè)新的BFC谚殊,即可解決
2.清除浮動(dòng):BFC元素可以包含浮動(dòng)
7.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并?如何合并蛤铜?如何不讓相鄰元素外邊距合并嫩絮?給個(gè)父子外邊距合并的范例
外邊距合并指的是,塊級(jí)元素的上外邊距和下外邊距相遇時(shí)有時(shí)會(huì)合并為單個(gè)外邊距围肥。
以下三種情況會(huì)導(dǎo)致外邊距合并:
毗鄰兄弟元素:
毗鄰的兩個(gè)兄弟元素之間的外邊距會(huì)塌陷(當(dāng)后者被清除浮動(dòng)時(shí)除外)剿干,此時(shí)兩元素之間的外邊距為上面元素的下外邊距和下面元素的上外邊距中的較大值。
塊級(jí)父元素與其第一個(gè)/最后一個(gè)子元素:
如果塊級(jí)父元素中穆刻,不存在上邊框置尔、上內(nèi)邊距、inline content氢伟、清除浮動(dòng)這四條屬性時(shí)榜轿,那么這個(gè)塊級(jí)元素和其第一個(gè)子元素的上邊距就挨到了一起幽歼,此時(shí)這個(gè)父元素對(duì)外展現(xiàn)出來的外邊距將直接變成這個(gè)父元素和其第一個(gè)子元素的margin-top的較大者。類似的差导,若塊級(jí)父元素的 margin-bottom
與它的最后一個(gè)子元素的margin-bottom之間沒有父元素的 border试躏、
padding、inline content设褐、height
颠蕴、min-height、max-height 分隔時(shí)助析,就會(huì)發(fā)生 下外邊距合并 現(xiàn)象犀被。
空塊元素:
如果存在一個(gè)空的塊級(jí)元素,其 border
外冀、padding寡键、inline content、height雪隧、min-height 都不存在西轩。那么此時(shí)它的上下邊距中間將沒有任何阻隔,此時(shí)它的上下外邊距將會(huì)合并脑沿。
父子外邊距合并