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

資訊專欄INFORMATION COLUMN

垂直方向margin重疊原因與解決方法

moven_j / 678人閱讀

摘要：我們經(jīng)常寫樣式的時候會遇到垂直方向重疊的問題，如下代碼可以看出由于，應(yīng)該顯示但是只顯示，是什么原因呢這就涉及到什么是，解釋為塊級格式化上下文一個元素要創(chuàng)建，則滿足下列的任意一個或多個條件即可的值不是。

我們經(jīng)常寫樣式的時候會遇到垂直方向margin重疊的問題，如下代碼：?

    


    

        
first p

        
second p

可以看出由于margin-top:20px;margin-bottom:20px，應(yīng)該顯示40px但是只顯示20px，是什么原因呢？這就涉及到BFC

什么是BFC：Block Fromatting Context，解釋為塊級格式化上下文

一個HTML元素要創(chuàng)建BFC，則滿足下列的任意一個或多個條件即可：

1、float的值不是none。（float:left 或者float:right）

2、position的值不是static或者relative。（position:absolute或者position:fixed）

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible（overflow:hidden、overflow:scroll）

5、父元素與正常文件流的子元素（非浮動子元素）自動形成一個BFC

BFC中盒子怎么對齊
在一個BFC中，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會垂直的沿著其父元素的邊框排列。
W3C給出得規(guī)范是：在BFC中，每一個盒子（子元素）的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣）。浮動也是如此（盡管盒子里的行盒子 Line Box 可能由于浮動而變窄）。

正常情況下一個BFC是由父元素和子元素組成的，有時候也只有一個父元素

BFC的特征

（1）所有子元素（包含浮動元素）與容器（父元素）左邊對齊

（2）屬于同一個BFC的父元素和子元素，相鄰的父子或者兄弟間margin垂直方向會重疊，若2個元素屬于不同的BFC，則垂直方向不會重疊

（3）可以自動撐開容器（若子元素是float的，父元素設(shè)置overflow:hidden，父元素就形成一個BFC）

防止margin重疊我們就可以從BFC的特征入手，讓2個相鄰的元素不是屬于一個BFC

    



    

        
first p

        

            
second p

由于class 為second的元素外面套了一個div（一定要套一個div，因為overflow:hidden 是設(shè)置在父元素上，里面一定要有子元素），并設(shè)置了overflow:hidden，相當(dāng)于新創(chuàng)建了一個新的BFC, first 與second 屬于2個BFC所以margin不會重疊

另一種方法，子元素浮動，浮動相當(dāng)于新建了BFC,所以不會重疊

    



    

        
first p

        
second p

相鄰的子元素2個都浮動或者下面的一個浮動

更多前端知識請見
微信公眾號：前端之攻略

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

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

相關(guān)文章

  • margin詳解

    摘要：二的賦值普通元素的百分比都是相對于容器的寬度計算。絕對定位元素的百分比，絕對定位元素的百分比是相對于第一個定位祖先元素的寬度計算應(yīng)用寬高自適應(yīng)矩形傳送門之所以會是，是因為垂直方向上發(fā)生重疊。 一. margin對尺寸的影響 1.可視尺寸 a.適用于沒有設(shè)定width/height的普通block水平元素float元素、absolute/fixed元素、inline元素、table-ce...

    darry 評論0 收藏0

  • 談?wù)凚FC與ie特有屬性hasLayout

    摘要：當(dāng)一個內(nèi)聯(lián)元素想獲得就要使用這個屬性。下因為導(dǎo)致的浮動元素與普通元素之間產(chǎn)生代碼如下我是浮動元素我是后面的文字，用來測試的正常情況下解決方式加一個的不只是文字，的浮動元素也會和內(nèi)聯(lián)元素產(chǎn)生的值。設(shè)置屬性的元素不和任何元素發(fā)生合并。 發(fā)現(xiàn)我好久沒更新博文了=-=這里把我之前在博客園寫過的一篇關(guān)于BFC的文章粘貼過來，順便自己也再次做個總結(jié)。 最近看了一篇總結(jié)ie常見bug的文章，里面提...

    CodeSheep 評論0 收藏0

  • 談?wù)凚FC與ie特有屬性hasLayout

    摘要：當(dāng)一個內(nèi)聯(lián)元素想獲得就要使用這個屬性。下因為導(dǎo)致的浮動元素與普通元素之間產(chǎn)生代碼如下我是浮動元素我是后面的文字，用來測試的正常情況下解決方式加一個的不只是文字，的浮動元素也會和內(nèi)聯(lián)元素產(chǎn)生的值。設(shè)置屬性的元素不和任何元素發(fā)生合并。 發(fā)現(xiàn)我好久沒更新博文了=-=這里把我之前在博客園寫過的一篇關(guān)于BFC的文章粘貼過來，順便自己也再次做個總結(jié)。 最近看了一篇總結(jié)ie常見bug的文章，里面提...

    iliyaku 評論0 收藏0

  • margin詳解

    摘要：屬性指定了盒的區(qū)的寬度。簡寫屬性一次性設(shè)置四周的，而其它屬性只設(shè)置它們各側(cè)的。 margin屬性指定了盒的margin區(qū)的寬度。margin簡寫屬性一次性設(shè)置四周的margin，而其它margin屬性只設(shè)置它們各側(cè)的。這些屬性適用于所有元素，但非替換行內(nèi)元素上的豎直margin將不會產(chǎn)生任何效果 margin與容器尺寸 margin與可視尺寸 margin與可視尺寸 只適用于沒有設(shè)定...

    stonezhu 評論0 收藏0

  • CSS: 潛藏著的BFC

    摘要：而就潛藏在其中，當(dāng)你修改樣式時，一不小心就能觸發(fā)它而毫無察覺，因此沒有意識到的神奇之處。實例解決侵占浮動元素的問題我們知道浮動元素會脫離文檔流，然后浮蓋在文檔流元素上。 在寫樣式時，往往是添加了一個樣式，又或者是修改了某個屬性，就達到了我們的預(yù)期。而BFC就潛藏在其中，當(dāng)你修改樣式時，一不小心就能觸發(fā)它而毫無察覺，因此沒有意識到BFC的神奇之處。 一、什么是BFC（Block Form...

    learn_shifeng 評論0 收藏0

發(fā)表評論

0條評論

moven_j

男|高級講師

TA的文章

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