《css世界》阅读日记
in 前端 with 0 comment

《css世界》阅读日记

in 前端 with 0 comment

微信图片_20180411115148.jpg

今天刷大佬们的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 开发的时候,为了提高加载性能以及节约带宽费用, 首屏以下的图片就会通过 滚屏加载 的方式异步加载,但最高效的方法是

    <!-- 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尺寸但又不会超出的方式显示。

object-fit

2018 11.27

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

Comments are closed.