十分钟复习CSS盒模型与BFC

AnyBisks

2019-06-27

关注关注

css盒模型与BFC

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

什么是盒模型

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

十分钟复习CSS盒模型与BFC .png)

盒模型主要分两种

标准盒模型
IE盒模型(怪异盒模型)

两者的区别：

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

十分钟复习CSS盒模型与BFC

如何切换盒子模型?

使用box-sizing来进行切换

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

盒模型的边距重叠

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

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

1.相邻元素之间

十分钟复习CSS盒模型与BFC

// 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盒模型与BFC

// 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.空的块级元素

十分钟复习CSS盒模型与BFC

BFC (边距重叠处理方案)

什么是BFC

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

块级盒

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

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

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

块级盒子的几种特性

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

如何创建BFC?

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

BFC的应用？

清除浮动
布局
解决块级盒边距重叠

布局

十分钟复习CSS盒模型与BFC

原理就是触发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;
        }

清除浮动

十分钟复习CSS盒模型与BFC

// 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;
}

解决边距重叠

十分钟复习CSS盒模型与BFC

// 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;
    }