1.多列
将文本内容设计成像报纸一样的多列布局
- column-width:指定列的宽度
- column-count:要分的列数
- column-gap:列与列之间的间隙
- column-rule:列与列之间的边框属性,复合属性。(column-rule-style、column-rule-width和column-rule-color的集合样式)
- column-rule-style:间隔线类型(hidden:定义隐藏规则/dotted:定义点状规则/dashed:定义虚线规则/solid:定义实线规则/double:定义双线规则)
- column-span:元素是否横跨所有列
direction:定义文字排列方式
rtl:从右向左排列
ltr:从左向右排列
注意要配合unicode-bidi:bidi-override; 一块使用
下面是一首诗的从右到左的4列排列:
<p>锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦</p>
p{direction:rtl;unicode-bidi:bidi-override;column-width:30px;column-count:4;width:150px;font-size:20px;column-gap:10px}
2.结构性伪类
- E:nth-child(n) 表示E父元素的第n个子节点,且类型为E
- p:nth-child(odd){background:red} /*匹配奇数行*/
- p:nth-child(even){background:red} /*匹配偶数行*/
- E:nth-last-child(n) 表示E父元素的第n个子节点,从后向前算,且类型为E
- E:nth-of-type(n) 表示E父元素的第n个E子节点
- E:nth-last-of-type(n)表示E父元素的第n个E子节点,从后向前算
<div>
<p>p1</p>
<p>p2</p>
</div>
<div>
<div>
<p>p3</p>
<p>p4</p>
</div>
<p>p5</p>
<p>p6</p>
<p>p7</p>
</div>
p:nth-of-type(2){color:#ccc}
p:nth-child(2n){color:red;}
![](https://i-blog.csdnimg.cn/blog_migrate/b0f640095226ab95435f959b5742f0d2.png)
3.过渡
transition:过渡(css3的动画的一种)transition-property:要运动的样式(all || [attr] || none)
transition-duration:规定完成过渡效果需要多少秒或毫秒,默认值为0
transition-delay:定义动画延迟多久开始,默认值为0
transition-timing-function:运动速度曲线。ease:(逐渐变慢)默认值;linear:(匀速);ease-in:(加速);ease-out:(减速);ease-in-out:(先加速后减速);cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 ),贝赛尔曲线的图transition: property duration timing-function delay
下面是一个风车的练习,在6s转上三圈:
<div class="div1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.div1{overflow:hidden;width:400px;height:400px;transition:all 6s;margin:100px auto;}
.div1 div:nth-child(1),.div1 div:nth-child(4){width:200px;height:200px;float:left;border-radius:0 200px 0 200px;background-color:red}
.div1 div:nth-child(2),.div1 div:nth-child(3){width:200px;height:200px;float:left;border-radius:200px 0px 200px 0px;background-color:red}
.div1:hover{transform:rotate(1080deg);}
![](https://i-blog.csdnimg.cn/blog_migrate/c094355bc148729a6af6768e1f25b534.png)