1.浮動元素有什么特征溉委?對父容器、其他浮動元素爱榕、普通元素瓣喊、文字分別有什么影響?
浮動元素會脫離正常的文檔流,能設(shè)置的值為float:left/right;他會向左或像右移動直到觸碰到父容器的框或者其他浮動元素的框為止黔酥。(受父元素padding和自身的margin影響)
- 對父容器的影響藻三。
假如父容器下的元素全部為浮動元素,父容器的高度將不能被撐開跪者。
- 對其他浮動元素
其他浮動元素會感知到浮動元素的存在棵帽,同時設(shè)置向左浮動的話,其他浮動元素會依次像右排列渣玲,但是如果造成“溢出”的現(xiàn)象逗概,左浮動元素如果高度一致,會再從父元素的框排列忘衍,不一致的話逾苫,較高的浮動元素卡住浮動元素卿城。
- 對普通元素和文字的影響。
普通元素感知不到浮動元素的存在铅搓,視覺上會被浮動元素覆蓋瑟押。但是文字會感受到float元素的存在,會形成文字環(huán)繞的效果狸吞。
2.清除浮動指的是什么勉耀?如何清除浮動,兩種以上的方法蹋偏。
清除浮動指的是消除浮動元素對其他元素造成的不利影響便斥。主要解決父元素高度塌下的問題。
-
清除浮動的方法威始。
用clear屬性枢纠。
具體為需要清除浮動的元素加上clear:both/left/right等屬性,不允許自身的左邊右邊有浮動元素黎棠。對于父元素來說晋渺,可以在最后加上一個空的div標(biāo)簽,并給div設(shè)置clear:both;這樣脓斩,空的div標(biāo)簽不允許自身被浮動元素包圍木西,且在正常文檔流中,父元素就得包裹空的div標(biāo)簽随静,父元素高度塌陷問題就可以解決八千。用BFC清楚浮動。
利用BFC重構(gòu)的格式化塊狀元素上下文規(guī)則來達(dá)到清除浮動的目的燎猛。但是又由于要把塊狀元素設(shè)置為符合BFC要求的塊狀元素會有各種各樣新的問題恋捆,所以應(yīng)該結(jié)合自身需要為其設(shè)置。
- 常見的方法(副作用較小的方法)
注: *zoom 代表ie6-7的清楚浮動的方法重绷。zoom本身的意思是縮放比例沸停。同樣是符合BFC的。
3.有幾種定位方式昭卓,分別是如何實(shí)現(xiàn)定位的愤钾,參考點(diǎn)是什么,使用場景是什么候醒?
目前較為常用的有三種绰垂。
相對定位 position:relative;
相對自身的位置發(fā)生偏移,偏移后視覺上會覆蓋之后的普通文檔流火焰,偏移前的位置仍然被占據(jù)。絕對定位 absolute;
相對于static定位意外的第一個祖先元素進(jìn)行定位胧沫,若都沒有發(fā)現(xiàn)則以html標(biāo)簽為參考進(jìn)行定位昌简。普通元素不會感知到absolute元素的存在占业,且視覺上也會被覆蓋,即絕對定位不會占據(jù)普通流空間纯赎。使用場景:當(dāng)想讓元素參照特定參照物進(jìn)行定位時使用谦疾。
需要注意的是,如果只設(shè)置position:absolue ;left/top采用默認(rèn)的auto犬金,就是相對于第一個非static祖先元素的padding念恍。如果設(shè)置的是0,則相對border;固定定位 fixed晚顷;
固定定位,種種表現(xiàn)都類似于absolue峰伙;只不過定位的元素是瀏覽器窗口「媚或者說是視窗瞳氓。
-
其他定位值;
CSS定位
4.z-index 有什么作用? 如何使用?
z-index屬性適用于定位元素(position屬性值為 relative 或 absolute 或 fixed的對象)栓袖,用來確定定位元素在垂直于顯示屏方向(稱為Z軸)上的層疊順序(stack order)匣摘。
z-index值越大,越在最上層裹刮。且只有在相同父元素中才能比較音榜。
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別?
position:relative 不會影響其他的普通文檔流的,普通文檔流仍然會在偏移之前的占據(jù)的位置后面正常排列捧弃。只是視覺上有可能覆蓋到普通文檔流赠叼。
負(fù)margin 本身仍然是普通文檔流中的一員,實(shí)際上位置發(fā)生偏移塔橡,會影響之后的普通文檔流的排列梅割。
6.BFC 是什么?如何生成 BFC葛家?BFC 有什么作用户辞?舉例說明
BFC是 Block Format Context 格式化塊狀上下文規(guī)則。
-
生成BFC的方法癞谒。
- float:right/left;
- overflow:不為visible;
- position:absolute/fixed
- display:inline-block,table-cell,table-capation
display:table也認(rèn)為可以生成BFC底燎,其實(shí)這里的主要原因在于Table會默認(rèn)生成一個匿名的table-cell,正是這個匿名的table-cell生成了BFC
-
BFC規(guī)則
內(nèi)部的Box會在垂直方向上一個接一個的放置
垂直方向上的距離由margin決定弹砚。(完整的說法是:屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊双仍,與方向無關(guān),其中一個元素生成新的BFC就不會再發(fā)生重貼桌吃。)
每個元素的左外邊距與包含塊的左邊界相接觸(從左向右)朱沃,即使浮動元素也是如此。(這說明BFC中子元素不會超出他的包含塊,而position為absolute的元素可以超出他的包含塊邊界)
BFC的區(qū)域不會與float的元素區(qū)域重疊
計算BFC的高度時逗物,浮動子元素也參與計算
BFC就是頁面上的一個隔離的獨(dú)立容器搬卒,容器里面的子元素不會影響到外面元素,反之亦然翎卓。
可以解決的問題有:
父元素生成BFC就可以包住浮動元素契邀,達(dá)到清除浮動的目的,解決浮動元素父元素高度塌陷失暴。
解決外邊距合并問題坯门,同處于一個BFC規(guī)則下的相鄰元素、嵌套元素逗扒,只要它們之間沒有阻擋(如:邊框古戴、非空內(nèi)容、padding等)就會發(fā)生margin重疊缴阎。這是只要讓其中一個元素生成新的BFC就能解決margin重疊問題允瞧。
7.在什么場景下會出現(xiàn)外邊距合并?如何合并蛮拔?如何不讓相鄰元素外邊距合并述暂?給個父子外邊距合并的范例.
只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。
合并的情景:
這種情況合并以外邊距大者為準(zhǔn)建炫,不管有沒有外邊框畦韭。
這種情況合并也是哪個大就體現(xiàn)哪個的外邊距。如果父元素設(shè)置border肛跌,或者padding屬性艺配,則子元素的margin就能正常體現(xiàn)了。
- 如何不讓其合并衍慎。
對于第一種相鄰子元素的margin转唉,可以為第一個元素或者第二個元素加上一個新的BFC外殼,如可以為第一個元素加一個absolute的父元素稳捆。
對于第二種可以為父元素創(chuàng)建新的BFC赠法,或者為父元素加上padding或者border.
對于第三種自身合并直接加content就行了。