3.2.2width/height 作用的具体细节
width:auto的四种宽度表现
（1）充分利用可用空间fill-available
（2）收缩与包裹fit-content
（3）收缩到最小min-content
（4）超出容器限制
3.2.3CSS 流体布局下的宽度分离原则：CSS中的width属性不与影响宽度的padding/border(有时候包括margin）属性共存。
宽度分离便于维护。width、padding、border混用的时候，当我们需要修改padding或者border-width的时候，就要重新计算width，而使用width分离之后，我们没有任何计算，浏览器会自动计算，完全不用担心尺寸的变化，页面结构更加稳固。
3.2.4改变width/height作用细节的box-sizing
boxing-sizing的值有content-box、padding-box、border-box；content-box是默认值。
3.2.5height:auto；CSS默认流是水平方向的，宽度是稀缺的，高度是无限的。因此，宽度的分配规则比较复杂，高度就显得随意的多。
3.2.6height:100%
如何让元素支持height:100%效果
（1）设定显示高度值。
（2）使用绝对定位
3.3 CSS min-width/max-width和min-height/max-height
3.3.1min-width/max-width出现的场景一定是自适应布局或者流体布局中；
3.3.2max-width和max-height的初始值是none，min-width和min-height的初始值是auto。
3.3.3min-width/max-width和min-height/max-height属性间，以及与width和height之间有一套相互覆盖的原则：超越 !important，超越最大。
3.4内联元素
3.4.1内联元素：这里的“内联”特指“外在盒子”，inline-block和inline-table都是“内联元素”，因为它们的“外在盒子”都是内联盒子。display:inline的元素也是“内联元素”
3.4.2内联盒模型：
内容区域（content area）:内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制；但有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因为对于这类元素来说，内容区域可以看成元素自身；
内联盒子（inline box）：如果外部含内联标签（<span>、<a>等），则属于“内联盒子”；
行框盒子（line box）：每一行就是一个“行框盒子”，每个“行框盒子”又是由一个个“内联盒子”组成的；
包含盒子（containing box）：盒子由一行一行的“行框盒子”组成。更准确的称呼是“包含块”。
3.4.3幽灵空白节点:是内联盒模型中非常重要的一个概念，具体指的是：在 HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取。
width:auto的四种宽度表现
（1）充分利用可用空间fill-available
（2）收缩与包裹fit-content
（3）收缩到最小min-content
（4）超出容器限制
3.2.3CSS 流体布局下的宽度分离原则：CSS中的width属性不与影响宽度的padding/border(有时候包括margin）属性共存。
宽度分离便于维护。width、padding、border混用的时候，当我们需要修改padding或者border-width的时候，就要重新计算width，而使用width分离之后，我们没有任何计算，浏览器会自动计算，完全不用担心尺寸的变化，页面结构更加稳固。
3.2.4改变width/height作用细节的box-sizing
boxing-sizing的值有content-box、padding-box、border-box；content-box是默认值。
3.2.5height:auto；CSS默认流是水平方向的，宽度是稀缺的，高度是无限的。因此，宽度的分配规则比较复杂，高度就显得随意的多。
3.2.6height:100%
如何让元素支持height:100%效果
（1）设定显示高度值。
（2）使用绝对定位
3.3 CSS min-width/max-width和min-height/max-height
3.3.1min-width/max-width出现的场景一定是自适应布局或者流体布局中；
3.3.2max-width和max-height的初始值是none，min-width和min-height的初始值是auto。
3.3.3min-width/max-width和min-height/max-height属性间，以及与width和height之间有一套相互覆盖的原则：超越 !important，超越最大。
3.4内联元素
3.4.1内联元素：这里的“内联”特指“外在盒子”，inline-block和inline-table都是“内联元素”，因为它们的“外在盒子”都是内联盒子。display:inline的元素也是“内联元素”
3.4.2内联盒模型：
内容区域（content area）:内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制；但有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因为对于这类元素来说，内容区域可以看成元素自身；
内联盒子（inline box）：如果外部含内联标签（<span>、<a>等），则属于“内联盒子”；
行框盒子（line box）：每一行就是一个“行框盒子”，每个“行框盒子”又是由一个个“内联盒子”组成的；
包含盒子（containing box）：盒子由一行一行的“行框盒子”组成。更准确的称呼是“包含块”。
3.4.3幽灵空白节点:是内联盒模型中非常重要的一个概念，具体指的是：在 HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取。
