前端知识查漏补缺篇（二）

（二）CSS3

1.属性和值选择器

选择器	描述
[attribute~=value]	用于选取属性值中包含指定词汇的元素。适用于由空格分隔的属性值
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

 2.background-origin 属性和background-clip 属性的区别

　　详细查看 此篇文章。

3.animation 

　　关于CSS3的这个十分好用的动画属性，网上有大神已经总结出了一篇很好的文章，这里有文章“CSS3 Animation”的链接。

4.多列

浏览器支持

属性	描述	浏览器支持
column-count	规定元素应该被分隔的列数
column-gap	规定列之间的间隔
column-rule	设置列之间的宽度、样式和颜 色规则如： column-rule-width， column-rule-style， column-rule-color
column-width	规定列的宽度

Internet Explorer 10 和 Opera 支持多列属性。

Firefox 需要前缀 -moz-。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9 以及更早的版本不支持多列属性。

p{
    columns: 30px 3;
    -moz-columns: 30px 3; 
    -ms-columns: 30px 3; 
    -webkit-columns: 30px 3; 
    background: #cfcfcf; 
    border: 1px solid #ccc;
}

CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。