1、浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響?
浮動的定義:使元素脫離文檔流,按照指定方向發(fā)生移動,遇到父級邊界或者相鄰的浮動元素停了下來。浮動樣式可以應用在塊元素及行內(nèi)元素上,
1、應用浮動后,元素在一排顯示,且相鄰之間沒有空隙。
2、應用在行內(nèi)元素上時可以讓其像display:inline-block一樣支持寬高。
3、默認內(nèi)容撐開寬度
4、脫離文檔流,父元素無法感知浮動元素的容量,如果父元素未設(shè)置高度值,父元素高度將無法只由浮動元素撐開。
5、浮動會提升層級半層,普通元素會被遮檔,如文檔流中文字圖片內(nèi)容與浮動元素所占用區(qū)域重合,文字內(nèi)容會被擠開。
2、清除浮動指什么? 如何清除浮動? 兩種以上方法
因為浮動元素脫離文檔流,父元素無法感知浮動元素的容量,如果父元素未設(shè)置高度值,父元素高度將無法只由浮動元素撐開。
清除浮動的方法有:
1、空標簽清浮動:在父元素的子元素的最后添加一個沒有高度的空的塊標簽,并且設(shè)置屬性 clear:both;
2、
標簽清浮動:在父元素的子元素的最后添加一個
標簽,并且設(shè)置屬性 clear:both;
3、after偽類 清浮動方法。
父元素:after{content:'';display:block;clear:both;}父元素{zoom:1;}
after偽類: 元素內(nèi)部末尾添加內(nèi)容;
:after{content"添加的內(nèi)容";} IE6,7下不兼容
zoom :1 用來觸發(fā) IE下 haslayout,使元素根據(jù)自身內(nèi)容計算寬高。
3、有幾種定位方式,分別是如何實現(xiàn)定位的,參考點是什么,使用場景是什么?
static 默認值。沒有定位,元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。
**relative **生成相對定位的元素,相對于其正常位置進行定位。還在文檔流中,原來所占用的位不會被其它元素所占有。如,"left:20" 會向元素的 LEFT 位置添加 20 像素。
absolute 生成絕對定位的元素,相對于 static 定位以外的第一個祖先元素進行定位。如果沒有這樣的祖先元素,則參照初始塊即瀏覽器視口。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
**fixed **生成絕對定位的元素,相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
4、z-index 有什么作用? 如何使用?
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
Z-index 僅能在定位元素上奏效,元素可擁有負的 z-index 屬性值。
用例:z-index:2;數(shù)值越高,越優(yōu)先顯示在上面。
5、position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative 相對自身原來所占的位置,margin則相父元素設(shè)置外邊距。
6、BFC 是什么?如何生成 BFC?BFC 有什么作用?舉例說明
BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。
如何形成BFC :
浮動(除none),絕對定位, display:inline-block/table-cells/table-captions, 和overflow的值不為visible, 時可以創(chuàng)建一個新的格式化上下文。BFC可以清除浮動(給浮動元素的父級加絕對定位或浮動樣式都可以達到清除浮動的作用),和阻止margin合并。
7.在什么場景下會出現(xiàn)外邊距合并?如何合并?如何不讓相鄰元素外邊距合并?給個父子外邊距合并的范例
外邊距合并:兩個在普通文檔流中相鄰的元素外邊距相遇的時候發(fā)生合并。這個相鄰可以是父子關(guān)系相鄰,兄弟關(guān)系相鄰,一個元素內(nèi)部沒有東西,自身的上下邊距相遇時都會發(fā)生外邊距合并。合并的結(jié)果: 兩個外邊距都是正數(shù),取兩者之中的較大者;兩個外邊距都是負數(shù),取兩者之間絕對值較大者;當兩個外邊距一正一負時,取兩者的和。