《众妙之门——精通CSS3》一书知识点剖析

不得不佩服京东的速度，昨天刚下单的两本书今天上午就到了。其中一本是全彩页的《众妙之门 - 精通CSS3》，细看了前几十页，书上的叙述方式给我的印象其实不如“彩页”来的讨喜——接连说上几个例子，扔个例子的链接（没源码下载，要自己手动输入，而且近乎所有的例子页面均已失效），未经细剖便草草了事，感觉倒是适合作为厕所读物（汗）。。。。

虽然书中不细剖，却也不能白花银子，不妨自己实打实地查资料、记笔记，不辜负了早上送出的老毛。

P21

此处提到的例子动用了 -webkit-background-clip:text; 和 -webkit-text-fill-color:transparent; 两个样式属性，制造了文本蒙版效果。

后面我查了 background-clip 发现它仅支持border-box、padding-box 和 content-box，也写了一个 background-clip:text;  的小例子也没发现有相关效果，之后才确定仅有带webkit前缀的 -webkit-background-clip 才支持 text 的值，才能生成遮罩效果（IE、FF均没有相关的样式属性，如-moz-background-clip:text 并不生效）：

            <
            style
            >
            
div
            {
            background
            :
            url(http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg)
            ;
             -webkit-background-clip
            :
            text
            ;
             -webkit-text-fill-color
            :
            transparent
            ;
            </
            style
            >
            </
            head
            >
            <
            body
            >
            <
            div
            >
            
    测试测试测试
    
            </
            div
            >
            </
            body
            >
        

P49

提到了RGBa的替代方案——HSLa，但没有详细介绍。HSLa的四个值含义分别如下：

故我们可以这样给颜色赋值： 

            div{background-color:hsla(360,50%,50%,0.5);}

P50

提到了 background-clip 和 background-origin ，却没有说明二者分别。

background-origin表示背景从何处开始显示(边框、补白或内容区域)，background-clip表示在原有显示背景的情况下裁剪可视区域(边框、补白或内容区域)。

具体区别可以参考此篇文章。

P54

介绍了muticol（查看用法），至于《CSS3 Multi-column layout considered harmful》的主要内容如下：

建议在如下情况下可以分栏来显示文本：

■ 文本分栏后，从某一栏阅读到下一栏，均无需任何滚动（scroll up and down）

■ 此处无需水平滚动条

■ 是单页面的，没有任何翻页

■ 不会把每一行分的太短导致阅读困难

■ 文本并非自适应的

其实这里都是从体验的角度出发所提出的意见，另外作者在最后也表示网页就是网页，不应该当作印刷物来分栏显示文章。

P55

word-wrap、word-break、white-space 的区别：

word-break：设置英文句子在换行时，是否可以拆开单词换行，其值设为break-all表示允许在单词内换行，设为keep-all表示只能在半角空格或连字符处换行。

因此如果是很长的中文句子，在IE7/8中设为keep-all的话会因为找不到半角空格无法断行而导致文本探出容器外（IE6是直接把容器撑起来）。

word-wrap：解决上述问题，其值设为break-word之后中文也好英文句子也好或者字符串也罢，均能良好断行。

white-space：这个是CSS2属性，其值含义如下

注意我们在使用 text-overflow:ellipsis 的时候需要用到 white-space:nowrap 来配合。

持续更新ing...

原文：http://www.cnblogs.com/vajoy/p/3997473.html