(二)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-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等属性进行调控,避免了很多麻烦。