十分鐘復習CSS盒模型與BFC

verano 發布于2019-08-02 10:48 / 999人閱讀

摘要：盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型

css盒模型與BFC

本文為收集整理總結網上資源

旨在系統復習css盒模型與bfc

節省復習時間

閱讀10分鐘

什么是盒模型

每一個文檔中，每個元素都被表示為一個矩形的盒子,它都會具有內容區、padding、border、margin

.png)

盒模型主要分兩種

標準盒模型

IE盒模型(怪異盒模型)

兩者的區別：

標準盒模型的寬高則為內容區域的寬高

IE盒模型則寬高為 border + padding + 內容區

如何切換盒子模型?

使用box-sizing來進行切換

border-box 切換為IE盒模型

content-box 默認屬性為標準模式

盒模型的邊距重疊

主要分三種重疊，重疊規則：一大一小取最大,一正一負取和

相鄰元素之間的重疊

父子嵌套的重疊

空的塊級元素

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渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。

塊級盒

每個塊級盒子都會參與塊格式化上下文（block formatting context）的創建，而每個塊級元素都會至少生成一個塊級盒子，即主塊級盒子（principal block-level box）

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

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

塊級盒子的幾種特性

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

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

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

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

如何創建BFC?

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

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

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

overflow 值不為 visible 的塊元素

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

BFC的應用？

清除浮動

布局

解決塊級盒邊距重疊

布局

原理就是觸發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-布局概念關于CSS-BFC深入理解

GPU云服務器云服務器盒模型盒模型html嗎簡述html盒模型對象模型與數據模型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52564.html

十分鐘復習CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統復習css盒模型與bfc 節省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

suxier 2019-08-30 15:53 評論0 收藏0
一篇文章帶拿下盒模型BFC渲染機制

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

DangoSky 2019-08-30 15:55 評論0 收藏0
CSS盒模型與BFC

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

mmy123456 2019-08-29 17:29 評論0 收藏0
常見的面試問題：【CSS】CSS盒模型

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

android_c 2019-08-30 15:44 評論0 收藏0