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

資訊專欄INFORMATION COLUMN

重新定義BFC

harryhappy / 3184人閱讀

摘要：大家花秒的時間組織組織語言，給下個定義，看看咱們的想法是不是一致的，哈哈。

先給BFC下個定義

CSS里的BFC可真的是一個老生長談的問題，網(wǎng)上的資料很多，介紹的也很詳細(xì)，但是看完之后，還是不知道BFC到底是個啥東西，似懂非懂，它到底是個標(biāo)準(zhǔn)呢，還是一套約定俗成的編碼規(guī)范呢，A和B兩個DIV，BFC化到底指的是A還是指的是B呢。大家花5秒的時間組織組織語言，給BFC下個定義，看看咱們的想法是不是一致的，哈哈。

我給BFC下的定義是：BFC就是把因為某些情況下（比如脫離文檔流），block元素被破壞的特性，恢復(fù)回來

按照上面的定義，我舉幾個例子來說明一下

高度塌陷問題

現(xiàn)象比較簡單，子元素float：left，父元素的高度就塌陷了。這就是因為子元素的float導(dǎo)致父元素block特性：高度變沒了，按正常的block元素的特性，父元素的高度應(yīng)該和子元素高度是一致的（這句說的不嚴(yán)謹(jǐn)，不過為了說明重點，這里不詳細(xì)說明父元素的高度），現(xiàn)在很明顯不是。

現(xiàn)在BFC上場了，為了把父元素的高度特性找回來，讓他的高度和子元素相同，我們根據(jù)BFC的觸發(fā)條件，給父元素增加overflow:hidden或display:inline-block，結(jié)果就是這樣：

margin塌陷問題

margin塌陷我們也經(jīng)常遇到，效果如下：

題外：這是w3c的規(guī)定：兩個盒子垂直排列時，取較大的margin。這個不應(yīng)該算是問題，但是和我們排版的習(xí)慣相背，所以我們還得解決。

現(xiàn)在BFC又要出場了，這次是為了解決兩個div間隔相加的特性，這次我們把紅背景的元素增加display:inline-block，效果如下：

左右自適應(yīng)布局

我們先看一個常見的現(xiàn)象：

那現(xiàn)在問題來了，一個有獨立人格的div，是不能容忍自己被其他div搶風(fēng)頭的，雖然那個小的脫離的文檔流?，F(xiàn)在又該輪到BFC出場了，我們把大的div設(shè)置overflow:hidden或display:inline-block，就會有下面的效果：

這里我們稍加改造，再次發(fā)揮BFC的能量。我們設(shè)置右側(cè)DIV的樣式：width：auto，效果就是這樣：

此效果的代碼：




    
float：left

    
我是自適應(yīng)的




body {
    background-color:lightgray;
    padding:20px;
}
.inner {
    width:260px;
    height:50px;
    border-radius:5px;
    line-height:50px;
}
.left {
    width:100px;
    height:100px;
    background-color:rgba(0,255,0,0.5);
    float:left;
    
}
.right {
    width:auto;
    height:150px;
    background-color:rgba(255,0,0,0.5);
    overflow:hidden;
}

.wrap {
    border:1px solid black;
    padding:5px;
    border-radius:10px;
    overflow:hidden;
}

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/112380.html

相關(guān)文章

  • 【CSS基礎(chǔ)】CSS常見概念

    摘要：在中主要通過四個部分來描述，分別為。對于元素，負(fù)值會完全覆蓋前一個元素，會影響后面元素一起移動對于元素，元素脫離了普通文檔流，對其他元素沒有影響對于元素，可以通過負(fù)值進行覆蓋，最常見的應(yīng)用是三列布局。 瀏覽器渲染過程 不同的瀏覽器渲染過程實際上并不相同，但是依舊存在相一致的部分，大致過程如下所示：showImg(https://segmentfault.com/img/bVHJfZ?w...

    hsluoyz 評論0 收藏0

  • 深入清除浮動原理

    摘要：如下圖所示可以看到父元素的高度為為了解決這種狀況就要清除浮動了。下面詳細(xì)看一下這兩大類清除浮動的方式及原理。所以，避免穿透啊，清除浮動什么的也好理解了。 關(guān)于浮動 設(shè)置為浮動的元素會脫離當(dāng)前文檔流，向左或向右移動直到邊緣遇到另一個浮動元素或者到達邊界。普通元素不會對齊造成影響。 浮動是把雙刃劍，在給我們的布局帶來便利的同時有一些缺點需要我們?nèi)ソ鉀Q。例如最常見的父元素塌陷。如下圖所示：...

    freewolf 評論0 收藏0

  • 深入理解BFC

    摘要：最常見的有簡稱和簡稱。計算的高度時，浮動元素也參與計算。遇到這種情形，我們?nèi)绾翁幚硖幚矸椒ㄆ鋵嵱泻芏?，在元素中添加或者使其父元素形成一個也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個問題，只需要把把父元素變成一個就行了。 一、什么是BFC Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，...

    legendmohe 評論0 收藏0

  • 深入理解BFC

    摘要：最常見的有簡稱和簡稱。計算的高度時，浮動元素也參與計算。遇到這種情形，我們?nèi)绾翁幚硖幚矸椒ㄆ鋵嵱泻芏?，在元素中添加或者使其父元素形成一個也可以在元素中添加或是這些都可以有效解決父子元素重疊問題。解決這個問題，只需要把把父元素變成一個就行了。 一、什么是BFC Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，...

    testHs 評論0 收藏0

發(fā)表評論

0條評論

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