CSS可见格式化模型

1.盒模型

1.1 盒子大小

盒模型描述了元素如何显示，以及如何相互作用、相互影响。

页面中的所有元素都被看作一个矩形盒子，这个盒子包含元素的内容、内边距、边框和外边距。

给元素应用的背景会作用于元素内部和内边距。

外边距用于在页面中控制元素之间的距离。

对元素盒子而言，内边距、边框和外边距不是必需的，因此它们的默认值都为0。

默认情况下，元素盒子的width和height属性指的是内容盒子，也就是元素可渲染内容区的宽度和高度。

通过修改box-sizing属性可以改变计算盒子大小的方式。box-sizing的默认值为content-box。

内边距、边框和外边距可以应用于元素的四边，也可以应用于具体某一边。

外边距甚至可以使用负值，使得元素可以在页面中移动。

内边距和外边距的值可以是CSS规范中规定的任意长度单位（px、em或百分比）。

内、外边距的值使用百分比是基于包含块（containing block）的宽度来计算。包含块就是其父元素，但有时候则不一定。

1.2 最大值和最小值

有时候，特别是在响应式布局中，给一个元素应用min-width和max-width值很有用。因为块级盒子可以默认自动填充父元素的宽度，但不会收缩到比min-width指定的值更窄，或者扩展到比max-width指定的值更宽。

与此类似的是min-height和max-height属性。

在CSS中，设置任何高度值的时候都应该慎重。因为元素的高度通常应该取决于所包含的内容，不需要我们明确设定。否则，万一内容增多，或者文本字号变大，内容就可能跑到高度固定的盒子之外去。即使出于种种原因，需要明确设定默认高度，也最好使用min-height，因为这个属性允许盒子随内容扩展。

2.可见格式化模型

块级盒子会沿垂直方向堆叠，盒子在垂直方向上的间距由它们的上、下外边距决定。

行内盒子是沿文本流水平排列的，也会随文本换行而换行。它们之间的水平间距可以通过水平方向的内边距、边框和外边距来调节。但行内盒子的高度不受其垂直方向上的内边距、边框和外边距的影响。此外，给行内盒子明确设置高度和宽度也不会起作用。

我们常说的块级元素（p、h1和article等）显示为块级盒子的形式，而行内元素（strong、span和time等）显示为行内盒子的形式。

由一行文本形成的水平盒子叫行盒子，而行盒子的高度由所包含的行内盒子决定。修改行盒子大小的唯一途径就是修改行高（line-height）。

我们使用display属性改变生成的盒子类型。

把display属性设置为block，让span变得跟块级元素一样；而把display属性设置为inline-block，该元素就会像行内盒子一样水平排列。

如果把display属性设置为none，还可以让浏览器不为相应的元素生成盒子。如果不生成盒子，那么元素及其包含的内容就不会显示出来，也不会占用文档中的空间。

CSS中有几种不同的定位模型，包括浮动、绝对定位和相对定位。

除非特别指定，否则所有元素盒子都会在常规文档流中生成，即position属性的默认值为static。

常规文档流中元素盒子的位置，由元素在HTML中的位置决定。

2.1 匿名盒子

HTML元素可以嵌套，元素盒子当然也可以嵌套。

多数盒子都是基于明确定义的元素生成的。

<section>
    some text
    <p>Some more text</p>
</section>

上面的 some text被称为匿名块盒子。

事实上，你在屏幕上看到的一切，都会从属于某个盒子。

2.2 外边距折叠

常规块盒子有一种机制叫作外边距折叠。

垂直方向上的两个外边距相遇时，会折叠成一个外边距。折叠后外边距的高度等于两者中较大的那一个高度。

在一个元素嵌套着另一个元素的情况下，假设没有内边距或边框来分隔外边距，它们的上、下外边距也会折叠。

假设有一个空元素，只有外边距而没有边框或内边距。此时，上外边距与下外边距接触，结果也会折叠。（即同一个元素的外边距也会折叠）

如果折叠后的外边距又碰到了其他元素的外边距，还会继续折叠。

外边距折叠只发生在文档常规文本流中块级盒子的垂直方向上。行内盒子、浮动盒子或绝对定位盒子的外边距不会折叠。

2.3 包含块

确定元素的包含块，要看元素是如何定位的。

如果元素的定位方式为静态定位（即不指定position属性的值）或相对定位，则其包含块的边界就计算到一个最近的父元素，该元素的display属性值必须能够提供类似块级的上下文。

默认情况下，width、height、margin和padding的值为百分比时，就以该父元素的尺寸为计算依据。

2.4 相对定位

把一个元素的display属性设置为relative，该元素仍然会呆在原来的地方。但此后，可以通过设置top、right、bottom和left属性，使该元素相对于初始位置平移一定距离。

无论是否位移，相对定位的元素仍然会在文档流中占用初始的空间。因此，这样平移元素会导致它遮挡其他元素。

2.4 绝对定位

绝对定位会把元素拿出文档流，因此也就不会再占用原来的空间。与此同时，文档流中的其他元素会各自重新定位，仿佛绝对定位的那个元素没有存在过一样。

绝对定位元素的包含块是距离它最近的定位祖先，也就是display属性设置为static之外任意值的祖先元素。如果没有这么一个定位祖先，那么它就相对于文档的根元素即html元素定位。文档的根元素也叫作起始包含块（initial containing block）。

绝对定位的盒子也可以相对于其包含块向上、下、左、右方向平移。

绝对定位的盒子是脱离了常规文档流的，因此可能会遮挡页面上的其他元素。为了控制这些盒子层叠的次序，可以设置一个叫z-index的属性。z-index属性值越大，盒子在层叠中的次序就越靠近用户的眼睛。

使用绝对定位很难创建自适应或者响应式布局。

2.4 固定定位

固定定位元素的包含块是视口（viewport）。

固定定位可用来创建始终停留在窗口相同位置的浮动元素。

很多网站都使用这个技术让导航区始终保持可见。

2.5 浮动

浮动盒子可以向左或向右移动，直到其外边沿接触包含块的外边沿，或接触另一个浮动盒子的外边沿。

浮动盒子也会脱离常规文档流，因此常规流中的其他块级盒子的表现，几乎当浮动盒子根本不存在一样。

为什么说“几乎”？因为其他元素盒子中的文本内容会记住浮动元素的大小，并在排布时避开它，为其留出相应的空间。从技术角度来讲，就是跟在浮动元素后面的行盒子会缩短，从而为浮动元素留空，造成文本环绕浮动盒子的效果。

事实上，浮动就是为了在网页中实现文本环绕图片的效果而引入的一种布局模型。

要阻止行盒子环绕在浮动盒子外面，需要给包含行盒子的元素应用clear属性。clear属性的值有left、right、both和none，用于指定盒子的哪一侧不应该紧挨着浮动盒子。

使用浮动可以实现“媒体对象”（media object）的布局模式。

2.6 格式化上下文

元素在页面上水平或垂直排布时的一套规则叫作格式化上下文。

• 行内格式化上下文
• 块级格式化上下文

.media-block {
    background-color: gray;
    border: solid 1px black;
}
.media-fig {
    float: left;
    margin-right: 5%;
}
.media-block, .media-fig {
    overflow: auto; /* 创建新的块级格式化上下文 */
}

<div class="media-block">
    <img class="media-fig" src="/img/pic.jpg" alt="The pic" />
    <div class="media-body">
        <h3>Title of this</h3>
        <p>Brief description of this</p>
    </div>
</div>

当一个元素具备了触发新块级格式上下文的条件，并且挨着一个浮动元素时，它就会忽略自己的边界必须接触自己的包含块边界的规则。此时，这个元素会收缩到适当大小。

尽量基于简单且可预测的行为来创建布局，这样可以降低代码复杂度，并提高布局稳健性。

2.7 内在大小与外在大小

CSS的Intrinsic and Extrinsic Sizing Level 3模块定义了一组可以应用给width和height属性的关键字，而非像素或百分比这种长度值。

这些关键字代表了明确的长度，要么继承自周围的上下文（外在大小），要么源于元素自身的内容（内在大小），具体数值由浏览器决定。

3.其他CSS布局模块

弹性盒布局模块（Flexible Box Layout Module），常被称为Flexbox。

Flexbox支持对子元素水平或垂直布局，以及设置这些子元素的大小、间距和对齐方式。

网格布局（grid layout）是CSS中最早成熟的高层布局工具，目标是取代浮动和定位元素的布局方式。

多栏布局模块（Multi-column Layout Module）用于实现内容的多栏布局。

参考资料：

• 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德