摘要:通過格式化上下文后可以將脫離了普通流的元素隔離,使其不會與外界的元素相互隔離。第一次寫,寫得不好請大家多多指教哈哈哈哈
首先回顧下CSS常出現(xiàn)的幾個樣式問題
1當(dāng)子元素添加上邊距時,父元素也會向下移動
解決方法:
給子元素添加display:inline-block;
或者用父元素的padding-top代替給可以
2子元素浮動后,父級元素檢測不到其高度
3當(dāng)元素浮動后,兄弟元素的內(nèi)容超過其高度后會侵占它的區(qū)域(其實(shí)問題原因與第二點(diǎn)類似)
解決方法:給超出高度的元素加上overflow:hidden;
4同級元素間的邊距重疊時,如兩個元素間有上下邊距,只會有值大的邊距生效。
解決方法:
給其中一個元素加上一層標(biāo)簽包裹,并給標(biāo)簽加上滿足BFC的樣式
問題出現(xiàn)原因:
1 元素之間的邊距無法識別是因?yàn)樗鼈兊倪吘嗪喜⒌搅艘黄穑瑸g覽器只能識別較大的那個值
2 元素浮動后或絕對定位后,高度將無法識別,所以可能會影響父級元素
BFC級格式化上下文,大白話理解則是讓它形成一個獨(dú)立的容器,
與外面的元素不會相互影響,而使用BFC則可以解決上訴問題。
通過BFC 格式化上下文后 可以將脫離了普通流的元素隔離,使其不會與外界的元素相互隔離。
第一次寫,寫得不好,請大家多多指教哈哈哈哈
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/115857.html
摘要:為了實(shí)現(xiàn)文字環(huán)繞效果,規(guī)范規(guī)定的措施是使父容器塌陷,元素脫離文檔流浮動產(chǎn)生,元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。 選擇器注意點(diǎn) 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節(jié)點(diǎn) A + B - 下一個兄弟節(jié)點(diǎn) A...
摘要:盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時間閱讀分鐘什么是盒模型每一個文檔中,每個元素都被表示為一個矩形的盒子它都會具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時間 閱讀10分鐘 什么是盒模型 每一個文檔中,每...
摘要:盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時間閱讀分鐘什么是盒模型每一個文檔中,每個元素都被表示為一個矩形的盒子它都會具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時間 閱讀10分鐘 什么是盒模型 每一個文檔中,每...
摘要:當(dāng)元素在容器中被滾動超過指定的偏移值時,元素在容器內(nèi)固定在指定位置。詳見浮動與清除浮動浮動相關(guān)知識屬性的取值元素向左浮動。是相對長度單位,相對于當(dāng)前對象內(nèi)文本的字體尺寸。 這些個知識點(diǎn)是我個人認(rèn)為的,下面我們就來看看這些個知識點(diǎn)。 1.怎么讓一個不定寬高的 DIV,垂直水平居中? 使用Flex 只需要在父盒子設(shè)置:display: flex; justify-content: cent...
閱讀 2170·2023-04-26 00:43
閱讀 2689·2021-11-22 15:22
閱讀 3826·2021-11-11 16:55
閱讀 977·2021-11-04 16:06
閱讀 1792·2019-08-30 14:12
閱讀 1004·2019-08-30 14:02
閱讀 3375·2019-08-29 17:05
閱讀 1421·2019-08-29 12:27