<!-- 《CSS世界》 张鑫旭著 -->
min-width/max-width和min-height/max-height
min-width/max-width出现的场景一定是自适应布局或者流体布局中；
max-width和max-height的初始值是none，min-width和min-height的初始值是auto。
如果max-width的初始值是auto，自然会使用和width一样的渲染解析规则，此时max-width的计算值应该是父元素的宽度值，也就是子元素的宽度永远不会比父元素大了，这显然是有问题的；
而如果min-width的初始值是0，那么当我们设置transition过渡同时改变了min-width值，就应该有动画效果，实际上并没有。我们需要手动设置min-0，才会出现动画。
min-width/max-width和min-height/max-height属性间，以及与width和height之间有一套相互覆盖的原则：
超越 !important，超越最大。
超越 !important指的是max-width会覆盖width，而且是超越覆盖，就是即便是拥有!important权重的width属性声明也会被max-width覆盖，举个例子：
<img src="1.png" style=" 480px!important;"> img {max- 256px; }
图片最后的呈现宽度是256px。
超越最大指的是min-width会覆盖max-width，此规则发生在min-width和max-width冲突的时候。
任意高度元素的展开收起动画技术
用css来实现展开收起的动画效果，很多时候，我们展开的元素的内容是动态的，也就是高度是不固定的，这时候不妨试试max-height，css代码如下：
.element { max-height: 0; overflow: hidden; transition: max-height .2s; } .element.active { max-height: 666px; }
其中展开后的max-height值，我们只需要设定为保证比展开内容高度大的值就可以。但是，如果max-height值太大，在收起的时候可能会有“效果延迟”的问题。因此，建议max-height使用足够安全的最小值。
内联元素
哪些元素是内联元素
这里的“内联”特指“外在盒子”，inline-block和inline-table都是“内联元素”，因为它们的“外在盒子”都是内联盒子。display:inline的元素也是“内联元素”
内联盒模型
（1）内容区域
内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子（character box）；但有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因为对于这类元素来说，内容区域可以看成元素自身。
实际上，内容区域没有明确的定义，所以将其理解成em盒（em-box，可看成是中文字符占据的1em高度区域）也是可以的。
（2）内联盒子（inline box）。
内联盒子和匿名内联盒子
如果外部含内联标签（<span>、<a>等），则属于“内联盒子”；
如果是光秃秃的文字，则属于“匿名内联盒子”；
并不是所有光秃秃的文字都是“匿名内联盒子”，也可能是“匿名块级盒子”，关键要看前后的标签是内联还是块级。
这里前后的标签我理解的是兄弟元素，如果光秃秃的文字前后都是块级元素，那么就是“匿名块级盒子”，不知道理解的对不对。。
（3）行框盒子
每一行就是一个“行框盒子”，每个“行框盒子”又是由一个个“内联盒子”组成的。
（4）包含盒子（containing box）
此盒子由一行一行的“行框盒子”组成。更准确的称呼是“包含块”。
幽灵空白节点
“幽灵空白节点”实际上也是一个盒子，不过是个假想盒，名叫“strut”，中文直译为“支柱”，是一个存在于每个“行框盒子”前面，同时具有该元素的字体和行高属性的0宽度的内联盒。
这里有一个前提，文档声明必须是HTML5文档声明，如果还是很多年前的老声明，则不存在“幽灵空白节点”。
明白“幽灵空白节点”的存在是理解后续很多内联元素为何会这么表现的基础。