BFC和CSS的兩個BUG 20181223

2022-01-19 21:58:00 字數 1359 閱讀 5210

當為一對普通流中的父子盒子中的子盒子設定margin-top時,如果父盒沒有設定乙個border-top,且雙方的margin-top都為正的時候,那麼就會存在有乙個高度塌陷的問題。

具體的表現是父盒和子盒共享margin-top,如果他們同時具有margin-top的時候,以值最大的為準。

該問題的解決方法是使用偽元素來解決。也可以用bfc來彌補。

當兄弟元素在文字流中,並且兄弟元素之間的的垂直margin都為正時,margin-topmargin-bottom會合併,選擇值最大的。

這個問題可以使用bfc來解決,但是實際開發中是禁止隨意改動html的結構的。所以一般都是直接只設定margin-top或者margin-bottom

::before::after這兩個偽元素分別可以建立在在選定element的子元素的邏輯最前和最後。他們兩個一開始都是行內元素,同時具有乙個獨特的屬性content,這個屬性的值為偽元素的內容。

css的 content css 屬性用於在元素的 ::before 和 ::after 偽元素中插入內容。使用content 屬性插入的內容都是匿名的可替換元素。

注意:當你想使用偽元素來讓乙個容器包裹住浮動的塊元素的話,當在偽元素上面使用clear屬性的時候要注意到,該屬性只能應用在塊元素之上。

position: absolute;

display: inline-block;

float: left/right;

overflow: hidden;

這是常見的幾種觸發的方式,具體請見mdn的塊格式化上下文篇。

注意:凡是使用了float的塊元素,在系統中,就像是他變成了inline-block一樣(和inline-block的區別是多行文字環繞著它,而inline-block只會和文字處在一行),文字浮動在他的周圍。

浮動流:

浮動流中的元素,塊級元素看不到(就好像是不在乙個空間一樣),bfc能看到,inline能看到

CSS中的兩個Bug和BFC

先看兩個bug 第乙個bug margin塌陷。margin top 100px margin left 100px width 100px height 100px background color orange content可以看到第一步增加的 子元素移動了,第二步增加的 沒有讓子元素移動,這...

最近遇到的兩個BUG

最近遇到兩個bug 第一 我要用jdbc連線客戶的oracle資料庫客戶版本為11g 由於我的測試錯誤我覺得使用的class12這個包版本有點老,好像查不出oracle11g的資料 經證實是我錯了 所以我換了oracle11g的ojdbc6 g驅動包。sql select instance name...

兩個疑似WLC軟體BUG的現象

最近在工作中觀察到兩個疑似wlc軟體bug的現象,現描述如下,並提供部分緩解方法。環境 wlc 4402 使用port1連線sw01,port2連線sw02,wlc sw01 sw02之間所有的鏈路均為二層,並使用trunk。wlc軟體版本為7.0.251.2。故障一 wlc上配置了乙個介面 int...