CSS盒模型与BFC

头像
anetin
    阅读 5 分钟

    1.什么是CSS盒模型

    1.1 概念

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

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

    1.2 两种盒模型的区别：

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

    clipboard.png

    1.3 CSS如何设置两种模型

    CSS3 的属性 box-sizing

    /* 标准模型 默认属性*/
    box-sizing:content-box; 
       
    /*IE模型*/
    box-sizing:border-box;

    1.4 JS如何设置获取盒模型对应的宽和高

    dom.style.width/height    //局限在内联样式，对style节点和外链CSS的宽高是获取不到的

dom.currentStyle.width/height    //得到的是渲染后的样式，局限在只有IE支持

window.getComputedStyle(dom).width/height    //得到的是渲染后的样式，兼容Firefox、chrome会好一些 

dom.getBoundingClientRect().width/height    // 根据元素在视窗中的绝对位置来获取宽高的，得到四个属性值（top,left,width,height）

dom.offsetWidth/offsetHeight

    1.5 盒模型的边距重叠

    主要分三种重叠， 重叠规则：一大一小取最大,一正一负取和
    1.相邻元素之间的重叠
    2.父子嵌套的重叠
    3.空的块级元素

    1.相邻元素之间的重叠
    clipboard.png

    // 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.父子嵌套重叠

    clipboard.png

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

    空的块级元素与相邻元素
    clipboard.png

    1.6 BFC (边距重叠处理方案)

    1.6.1 BFC是什么

    在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。
    Box: CSS布局的基本单位
    Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

    1) block-level box:display 属性为 block, list-item, table 的元素，会生成
    block-level box。并且参与 block fomatting context；
    2) inline-level box:display属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与inline formatting context；
    3) run-in box: css3 中才有， 这儿先不讲了。

    Formatting context
    　　Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

    　　CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

    BFC 定义

    BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

    1.6.2 BFC布局规则：

    1. 内部的Box会在垂直方向，一个接一个地放置，每个盒子水平占满整个容器空间
    2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
    3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
    4. BFC的区域不会与float box重叠。
    5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
    6. 计算BFC的高度时，浮动元素也参与计算

    1.6.3 哪些元素会生成BFC?

    1. 根元素或包含根元素的元素
    2. float属性不为none
    3. position为absolute或fixed
    4. display为inline-block, table-cell, table-caption, flex, inline-flex
    5. overflow不为visible

    1.6.4 BFC的应用

    1. 自适应两栏布局

    <style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

    clipboard.png

    根据BFC布局规则第3条：

    每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

    　　因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。

    　　根据BFC布局规则第四条：

    BFC的区域不会与float box重叠。

    我们可以通过通过触发main生成BFC， 来实现自适应两栏布局。

    .main {
    overflow: hidden;
}

    当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。效果如下：

    clipboard.png

    2. 清除内部浮动

    <style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

    根据BFC布局规则第六条：

    计算BFC的高度时，浮动元素也参与计算

    　　为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。

    　　代码：

    .par {
    overflow: hidden;
}

    clipboard.png

    3. 防止垂直 margin 重叠

    <style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

    clipboard.png

    我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。

    <style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

    clipboard.png

    其实以上的几个例子都体现了BFC布局规则第五条：

    BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

    　　因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

    cssbfc
    anetin
    370 声望9 粉丝
    « 上一篇
    异步

    引用和评论

    推荐阅读
    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.1k

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 1.8k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 11阅读 1.4k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 938

    头像
    CSS炫酷光晕按钮特效

    南城FE赞 3阅读 858

    0 条评论
    得票最新