成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

整理css之BFC原理

tomener / 1840人閱讀

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

首先回顧下CSS常出現(xiàn)的幾個(gè)樣式問題
1當(dāng)子元素添加上邊距時(shí),父元素也會(huì)向下移動(dòng)

解決方法:
給子元素添加display:inline-block;
或者用父元素的padding-top代替給可以

2子元素浮動(dòng)后,父級(jí)元素檢測(cè)不到其高度
3當(dāng)元素浮動(dòng)后,兄弟元素的內(nèi)容超過其高度后會(huì)侵占它的區(qū)域(其實(shí)問題原因與第二點(diǎn)類似)

解決方法:給超出高度的元素加上overflow:hidden;

4同級(jí)元素間的邊距重疊時(shí),如兩個(gè)元素間有上下邊距,只會(huì)有值大的邊距生效。

解決方法:
給其中一個(gè)元素加上一層標(biāo)簽包裹,并給標(biāo)簽加上滿足BFC的樣式

問題出現(xiàn)原因:
1 元素之間的邊距無法識(shí)別是因?yàn)樗鼈兊倪吘嗪喜⒌搅艘黄?,瀏覽器只能識(shí)別較大的那個(gè)值
2 元素浮動(dòng)后或絕對(duì)定位后,高度將無法識(shí)別,所以可能會(huì)影響父級(jí)元素

BFC級(jí)格式化上下文,大白話理解則是讓它形成一個(gè)獨(dú)立的容器,
與外面的元素不會(huì)相互影響,而使用BFC則可以解決上訴問題。
通過BFC 格式化上下文后 可以將脫離了普通流的元素隔離,使其不會(huì)與外界的元素相互隔離。

第一次寫,寫得不好,請(qǐng)大家多多指教哈哈哈哈

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/115857.html

相關(guān)文章

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

    摘要:為了實(shí)現(xiàn)文字環(huán)繞效果,規(guī)范規(guī)定的措施是使父容器塌陷,元素脫離文檔流浮動(dòng)產(chǎn)生,元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。 選擇器注意點(diǎn) 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節(jié)點(diǎn) A + B - 下一個(gè)兄弟節(jié)點(diǎn) A...

    iOS122 評(píng)論0 收藏0
  • 知識(shí)整理CSS

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

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

    摘要:盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中,每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(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í)時(shí)間 閱讀10分鐘 什么是盒模型 每一個(gè)文檔中,每...

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

    摘要:盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中,每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(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í)時(shí)間 閱讀10分鐘 什么是盒模型 每一個(gè)文檔中,每...

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

    摘要:當(dāng)元素在容器中被滾動(dòng)超過指定的偏移值時(shí),元素在容器內(nèi)固定在指定位置。詳見浮動(dòng)與清除浮動(dòng)浮動(dòng)相關(guān)知識(shí)屬性的取值元素向左浮動(dòng)。是相對(duì)長度單位,相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。 這些個(gè)知識(shí)點(diǎn)是我個(gè)人認(rèn)為的,下面我們就來看看這些個(gè)知識(shí)點(diǎn)。 1.怎么讓一個(gè)不定寬高的 DIV,垂直水平居中? 使用Flex 只需要在父盒子設(shè)置:display: flex; justify-content: cent...

    masturbator 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

tomener

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<