《CSS世界》读书笔记（六）

<!-- 《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-width: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="width: 480px!important;">
img {max-width: 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文档声明，如果还是很多年前的老声明，则不存在“幽灵空白节点”。

明白“幽灵空白节点”的存在是理解后续很多内联元素为何会这么表现的基础。