国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

邊距重疊以及解決方案BFC

NervosNetwork / 3026人閱讀

摘要：邊距重疊統(tǒng)一的解決方案設(shè)置或者或者觸發(fā)邊距重疊有一下三種情況首先把所有的格式清空邊距重疊父子元素之間塊級父元素與第一個或者最后一個子元素父元素不存在上邊框上內(nèi)邊距內(nèi)聯(lián)元素清除浮動。

邊距重疊 
統(tǒng)一的解決方案；設(shè)置padding或者border或者觸發(fā)BFC
邊距重疊有一下三種情況：

首先把所有的margin格式清空


  邊距重疊

1.父子元素之間
塊級父元素與第一個或者最后一個子元素（父元素不存在上邊框、上內(nèi)邊距、內(nèi)聯(lián)元素、清除浮動）。即這個父元素對外展現(xiàn)出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者。父元素的高度：100 或者110 都對.沒有overflow: hidden的時候父邊距和子邊距重疊了，父的高度只有100.加了overflow: hidden，父元素成了新的bfc,就解決了邊距重疊的現(xiàn)象，margin-top 沒有塌陷進去，所以父的高度是110px;

2.相鄰兄弟姐妹元素

兩個div的邊距是50px 而不是90，取了最大值，若為負值，則取絕對值最大的，若一正一負，則取兩者的和。

3.空塊元素
如果存在一個空的塊級元素， border、 padding、 inline content 、height 、min-height 都不存在，那么上下邊距居中將沒有任何阻礙，上下邊距將合并。取值規(guī)則同2一樣


  
這個段落的和下面段落的距離將為20px


  


  
這個段落的和上面段落的距離將為20px
解決方案：BFC講解 
BFC (block formatting context) 塊級格式化上下文 =====》是為了解決邊距塌陷（邊距重疊）問題。
基本概念

BFC (block formatting context) 塊級格式化上下文

基本原理

即布局規(guī)則
1、每個元素的margin box的左邊，與包含塊border box 的左邊相接觸，即使浮動也如此
2、BFC區(qū)域不會與float box 重疊
3、BFC是一個隔離的獨立的容器，容器里面的子元素的不會影響到外面的元素，反之亦然。
4、計算BFC高度的時候，浮動元素也參與計算。

哪些元素生成BFC 
1、overflow: 不為visible
2、postion: absoluted, fixed
3、float 不為none
4、根元素
5、display:inline-block	able-cell	able-captionflexinline-flex
應(yīng)用和解決了什么問題

1、自適應(yīng)兩欄布局

2、清除內(nèi)部浮動

3、防止邊距重疊(BFC中子元素邊距重疊)

兩個div 中間取了最大值30為重疊了，在p外面包裹一層容器，并觸發(fā)該容器生成一個
BFC。那么兩個P便不屬于同一個BFC，就不會發(fā)生margin重疊了.

總結(jié)：因為BFC內(nèi)部的元素和外部的元素絕對不會互相影響，因此， 當(dāng)BFC外部存在浮動時，它不應(yīng)該影響B(tài)FC內(nèi)部Box的布局，BFC會通過變窄，而不與浮動有重疊。同樣的，當(dāng)BFC內(nèi)部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。

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

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

相關(guān)文章

  • 邊距重疊以及解決方案BFC

    摘要：邊距重疊統(tǒng)一的解決方案設(shè)置或者或者觸發(fā)邊距重疊有一下三種情況首先把所有的格式清空邊距重疊父子元素之間塊級父元素與第一個或者最后一個子元素父元素不存在上邊框上內(nèi)邊距內(nèi)聯(lián)元素清除浮動。 邊距重疊 統(tǒng)一的解決方案；設(shè)置padding或者border或者觸發(fā)BFC 邊距重疊有一下三種情況： 首先把所有的margin格式清空 邊距重疊 html *{ margi...

    Tychio 評論0 收藏0

  • 邊距重疊與BFC

    摘要：邊距重疊邊界重疊是指兩個或多個盒子可能相鄰也可能嵌套的相鄰邊界其間沒有任何非空內(nèi)容補白邊框重合在一起而形成一個單一邊界。兄弟元素的邊界重疊可以看到和和之間的間距不是，發(fā)生了邊距重疊是取了它們之間的最大值。 邊距重疊 邊界重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內(nèi)容、補白、邊框)重合在一起而形成一個單一邊界。兩個或多個塊級盒子的垂直相鄰邊界會重合，它們的邊...

    BicycleWarrior 評論0 收藏0

  • CSS盒模型完整介紹

    摘要：盒模型的認(rèn)識基本概念標(biāo)準(zhǔn)模型模型。如圖由于盒模型的怪異模式，模型和標(biāo)準(zhǔn)模型的內(nèi)容計算方式不同。設(shè)置為標(biāo)準(zhǔn)模型，它的元素寬度。這里就不介紹，大家可以自行搜索。 盒模型的認(rèn)識 基本概念：標(biāo)準(zhǔn)模型+IE模型。 包括margin,border,padding,content 標(biāo)準(zhǔn)模型和IE模型的區(qū)別 css如何設(shè)置獲取這兩種模型的寬和高 js如何設(shè)置獲取盒模型對應(yīng)的寬和高 根據(jù)盒模型解釋邊距...

    qqlcbb 評論0 收藏0

  • 面試官：談?wù)勀銓?CSS 盒模型的認(rèn)識?（你確定會？）

    摘要：從上圖可以看到盒子模型的范圍也包括，和標(biāo)準(zhǔn)盒子模型不同的是盒子模型的部分包含了和。運行效果以上就是的清除浮動原理。愿你成為終身學(xué)習(xí)者 題目：談?wù)勀銓?CSS 盒模型的認(rèn)識 涉及知識點(層層遞進): 基本概念：標(biāo)準(zhǔn)模型+ IE模型(區(qū)別) CSS如何設(shè)置這兩種模型 JS如何設(shè)置獲取盒子模型對應(yīng)的寬和高 實例題(根據(jù)盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...

    CocoaChina 評論0 收藏0

  • 面試官：談?wù)勀銓?CSS 盒模型的認(rèn)識?（你確定會？）

    摘要：從上圖可以看到盒子模型的范圍也包括，和標(biāo)準(zhǔn)盒子模型不同的是盒子模型的部分包含了和。運行效果以上就是的清除浮動原理。愿你成為終身學(xué)習(xí)者 題目：談?wù)勀銓?CSS 盒模型的認(rèn)識 涉及知識點(層層遞進): 基本概念：標(biāo)準(zhǔn)模型+ IE模型(區(qū)別) CSS如何設(shè)置這兩種模型 JS如何設(shè)置獲取盒子模型對應(yīng)的寬和高 實例題(根據(jù)盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...

    Channe 評論0 收藏0

發(fā)表評論

0條評論

NervosNetwork

男|高級講師

TA的文章

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