浮動元素有什么特征?對父容器年碘、其他浮動元素澈歉、普通元素、文字分別有什么影響屿衅?埃难、
float CSS屬性指定一個元素應(yīng)沿其容器的左側(cè)或右側(cè)放置,直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣涤久。允許文本和內(nèi)聯(lián)元素環(huán)繞它涡尘。該元素從網(wǎng)頁的正常流動中移除,盡管仍然保持部分的流動性(與絕對定位相反)响迂。
- 對父容器:由于float脫離了普通流考抄,無法撐開父容器,會出現(xiàn)父容器高度塌陷問題蔗彤。
- 對其他浮動元素:如果寬度足夠會水平排列; 不足會下移靠左/右移動;直到它的外邊緣碰到父容器邊框或者另一個浮動元素的框的邊緣川梅。
- 普通元素:塊級元素會當浮動元素不存在,但文本和內(nèi)聯(lián)元素時會‘感知’浮動元素然遏,環(huán)繞浮動元素贫途。
清除浮動指什么?如何清除浮動待侵? 兩種以上方法丢早。
清除浮動是為解決因float導(dǎo)致的父容器高度坍塌、導(dǎo)致背景不能顯示秧倾、邊框不能撐開怨酝、margin padding設(shè)置值不能正確顯示、影響后續(xù)元素位置等等問題那先。
-
clear: left;
要求該盒的top border邊位于源文檔中在此之前的元素形成的所有左浮動盒的bottom外邊下方
clear: right;
要求該盒的top border邊位于源文檔中在此之前的元素形成的所有右浮動盒的bottom外邊下方
clear屬性只對自身有效农猬,只能在自身元素中使用clear。 - 在父容器內(nèi)添加一個空的塊級元素來撐開父元素胃榕。(使用偽函數(shù)更為推薦)
- BFC(塊級格式化上下文)“清理”浮動盛险,對于嵌套元素瞄摊,子元素浮動會對父容器產(chǎn)生影響勋又,我們可以通過BFC這種方式,令父容器包含浮動子元素换帜。實現(xiàn)BFC有多種方式楔壤,(參考MDN、參考W3)惯驼。但是使用這種方法也是有影響或者是局限性蹲嚣,例如使用display: inline-block递瑰,會縮短父容器長度。
有幾種定位方式隙畜?分別是如何實現(xiàn)定位的抖部?參考點是什么?使用場景是什么议惰?
靜態(tài)定位
position: static
默認的布局方式慎颗。參考點是文檔流中的位置。相對定位
position: relative;
相對默認的布局位置進行定位言询,參考點為自己原先的位置俯萎。相對定位元素扔占有原先的位置。-
絕對定位
positon: absolute;
絕對定位元素脫離正常文檔流运杭,元素的位置相對于最近的已定位父元素夫啊,如果元素沒有已定位的父元素,那么它的位置相對于<html>
辆憔。
定位上下文 Positioning Context
定位上下文就是值絕對定位元素相對哪個元素定位撇眯,默認的定位上下文是 <html>。
ps:元素設(shè)置絕對定位后躁愿,行內(nèi)元素可以有塊級元素的特性叛本,可以添加寬高。固定定位
position: fixed;
相對瀏覽器窗口進行定位彤钟。因此當滾動產(chǎn)生時来候,固定定位元素依然處于窗口的某個固定位置。生成絕對定位元素逸雹,相對于viewport進行定位营搅。粘性定位
position: sticky
是相對定位和固定定位的結(jié)合。默認情況下表現(xiàn)為相對定位梆砸,當瀏覽器窗口頂端與元素的距離等于 top 屬性的值時转质,轉(zhuǎn)變?yōu)楣潭ǘㄎ弧?br> ps:由于兼容性,固定導(dǎo)航條一般用js來實現(xiàn)帖世。
z-index 有什么作用休蟹? 如何使用?
z-index
屬性指定了一個元素及其子元素的 z-order日矫。 當元素之間重疊的時候赂弓,z-order 決定哪一個元素覆蓋在其余元素的上方顯示。 通常來說 z-index 較大的元素會覆蓋較小的一個哪轿。
對于一個已經(jīng)定位的元素(即position屬性值是非static的元素)盈魁,z-index
屬性指定:
- 元素在當前堆疊上下文中的堆疊層級。
- 元素是否創(chuàng)建一個新的本地堆疊上下文窃诉。
需要注意的是一個元素值大杨耙,它的所有子元素都會在其它元素上方赤套。