读《CSS世界》小记 1-3章

前言

明确自己前行的方向，虽然最近接手公司的后端项目，开始做java，但是也要抽空多学学自己的“主营业务”。偶然的机会在某乎看到张鑫旭大神的一本书《CSS世界》，读一读，记一记。

流体布局下的宽度分离原则

在设置width时，如果同时存在margin、border 或者是 padding，则会导致盒子的总宽度与“预想的width”不一致。这个时候使用宽度分离原则，其实就是box-sizing:border-box所解决的问题，但是相对来说，使用宽度分离原则“本则”效果更好（主要体现在margin-box这方面），使用box-sizing更方便

//未使用宽度分离
.box { width: 100px; border: 1px solid; }
//或者
.box { width: 100px; padding: 20px; }


//使用宽度分离原则
.father { 
 width: 180px; 
} 
.son { 
 margin: 0 20px; 
 padding: 20px; 
 border: 1px solid; 
}

让元素支持height:100%

1.父级元素给定显式高度，一般人都知道
2.使用绝对定位，原理是规范，你要问什么是规范，我就不知道咋说了，去看规范吧-。-下面就是规范：

如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为
auto。

所以使用绝对定位来使height: 100%生效

div { 
 height: 100%; 
 position: absolute; 
}

max-width与width之间覆盖规则，超越“泰坦尼克”

css中把"!important" 的权重比作“泰坦尼克”

一劳永逸的展开收起动画

.element { 
 max-height: 0; 
 overflow: hidden; 
 transition: max-height .25s; 
} 
.element.active { 
 max-height: 666px; /* 一个足够大的最大高度值 */ 
}

这里提出一个max-height使用注意项

max-height 使用足够安全的最小值,收起时即使有延迟,很难被用户察觉，并不会影响体验。

内联盒模型

幽灵空白节点

规范中实际上对这个“幽灵空白节点”是有提及的，“幽灵空白节点”实际上也是一个盒子，不过是个假想盒，名叫“strut”，中文直译为“支柱”，是一个存在于每个“行框盒子”前面，同时具有该元素的字体和行高属性的 0 宽度的内联盒。