选择器
nth-of-type
nth-child
- 定义和用法
nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。n 可以是数字、关键词或公式。
nth-of-type(n)和nth-child(n)的用法类似,不过nth-of-type(n)必须指定子元素的标签类型
参考文章-----》
盒子模型 box-sizing
box-sizing:content-box || border-box || padding-box || inherit
参考文章
动画(transform transition animation)
- 实现2D,3D转换
2D方法有以下:
translate()
rotate()
scale()
skew()
matrix()
div{transform: translate(50px,100px);} // translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素
div{transform: rotate(30deg);} //顺顺时针旋转30度
div{transform: scale(2,4);} //元素宽度放大2倍,高度放大4倍
- transition实现过渡
如下实例实现了盒子宽度过渡线性延升至200px宽度的效果。
div
{
width:100px;
height:100px;
background:yellow;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
//transition: width 1s linear 2s; //简写方法
}
div:hover{
width:200px;
}
- animation实现动画
如需在 CSS3 中创建动画,需要学习 @keyframes 规则。
@keyframes
规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
注意点:必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0。
//把 "myfirst" 动画捆绑到 div 元素,时长:5 秒:
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
边框
- border-radius
应用:使用 border-radius画一个圆,半圆
只需设置border-radius:50%
.c1{
background-color: #eeff50;
border-radius: 50%;
width: 50px;
height:50px;
}
- box-shadow
- border-image
flex布局
Flex 是 Flexible Box 的缩写 ,意思是 ”弹性布局”,用来为盒子模型提供最大的灵活性。
设置flex布局后,子元素的float、clear 和vertical-align 属性将失效。
多列(column)
- column-count :3;//分为多少列
- column-gap:10px;//列之间的间隔
- column-rule:10px outset #fff ;//列之间的宽度,样式,颜色等