流、元素与基本尺寸是 CSS 中最基础的概念，深刻地理解外在盒子和内在盒子的概并知道元素的流动性只取决于外在盒子以及准确地理解 width 和 height 十分有助于我们更好地去预测 CSS 中各种元素的呈现行为。

流、元素与基本尺寸(上)

流、元素与基本尺寸(中)

深入最大宽度

最大宽度就是元素可以有的最大宽度，也就是连续内联盒子的宽度。

演示页面

流动性与无宽度准则

无宽度准则就是说，尽可能不要为元素设置宽度，否则会造成流动性丢失。

1. width:auto 等价于 width:100% ?

对于块级元素而言，width:auto 指的是 content内容区域充分利用剩余水平空间、width:100% 指的是 content内容区域 占容器(父元素的content区域就是容器) 宽度的100%

演示页面

2. 再谈流动性

所谓流动性，指的是块级元素的 content内容区域对剩余可用宽度的充分利用。(即width:auto的特性一：充分利用可用空间的特性)

3. 宽度分离原则

即用父元素去限制宽度，子元素设置内外边距以及边框。

.father {
  width: 120px;
}
.child { /* 利用子元素 content 的流动性 */
  margin: 20px;
  border: 20px;
  padding: 20px;
}

4. box-sizing

box-sizing用于改变width/height的作用细节

.box { box-sizing: content-box; } /* 默认值 */
.box { box-sizing: border-box; }

CSS中的高度

CSS默认的文档流是水平方向的，宽度是稀缺的，高度是无限的。

1. 相对单纯的 height:auto

height:auto 即是元素的默认高度

一个div高50px，三个div叠起来多少px? 150px。

2. 关于height:100%

和width:100%不同，当父元素的高度为auto时，子元素的height:100%无效

流、元素与基本尺寸(下)

为流体而生的min-width/max-width

.container {
  min-width: 1200px;
  max-width: 1400px;
}

超越 !important

<img src="1.jpg" style="width:480px!important">
img { max-width: 256px; }

超越最大

.container {
  min-width: 1400px;
  max-width: 1200px;
}

再谈内联元素

外在盒子是内联盒子的元素称为内联元素

内联盒模型

<p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p>

1. 内容区域(content area)

通常情况下，文字的选中背景可以反映出内容区域的范围(排除垂直padding的情况)。 ### 2. 内联盒子(inline box) 内联盒子不会让内容成块显示，而是排成一行，直到这行空间不够再换行。 - 内联盒子 - 匿名内联盒子(光秃秃的文字) ### 3. 行框盒子(line box) 每一行就是一个行框盒子 ### 4. 包含块(containing box) 包含块由一个或多个行框盒子组成，这里的包含块就是<p>标签

幽灵空白结点(特别重要)

Each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut".

每个行框盒子的前面有一个空白结点，这个空白结点永远透明，不占据任何宽度，看不见也无法通过脚本获取。

div>span

div {
  background: #666;
}
span {
  display: inline-block;
}