BFC与盒模型 | Rio的个人博客

总览

盒模型、BFC笔记总结

# 盒模型

CSS 盒模型本质上是一个盒子，盒子包裹着HTML 元素，盒子由四个属性组成，从内到外分别是：content 内容、padding 内边距、border 边框、外边距 margin

content-box 默认值，使用标准盒子模型
border-box 使用IE盒子模型

标准盒模型 box-sizing: content-box 默认

width = content-width
height = content-height

1
2

怪异盒模型 box-sizing: border-box

width = content-width + padding-width + border-width
height = content-height + padding-height + border-height

1
2

# BFC

FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。

BFC是block formatting context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域，

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素

满足下列条件之一就可触发BFC

根元素，即HTML元素
float的值不为none
overflow的值不为visible
display的值为inline-block、flex、table-cell、table-caption
position的值为absolute或fixed

# BFC应用

清除浮动

    .container {
      background-color: #f1f1f1;
    }
    .cimg {
      margin-right: 10px;
      float: left;
      width: 100px;
      height: 100px;
    }
    .bfc{
      overflow: hidden;
    }

  <div class="container bfc">
    <img src="./7.png" alt="" class="cimg">
    <p>一段文字一段文字</p>
  </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

防止垂直margin合并

自适应两栏布局

  <style>
    div {
      width: 200px;
    }

    aside {
      background-color: yellow;
      float: left;
      width: 100px;
      height: 50px;
    }

    main {
      background-color: pink;
    }
  </style>
</head>

<body>
  <div>
    <aside></aside>
    <main>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</main>
  </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

为main设置 overflow: hidden;触发main元素的BFC，根据规则BFC的区域是独立的，不会与页面其他元素相互影响，且不会与float元素重叠，因此就可以形成两列自适应布局

# IFC

在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框

# 宽度计算

div1的 offsetWidth 为多少

  <style>
    #div1 {
      width: 100px;
      padding: 10px;
      border: 1px solid black ;
      margin: 10px;
    }
  </style>
<div id="div1"></div>

1
2
3
4
5
6
7
8
9
10

offsetWidth为内容宽度+内边距+边框 答案为122px

# 参考

CSS 的两种盒模型 - 知乎 (zhihu.com) (opens new window)