整理css之BFC原理

tomener 發布于2019-08-30 14:12 / 1781人閱讀

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

首先回顧下CSS常出現的幾個樣式問題
1當子元素添加上邊距時，父元素也會向下移動

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

2子元素浮動后，父級元素檢測不到其高度
3當元素浮動后，兄弟元素的內容超過其高度后會侵占它的區域（其實問題原因與第二點類似）

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

4同級元素間的邊距重疊時，如兩個元素間有上下邊距，只會有值大的邊距生效。

解決方法:
給其中一個元素加上一層標簽包裹，并給標簽加上滿足BFC的樣式

問題出現原因:
1 元素之間的邊距無法識別是因為它們的邊距合并到了一起，瀏覽器只能識別較大的那個值
2 元素浮動后或絕對定位后，高度將無法識別，所以可能會影響父級元素

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

第一次寫，寫得不好,請大家多多指教哈哈哈哈

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115857.html

【芝士整理】CSS基礎圖譜

摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動產生，元素周圍的內容轉換為圍繞元素排列。選擇器注意點屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含選擇器組 A > B - 直接子節點 A + B - 下一個兄弟節點 A...

iOS122 2019-08-30 15:54 評論0 收藏0
知識整理之CSS篇

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

ermaoL 2019-08-30 15:55 評論0 收藏0
十分鐘復習CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統復習css盒模型與bfc 節省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

verano 2019-08-02 10:48 評論0 收藏0
十分鐘復習CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統復習css盒模型與bfc 節省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

suxier 2019-08-30 15:53 評論0 收藏0
CSS知識點及技巧整理

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

masturbator 2019-08-30 14:02 評論0 收藏0