CSS 盒模型

[coconilu]

概述

文档中每一个元素在页面布局结构中均呈现为一个矩形的盒子，包括块元素和行内元素。

1. 盒模型

有时候也被成为框模型。

基础特性：

1. 溢流：overflow
2. 背景裁剪：background-clip
3. 轮廓：outline

高级特性：

1. 设置宽和高的约束，[min | max]-[width | height]
2. 改变盒模型，box-sizing
3. 显示类型，display
4. 边框样式

通过display设置显示类型：

css 1：
none，关闭一个元素的显示（对布局没有影响）；其所有后代元素都也被会被关闭显示。
inline，该元素生成一个或多个行内元素盒。
block，该元素生成一个块元素盒。
list-item，该元素生成一个容纳内容和单独的列表行内元素盒的块状盒。需要父元素搭配padding，子元素搭配list-style-position: outside;list-style-type: disc;

css 2.1：
inline-block，该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）。外部看是inline元素，内部看是block元素
表格模型值：

css 3：
flex
inline-flex
grid
inline-grid

2. 包含块

一个元素的尺寸和位置经常受其包含块的影响。

1. 如果 position 属性为 static 或 relative ，包含块就是由它的最近的祖先块元素（比如说inline-block, block 或 list-item元素）或格式化上下文(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘组成的。
2. 如果 position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static （也就是值为fixed, absolute, relative 或 sticky）的祖先元素的内边距区的边缘组成。
3. 如果 position 属性是 fixed，包含块就是由 viewport (in the case of continuous media) 。

3. 垂直外边距合并

发生的条件：

1. 相邻元素之间
2. 父元素与其第一个或最后一个子元素之间
3. 空的块级元素

4. 块格式化上下文（BFC）

创建块格式化上下文的方式：

1. 根元素或包含根元素的元素
2. 浮动元素（元素的 float 不是 none）
3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
4. 行内块元素（元素的 display 为 inline-block）
5. 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
6. 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
7. 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
8. overflow 值不为 visible 的块元素
9. display 值为 flow-root 的元素
10. contain 值为 layout、content或 strict 的元素
11. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
12. 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
13. 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
14. column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）

块格式化上下文包含创建它的元素内部的所有内容。

用处：

1. 浮动定位和清除浮动时只会应用于同一个BFC内的元素。
2. 外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

5. 盒子阴影

box-shadow属性有四个值：

1. 第一个长度值是水平偏移量（horizontal offset ）——即向右的距离，阴影被从原始的框中偏移(如果值为负的话则为左)。
2. 第二个长度值是垂直偏移量（vertical offset）——即阴影从原始盒子中向下偏移的距离(或向上，如果值为负)。
3. 第三个长度的值是模糊半径（blur radius）——在阴影中应用的模糊度。
4. 第四个颜色值是阴影的基本颜色（base color）。

可以声明多个盒子阴影，用逗号隔开。

box-shadow还可以设置五个值，并在第一个值设置为inset，使它成为内部阴影。

6. 过滤器

CSS过滤器提供了一种过滤元素的方法，就好比你在诸如Photoshop这样的平面设计程序中过滤元素一样。

参考：

盒模型
包含块
垂直外边距合并
块格式化上下文
Filter