css盒模型与BFC

1. 本文为收集整理总结网上资源
2. 旨在系统复习css盒模型与bfc
3. 节省复习时间
4. 阅读10分钟

什么是盒模型

每一个文档中，每个元素都被表示为一个矩形的盒子,它都会具有内容区、padding、border、margin

.png)

盒模型主要分两种

1. 标准盒模型
2. IE盒模型(怪异盒模型)

两者的区别：

1. 标准盒模型的宽高则为内容区域的宽高
2. IE盒模型则宽高为 border + padding + 内容区

如何切换盒子模型?

使用box-sizing来进行切换

1. border-box 切换为IE盒模型
2. content-box 默认属性 为标准模式

盒模型的边距重叠

主要分三种重叠， 重叠规则：一大一小取最大,一正一负取和

1. 相邻元素之间的重叠
2. 父子嵌套的重叠
3. 空的块级元素

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
<div id="d1">
</div>

<div id="d2">
</div>

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 
<div id="outer">
  <div id="inner">
  </div>
</div>

3.空的块级元素

BFC (边距重叠处理方案)

什么是BFC

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

块级盒

每个块级盒子都会参与块格式化上下文（block formatting context）的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（principal block-level box）

有时候定义了一个块级元素,设置了宽高虽然占据一行在chrome下会发现除了元素以外的一个包裹盒子像margin一样的颜色,这个就是块级盒;

每一个块级元素会生成一个

块级盒子的几种特性

1. 块级盒会在垂直方向，一个接一个地放置，每个盒子水平占满整个容器空间
2. 块级盒的垂直方向距离由上下 margin 决定，同属于一个 BFC 中的两个或以上块级盒的相接的 margin 会发生重叠
3. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
4. 计算 BFC 的高度时，浮动元素也参与计算

如何创建BFC?

1. 根元素或包含根元素的元素
2. 浮动元素（元素的 float 不是 none）
3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
4. overflow 值不为 visible 的块元素
5. display的值为inline-block、table-cell、table-caption

BFC的应用？

1. 清除浮动
2. 布局
3. 解决块级盒边距重叠

布局

原理就是触发BFC重新计算元素尺寸

// html
<div></div>
<p>
    开始清除浮动清除浮动清除浮动....
</p>

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

清除浮动

// html
<section class="divwrap">
        <div class="div1">
            float1    
        </div>
        <div class="div2">
            float2
        </div>
    </section>
    
//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
<div class="BFC">
        <p>
            hello world
        </p>
    </div>

    <p>
        hello world
    </p>
    <p>
        hello world
    </p>

// css
    *{
        margin: 0;
        padding: 0;
    }
    .BFC{
        overflow:hidden;
    }
    p{
        color:black;
        background:#D499B9;
        line-height:100px;
        width:200px;
        text-align:center;
        margin:50px;
    }

最后

最后感谢每个阅读的小伙伴与所有写博客分享的人

参考资料

1. MDN-CSS盒模型
2. MDN-外边距合并
3. w3school-外边距重叠
4. MDN-视觉格式化模型
5. MDN-块格式化上下文
6. 芋头君-CSS之BFC详解
7. OBKoro1-布局概念 关于CSS-BFC深入理解