《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:;
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文档声明,如果还是很多年前的老声明,则不存在“幽灵空白节点”。

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

上一篇:redhat yum ISO 本地源


下一篇:关于Zookeeper选举机制