浮動元素有什么特征携兵?對父容器、其他浮動元素徐紧、普通元素、文字分別有什么影響?
float CSS屬性指定一個元素應(yīng)沿其容器的左側(cè)或右側(cè)放置并级,文本和內(nèi)聯(lián)元素將圍繞它。
然后嘲碧,該元素從網(wǎng)頁的正常流動中獲取,盡管仍然保持一部分流動愈涩,與絕對定位相反加矛。
- 影響
- 對于父容器而言,如果沒有設(shè)置其高度煤篙,而子元素設(shè)置float,會造成‘塌陷’的效果舰蟆。可用BFC原理或者清除浮動解決.
- 對于其他浮動元素而言: 如果寬度足夠會水平排列; 不足會下移靠左/右移動;當(dāng)?shù)谝粋€浮動元素的高度大于第3個浮動元素的高度并且整體寬度不足以水平放下多個浮動元素,會造成‘卡住’的效果身害。
- 普通元素:
- 當(dāng)為塊級元素時會當(dāng)浮動元素不存在
- 當(dāng)為內(nèi)聯(lián)元素時會‘感知’浮動元素,環(huán)繞浮動元素塌鸯。
清除浮動是指什么?如何清除浮動丙猬?
清除浮動是指結(jié)合clear屬性讓父元素在視覺上包圍浮動元素。清除浮動的方法:
- 在父元素的子元素最后添加一個空div茧球,并對其設(shè)置樣式:clear:both;由于在子元素最后添加了空div,并清除了浮動抢埋,因此父容器被撐開,實(shí)現(xiàn)了在視覺上包圍浮動元素的效果揪垄。
- 利用BFC來清除浮動。因?yàn)锽FC可以包含浮動饥努,因此可以讓父元素生成一個新的BFC從而包圍浮動的子元素。
可以對父元素設(shè)定以下樣式之一生成新BFC酷愧。
float: left / right;
overflow: hidden / auto / scroll;
display: table-cell / table-caption / inline-block;
position: absolute / fixed;
有幾種定位方式,分別是如何實(shí)現(xiàn)定位的溶浴,參考點(diǎn)是什么,使用場景是什么戳葵?
position: relative 根據(jù)自身定位
absolute 根據(jù)已定位的父級來絕對定位,都沒有根據(jù)HTML來進(jìn)行定位.
fixed 根據(jù)瀏覽器窗口來進(jìn)行定位
static 默認(rèn)樣式
sticky 可以看成是relative和fixed的集合體.當(dāng)在頁面可視范圍內(nèi)以relative,當(dāng)頁面滾動超出目標(biāo)區(qū)域時,以fix定位.
一般 absolute 配合 relative使用.當(dāng)父容器的寬高可變時生蚁,使用絕對水平垂直居中。
sticky 是css3的新屬性邦投,兼容性不太好。
z-index 有什么作用? 如何使用?
層疊上下文 .配合定位使用 z-index大的在上,小的在下志衣。
這里說一下我的理解:
- BFC和層疊上下文沒關(guān)系
BFC的目的是讓自己塊中的元素(包括float)不會影響其他元素,在二維平面內(nèi)念脯。(這個說法并不準(zhǔn)確,準(zhǔn)確的來說是讓該元素內(nèi)部的元素對外部元素所產(chǎn)生的影響轉(zhuǎn)變成該元素對外部元素產(chǎn)生影響)绿店。
而層疊上下文,是指覆蓋邏輯(z-order)
特性:
層疊上下文的層疊水平要比普通元素高假勿;
層疊上下文可以阻斷元素的混合模式(見此文第二部分說明);
層疊上下文可以嵌套转培,內(nèi)部層疊上下文及其所有子元素均受制于外部的層疊上下文恶导。
每個層疊上下文和兄弟元素獨(dú)立惨寿,也就是當(dāng)進(jìn)行層疊變化或渲染的時候,只需要考慮后代元素羽戒。
每個層疊上下文是自成體系的虎韵,當(dāng)元素發(fā)生層疊的時候,整個元素被認(rèn)為是在父層疊上下文的層疊順序中包蓝。
原則
誰大誰上:當(dāng)具有明顯的層疊水平標(biāo)示的時候,如識別的z-indx值测萎,在同一個層疊上下文領(lǐng)域,層疊水平值大的那一個覆蓋小的那一個硅瞧。
后來居上:當(dāng)元素的層疊水平一致、層疊順序相同的時候,在DOM流中處于后面的元素會覆蓋前面的元素或辖。
(以上來自張鑫旭大神的博客,這里摘抄一下)
這里要注意颂暇,雖然z-index只能對定位元素應(yīng)用缺谴,但是z-index也會使該定位元素對其他元素產(chǎn)生影響(其他元素默認(rèn)值應(yīng)該為z-index=0)耳鸯。該元素的子元素和其他上下文元素中的子元素覆蓋關(guān)系取決于這兩個元素之間的關(guān)系(原因還是在張鑫旭大神的博客中。地址)
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
根據(jù)元素還在普通文檔角度看县爬。設(shè)置positon: relative 還在原來的文檔流,-margin則相反(-margin有可能會被其它元素所覆蓋捌省,不清楚為什么如果那位大神知道請教我)。
示例
BFC 是什么纲缓?如何生成 BFC?BFC 有什么作用祝高?舉例說明
塊級格式化上下文(block formart context) css2.1新增的一個概念。它是頁面中的一個渲染區(qū)域工闺,有自己的一套渲染規(guī)則。里面的子元素根據(jù)這個規(guī)則進(jìn)行定位. (可以理解為一個與外界格局的包含塊陆蟆,里面不管浮動 定位 什么的 即使在怎么'翻江倒海'都不會其臨邊的元素.該怎么就怎么顯示)body 根元素浮動元素定位元素 position: absolute/fixedpositon: relative/sticky/static不會觸發(fā)BFC
display: inline-block /table-cell/flexoverflow: auto/hidden/srcoll 除了visible一般如果父容器不設(shè)置高度,里面的子元素采用某種方式脫離文檔流叠殷,會造成高度塌陷。BFC可以解決父容器沒有高度的問題林束。比如實(shí)現(xiàn)一個兩欄布局: [父元素可以實(shí)現(xiàn)高度自適像棘。,可以實(shí)現(xiàn)一個簡單的二欄布局壶冒。在什么場景下會出現(xiàn)外邊距合并?如何合并胖腾?如何不讓相鄰元素外邊距合并瘪松?給個父子外邊距合并的范例
普通文檔流,同一個塊級上下文中 的垂直方向上凉逛。為什么會產(chǎn)生這種效果,完全是歷史遺留問題,主要是為了解決文字排版的需求状飞。比如相鄰的塊級分別設(shè)置margin為50px 和 100px. 會選擇大的margin作為參考值
比如 元素內(nèi)嵌套多個div,最終參考的是marign最大的那個值.
- 如何阻止合并
形成BFC 可以阻止外bian'ju合并样屠,對于垂直相鄰的元素可以設(shè)置浮動或設(shè)置其中一個元素為display:inline-block;對于父子元素外邊距,可為父元素設(shè)置padding或border痪欲。