成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

十分鐘復(fù)習(xí)CSS盒模型與BFC

verano / 1004人閱讀

摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型

css盒模型與BFC

本文為收集整理總結(jié)網(wǎng)上資源

旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc

節(jié)省復(fù)習(xí)時間

閱讀10分鐘

什么是盒模型 
每一個文檔中，每個元素都被表示為一個矩形的盒子,它都會具有內(nèi)容區(qū)、padding、border、margin

.png)

盒模型主要分兩種

標(biāo)準(zhǔn)盒模型

IE盒模型(怪異盒模型)

兩者的區(qū)別：

標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高

IE盒模型則寬高為 border + padding + 內(nèi)容區(qū)

如何切換盒子模型? 
使用box-sizing來進(jìn)行切換

border-box 切換為IE盒模型

content-box 默認(rèn)屬性 為標(biāo)準(zhǔn)模式

盒模型的邊距重疊

主要分三種重疊， 重疊規(guī)則：一大一小取最大,一正一負(fù)取和

相鄰元素之間的重疊

父子嵌套的重疊

空的塊級元素

1.相鄰元素之間 

// css
* {
  margin:0;
  padding:0;
  border:0;
}

#d1 {
  width:100px;
  height:100px;
  margin-top:20px;
  margin-bottom:20px;
  background-color:red;
}

#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
  background-color:blue;
}

// html
2.父子嵌套重疊 

// css

* {
  margin:0;
  padding:0;
  border:0;
}

#outer {
  width:300px;
  height:300px;
  background-color:red;
  margin-top:20px;
}

#inner {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:10px;
}

// html
3.空的塊級元素

BFC (邊距重疊處理方案) 什么是BFC 
塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的區(qū)域，也是浮動元素與其他元素的交互限定區(qū)域。
塊級盒 
每個塊級盒子都會參與塊格式化上下文（block formatting context）的創(chuàng)建，而每個塊級元素都會至少生成一個塊級盒子，即主塊級盒子（principal block-level box）

有時候定義了一個塊級元素,設(shè)置了寬高雖然占據(jù)一行在chrome下會發(fā)現(xiàn)除了元素以外的一個包裹盒子像margin一樣的顏色,這個就是塊級盒;

每一個塊級元素會生成一個

塊級盒子的幾種特性

塊級盒會在垂直方向，一個接一個地放置，每個盒子水平占滿整個容器空間

塊級盒的垂直方向距離由上下 margin 決定，同屬于一個 BFC 中的兩個或以上塊級盒的相接的 margin 會發(fā)生重疊

BFC 就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。

計算 BFC 的高度時，浮動元素也參與計算

如何創(chuàng)建BFC?

根元素或包含根元素的元素

浮動元素（元素的 float 不是 none）

絕對定位元素（元素的 position 為 absolute 或 fixed）

overflow 值不為 visible 的塊元素

display的值為inline-block、table-cell、table-caption

BFC的應(yīng)用？

清除浮動

布局

解決塊級盒邊距重疊

布局

原理就是觸發(fā)BFC重新計算元素尺寸

// html




    開始清除浮動清除浮動清除浮動....



// css
    *{
        margin: 0;
        padding: 0;
    }
        div{
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        p{
            background: #f0faa5;
            overflow: hidden;
        }
清除浮動

// html


        

            float1    
        

        

            float2
        

    

    
//css
*{
    margin: 0;
    padding: 0;
}
div{
    width: 100px;
    height: 100px;
    background: green;
    float: left;
}
.div2{
    background: red;
}
.divwrap{
    border:3px solid #000;
    overflow: hidden;
}
解決邊距重疊

// html


        

            hello world
        

    


    

        hello world
    

    

        hello world
    


// css
    *{
        margin: 0;
        padding: 0;
    }
    .BFC{
        overflow:hidden;
    }
    p{
        color:black;
        background:#D499B9;
        line-height:100px;
        width:200px;
        text-align:center;
        margin:50px;
    }
最后 
最后感謝每個閱讀的小伙伴與所有寫博客分享的人
參考資料

MDN-CSS盒模型

MDN-外邊距合并

w3school-外邊距重疊

MDN-視覺格式化模型

MDN-塊格式化上下文

芋頭君-CSS之BFC詳解

OBKoro1-布局概念 關(guān)于CSS-BFC深入理解

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52564.html

相關(guān)文章

  • 十分鐘復(fù)習(xí)CSS盒模型與BFC

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時間 閱讀10分鐘 什么是盒模型 每一個文檔中，每...

    suxier 評論0 收藏0

  • 一篇文章帶拿下盒模型BFC渲染機(jī)制

    摘要：它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。一個的范圍包含創(chuàng)建該上下文元素的所有子元素，但不包括創(chuàng)建了新的子元素的內(nèi)部元素。 走在前端的大道上 本篇將自己讀過的相關(guān) 盒模型BFC 文章中，對自己有啟發(fā)的章節(jié)片段總結(jié)在這（會對原文進(jìn)行刪改）,會不斷豐富提煉總結(jié)更新。 一.常見定位方案 在講 BFC 之前，我們先來了解一下常見的...

    DangoSky 評論0 收藏0

  • CSS盒模型與BFC

    摘要：什么是盒模型概念每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內(nèi)容區(qū)。不同類型的，會參與不同的一個決定如何渲染文檔的容器，因此內(nèi)的元素會以不同的方式渲染。最常見的有簡稱和簡稱。根據(jù)布局規(guī)則第四條的區(qū)域不會與重疊。 1.什么是CSS盒模型 1.1 概念 每一個文檔中，每個元素都被表示為一個矩形的盒子,它都會具有內(nèi)容區(qū)、padding、border、margin。盒模型分為兩種：...

    mmy123456 評論0 收藏0

  • 常見的面試問題：【CSS】CSS盒模型

    摘要：標(biāo)準(zhǔn)盒模型盒子總寬度高度。以上支持，除此外還可以取到相對于視窗的上下左右的距離。包括高度寬度內(nèi)邊距和邊框，不包括外邊距。主要看怎么父元素的盒模型如何設(shè)置。空元素的邊距重疊是取與的最大值。 一、概念 CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、實際內(nèi)容（content）四個屬性。CSS盒模型：標(biāo)準(zhǔn)模...

    android_c 評論0 收藏0

發(fā)表評論

0條評論

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