Hello World - 2023年10月
type: channel
link: https://blog.xunbaidu.com/2023/10/
description: ----------------------------------------------------------------------------------------
items: 包围盒和BFC

包围盒和BFC
type: item
date: 2023-10-31T00:32:08+08:00
description: 盒模型概念所有的HTML元素都被一个看不见的盒子包围着，这个盒子被称为盒模型（Box Model）。如图所示，是Chrome浏览器所绘制的某个元素的盒模型示意图，由内容区（content）、内边距（padding）、边框（border）、外边距（margin）。内容区指盒子的主要内容区域，用来显示和存储元素的“真实”内容，通常可由 width、min-width、max-width、height、min-height 和 max-height分别设置内容区的宽度、最小宽度、最大宽度、高度、最小高度、最大高度内边距指内容区与边框之间的距离，可使用padding属性设置或者padding-top、padding-bottom、padding-left、padding-right分别可设置上、下、左、右四个方向上的距离。内边距不支持设置负值，可以设置百分比，且按照宽度计算边框指内边距与外边距间的距离，可使用boder属性设置或者使用border-width、border-style、border-color分别设置边框的宽度、样式、颜色等属性外边距指元素边框周围一定距离的空间，与内边距类似，可使用padding属性设置或者margin-top、margin-bottom、margin-left、margin-right分别设置上、下、左、右四个方向上的距离。但外边距可设置负值，相邻元素之间的外边距大小遵循规则“正正按大，正负相加，负负最小”分类实际上，CSS的盒模型有两种，分别是标准盒模型和怪异盒模型，它们的区别主要体现在元素的width属性是否只包含内容区的宽度。标准盒模型在标准盒模型中，widht属性只包含内容区content的宽度。因此标准盒模型的宽度为：width+padding+border+magin。元素可通过设置box-sizing: content-box使用标准盒模型，这也是默认的属性。怪异盒模型（IE盒模型）在怪异盒模型中，width属性不仅包含内容区content宽度，还包括边框和内边距的宽度。因此标准盒模型的宽度为：width+magin。元素可通过设置box-sizing: border-box使用怪异盒模型。BFC概念块级盒子（Block-level Box）和行内盒子（Inline Box）块级元素和行内元素会生成上述盒模型所表达的块级盒子和行内盒子，这两种盒子类型是CSS中用来描述HTML元素的基本显示类型，可通过display属性的值来定义元素的显示类型。块级盒子的display属性值通常为"block"，行内盒子的display属性值通为"inline"（并不绝对）。BFC的定义MDN的定义为：区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子（Block-level Box）布局过程发生的区域，也是浮动元素与其他元素交互的区域。通俗来说，BFC是一个独立的渲染区域，他规定了内部块级盒子的布局方式，此区域的布局不会受到BFC外部元素布局的影响。注：实际开发中，BFC中是允许存在行内元素的，但是上述定义却说BFC是块级盒子的布局过程发生的区域，这是因为行内元素所存在的内联盒子在布局时会形成一个匿名块级盒子，该匿名块级盒子的布局行为与普通块级盒子类似。因此，内联盒子在BFC中的布局行为可以看作是一种特殊的块级盒子布局。BFC的产生条件文档的根元素（ ）。浮动元素（ float 值不为 none 的元素）。绝对定位元素（position值为 absolute 或 fixed 的元素）。display值为 inline-block、table、inline-table、table-cell、table-caption、table-row、table-row-group、table-header-group、table-footer-group、flow-rootoverflow值不为 visible 或 clip 的块级元素。contain 值为 layout、content 或 paint 的元素。弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。网格元素（display值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。多列容器（column-count 或 column-width值不为 auto，且含有 column-count: 1 的元素）。column-span 值为 all 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中。BFC的布局规则内部的…