国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

整理css之BFC原理

tomener / 1791人閱讀

摘要:通過格式化上下文后可以將脫離了普通流的元素隔離,使其不會與外界的元素相互隔離。第一次寫,寫得不好請大家多多指教哈哈哈哈

首先回顧下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

相關(guān)文章

  • 【芝士整理CSS基礎(chǔ)圖譜

    摘要:為了實(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...

    iOS122 評論0 收藏0
  • 知識整理CSS

    摘要:如對知識點(diǎn)感興趣,可移步至知識整理之篇就是針對不同的瀏覽器或不同版本瀏覽器寫特定的樣式達(dá)到讓瀏覽器兼容的過程。對于偽元素的定義偽元素在中創(chuàng)建了一些抽象元素,這些對象不存在與常文檔流中。隱藏元素的幾種方法該屬性隱藏元素,單元素在文檔流中仍占據(jù) CSS篇主要從CSS兼容、CSS3新特性、CSS選擇器、高頻屬性、高頻布局、高頻知識點(diǎn)、性能優(yōu)化等方面進(jìn)行歸納。如對HTML知識點(diǎn)感興趣,可移步至...

    ermaoL 評論0 收藏0
  • 十分鐘復(fù)習(xí)CSS盒模型與BFC

    摘要:盒模型與本文為收集整理總結(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分鐘 什么是盒模型 每一個文檔中,每...

    verano 評論0 收藏0
  • 十分鐘復(fù)習(xí)CSS盒模型與BFC

    摘要:盒模型與本文為收集整理總結(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分鐘 什么是盒模型 每一個文檔中,每...

    suxier 評論0 收藏0
  • CSS知識點(diǎn)及技巧整理

    摘要:當(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...

    masturbator 評論0 收藏0

發(fā)表評論

0條評論

tomener

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<