css世界之流体布局

这将会把看到的css世界里面的知识点提取出来，可能会有5到6篇文章来做总结。

这是第一篇文章，css世界之流体布局。 # 文档流 想要了解文档流，我们需要关注普通元素默认的布局是怎样的。

在MDN中normal flow章节中有所描述。

单个元素我们需要关注于它们的盒子模型，首先获取元素的content，然后是它们的padding，最后是border和margin。

默认来说，块级元素的content是父级元素宽度的100%，高度是元素content的高度。内联元素的高度是content的高度，宽度也是content的宽度。你不能直接设置一个内联元素的高度或者宽度，内联元素的高度仅仅是坐落在块级元素的内容中。如果你想要控制内联元素的高度和宽度，你需要将它们设置为 display: block; 或 display: inline-block;

上面解释了单个元素。如果有多个元素，他们会怎么交互呢？在正常的浏览器布局中，默认来说，块级元素会根据文档的书写方式有关。每一个块级元素将会占据一个新行，他们还会根据所设置的margin值来分离。在英语中，或者其他水平，自上而下的书写的语言中，块级元素会根据垂直布局。

内联元素的表现方式就有所不同，它们不会在新的一行出现，它们会在同一行一个接一个的排列，直到它们的长度超过父级元素的宽度就会换行。

width或height作用的具体细节

由于块级元素的流体特性主要体现在水平上，所以首先讨论的就是宽度。

width: auto

width的默认值就是auto。它有以下四种表现：

1. 充分利用可用空间。常见就是<div><p>元素宽度是100%默认于父级容器的。

2. 收缩于包裹。常见于浮动、绝对定位、inline-block元素或table元素。

3. 收缩到最小。常见于table-layout为auto的表格中。

4. 超出容器限制。上面三种元素都不会使元素超出容器宽度，除非设置了white-space: nowrap。

上述四种宽度情况中，除了第一种是由外部尺寸确定的宽度，其他都是内部尺寸决定的宽度。

外部尺寸与流体特性

1. 正常流宽度。宽度会自动填充满父级容器。

2. 格式化宽度。出现在‘绝对定位模型中’，也就是position为 absolute 和 fixed 元素中，

   对于非替换元素，当left/right或者top/bottom对立方位的属性值同时存在的时候，元素的宽度表现为格式化宽度。同样的设置了宽度就会破坏了这种流体性。

内部尺寸与流体特性

这里我仅仅记录了一个关于包裹性的利用，页面中某个文字内容是动态的，可能是几个字或多很多字，几个字的时候居中显示，多个字的时候居左显示。

.box {
  text-align: center;
}

.content {
  display: inline-block;
  text-align: left;
}

height: auto

如果父级元素的高度是100%，那么只要子元素在文档流之中，其百分比值完全被忽略。为什么高度的百分比计算会被忽略呢。在w3c规范中在就给出了答案，如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为 auto 。父级容器的高度解释为了auto自然没法与百分比相乘了。

如何让元素支持height: 100%

1. 设定显式的高度值。给html和body设定100%也是也可以的。

2. 使用绝对定位。绝对元素的宽高百分比计算是相对于 padding box 计算的，非绝对定位的高度百分比计算则是相对于 content box 计算的。

css min-width/max-width和min-height/max-height

下面简述一下min/max-width/height与width和height的不一样的地方。

关于初始值

既然是总结，直接放出来好了，max-*的初始值是none，min-*的初始值是auto。

覆盖规则

当max-width小于width设置的时候，即使width加上了!important也没有用，max-width大于width的设置。

当min-width大于max-width的时候，会以min-width为准则。

根据覆盖原则，我们可以实现任意高度的展开收起技术。由于设置height为auto无法计算值，过渡和动画效果也无法完成。所以我们可以利用max-height实现。

.element {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s;
}

.element.active {
  max-height: 666px; /* 一个足够大的最大高度值 */
}

内联盒模型和幽灵空白节点

内联盒模型的简易版

1. 内容区域。内容区域指一种围绕文字看不见的盒子，可以理解为em盒。

2. 内联盒子。“内联盒子”不会让内容成块显示，而是排成一行。需要注意的是一段单独的文本不一定是“匿名内联盒子”，还有可能是“匿名块级盒子”，主要是看其前后标签是内联还是块级。

3. 行框盒子。每一行就是一个行框盒子，每个行框盒子又是一个一个“内联盒子”组成的。

4. 包含盒子。又称包含块，包括父级标签。

幽灵空白节点

“幽灵空白节点”是内联盒子模型的一个非常重要的概念。具体指，在HTML5的文档声明中，内联元素的所有解析盒渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个节点永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但是又确确实实存在。