《css世界》阅读日记

今天刷大佬们的blog时，看到张鑫旭大佬出了本《css世界》。于是在亚马逊淘了一份kindle版。方便平时随身观看。

这篇blog会记录阅读本书时get的一些技巧点，方便日后自己巩固。

变量 currentColor

指“当前的文字颜色”，能继承最近一个父元素的color值。

具体参考：currentColor-CSS3超高校级好用CSS变量

宽度分离原则

指CSS中的width属性不与影响宽度的padding/border（有时候包括margin）属性共存，这样在不定死宽度的情况下，css可以遵循流式布局自行计算宽度排列。

属性 box-sizing

默认为content-box时，只有content独享宽度，padding、border的设置将扩大元素的宽度；当box-sizing的值为border-box时，border、padding、content将共同分配元素的宽度。

width属性的优先级

max-width > width!important > min-width > width

min-* 和 max-* 的初始值

min-height、min-width的初始值为auto
max-height、max-width的初始值为none

strut的存在

Each line box starts with a zero- width inline box with the element’ s font and line height properties. We call that imaginary box a “strut”.

每个内联元素（如span em）前都具有一个包含该元素的字体和行高属性的0宽度的内联盒。

替换属性的默认尺寸

<video>、<iframe> 、<canvas>的默认尺寸（不包括边框）是 300 像素 × 150 像素，<img>的默认尺寸为 0 像素。此类元素如果没有 CSS 尺寸 和 HTML 尺寸， 则使用固有（默认）尺寸作为最终的宽高。

技巧 web图片加载

Web 开发的时候，为了提高加载性能以及节约带宽费用， 首屏以下的图片就会通过 滚屏加载 的方式异步加载，但最高效的方法是

1
2
3
4
5

<!-- css部分-->
img { visibility: hidden; } 
img[src] { visibility: visible; }
<!-- html部分-->
<img>

这里的<img>直接没有src属性，不是src=””。src=””在很多浏览器下依然会有请求，而且请求的是当前页面数据。当图片的src属性缺省的时候，图片不会有任何请求，是最高效的实现方式。

注：在firefox下缺省src属性的img不被认为是一个替换元素，而是内联元素。也就是说设置的宽、高css不会生效，解决方法是加上display:inline-block;这条css。

css3 图片适配方式

在CSS3新世界中，<img>和其他一些替换元素的替换内容的适配方式可以通过object-fit属性修改了。例如，<img>元素的默认声明是object-fit:fill，如果我们设置object-fit:none，则我们图片的尺寸就完全不受控制，表现会和非替换元素::before生成的图片尺寸类似；如果我们设置object-fit:contain，则图片会以保持比例图片，尽可能利用HTML尺寸但又不会超出的方式显示。

2018 11.27

周末的时候买了本《重来·更为简单有效的商业思维》，看完之后发现好久之前买的《css世界》被我扔在一边了（有些尴尬）。