一. 选择器
1.属性选择器
E[attr]：存在该属性即可
E[attr=val]：属性值等于val
E[attr~=val]：属性值等于val，或者属性值用空格分隔，其中有val
E[attr|=val]：属性值等于val，或者属性值用'-'分隔，其中有val
E[attr*=val]：属性值包含val
E[attr^=val]：属性值以val开头
E[attr$=val]：属性值以val结尾
2.伪类选择器
E:nth-child(n)：查找E的所有兄弟元素，包括它本身，下标从1开始，如果下标n对应的是同类元素则选中，否则不选中
E:nth-last-child(n)：作用与nth-child类似，只是下标从后往前
E:nth-of-type(n)：查找E的所有同类兄弟元素，包括它本身，下标从1开始，选中下标n对应的元素
E:nth-last-of-type(n)：作用与nth-of-type类似，只是下标从后往前
E:first-child：查找E的第一个兄弟元素，可以是它本身，如果是同类元素则选中，否则不选中
E:last-child：作用与first-child类似，只是从后往前
E:first-of-type：选中E的第一个同类兄弟元素，可以是它本身
E:last-of-type：作用与first-of-type类似，只是从后往前
E:only-child：选中没有兄弟元素的E元素
E:only-of-type：选中没有同类兄弟元素的E元素
E:empty：选中没有任何子元素(包括文字、空格、换行)的E元素
3.伪元素选择器
E::selection：可改变选中文本的样式
E::placeholder：可改变placeholder的默认样式
E:before、E::before：在E元素内部最前面添加一个元素
E:after、E::after：在E元素内部最后面添加一个元素
二. 边框
1.边框圆角
border-radius：设置圆角的半径
border-radius: 40px 30px 30px 50px;设置顺序分别为1、2、3、4
border-radius: 50%;表示半径为正方形边长的50%
border-radius: 80px / 40px;表示椭圆的横轴为80px，纵轴为40px
border-radius: 40% / 20%;表示椭圆横轴为宽的40%，纵轴为高的20%，宽高包括边框
2.边框阴影
box-shadow：设置元素的边框阴影，没有边框也可以设置
box-shadow: 5px 5px 5px 5px red;
参数一：阴影的水平偏移量，正数为右，负数为左
参数二：阴影的垂直偏移量，正数为下，负数为上
参数三：阴影的模糊度，数值越大越模糊
参数四：阴影的尺寸，默认情况下，阴影的大小与元素大小一样，如果该值为正，则增大阴影面积，否则为缩小，5px表示阴影上下左右各增加5px，即宽高各增加10px
参数五：阴影的颜色
注意：图中第一个参数与第二个参数写反了
3.边框图片
border-image-source：设置图片路径
border-image-width：设置图片边框的宽度
border-image-slice：图片的切割方式
border-image-repeat：图片的重复方式
如图所示，图片的切割顺序为上右下左(1234)
border-image-slice: 27; //没有单位
border-image-slice 27 40 40 27;
A区域的图片不会被拉伸，只有B区域才可被拉伸
repeat的三种方式：round(平铺、拉伸)、repeat(平铺、裁剪)、stretch(默认，拉伸)
三. 背景
background-origin，设置背景图片的位置
border-box：从边框位置开始显示，即边框也有背景图片
padding-box：从内边距位置开始显示，即内边距也有背景图片
content-box：从内容区域开始显示，默认值background-clip，设置背景的裁剪方式，背景颜色也会被裁剪
border-box：超过边框的裁剪掉，默认值
padding-box：超过内边距的裁剪掉，即边框没有背景
content-box：内容区域以外的裁剪掉background-size，设置背景图片尺寸
contain：固定左上角，等比例缩放，直到某一边充满背景区域
cover：固定左上角，等比例缩放，直到充满背景区域，超出的部分被裁剪
也可以通过百分比、像素来设置背景区域的大小background-position，设置背景图片的偏移
background-position: 50px 30px
表示水平方向偏移50像素（正右负左），垂直方向偏移30像素（正下负上）background-repeat，设置背景图片的重复方式
no-repeat：不重复
repeat-x：水平重复
repeat-y：垂直重复
五. 渐变
1.线性渐变
沿着某条直线朝一个方向产生渐变效果
//黄色到绿色渐变，默认为从上往下
background-image: linear-gradient(yellow, green);
//多种颜色渐变
background-image: linear-gradient(yellow, green, red);
//从左往右渐变
background-image: linear-gradient(to right, yellow, green);
//向45度方向渐变，向上为0度，向右为90度
background-image: linear-gradient(45deg, yellow, green);
//0-30%：黄色，30%-70%：渐变色，70%-100%：绿色
background-image: linear-gradient(to right, yellow 30%, green 70%);
//0-30%：黄色，30%-50%：黄绿渐变，50%-70%：绿蓝渐变，70%-100%：蓝色
background-image: linear-gradient(45deg, yellow 30%, green 50%, blue 70%);
//由于后面的百分比小于前面的，所以变为与前面相等，即yellow 60%, green 60%
background-image: linear-gradient(90deg, yellow 60%, green 40%);
2.径向渐变
以某点为中心，向四周渐变
//以元素中点为中心，向四周渐变
radial-gradient(yellow, green);
//0-40%：黄色，40%-80%：黄绿渐变，80%-100%：绿色
radial-gradient(yellow 40%, green 80%);
//渐变半径50px，50px以外为绿色
radial-gradient(50px, yellow, green);
//以左上角为中心向四周渐变，渐变半径150px，150px以外为绿色
radial-gradient(150px at left top, yellow, green);
//以(50, 50)为中心向四周渐变，渐变为横轴100px，纵轴50px的椭圆
radial-gradient(100px 50px at 50px 50px, yellow, green);
//渐变为椭圆，横轴为元素宽度一半，纵轴为元素高度一半，如果元素为正方形，则渐变为圆形
radial-gradient(ellipse, yellow, green);
3.重复渐变
repeating-linear-gradient：线性重复渐变
repeating-radial-gradient：径向重复渐变
六. 伸缩布局
- 设置元素的display属性为flex，则该盒子内部为伸缩布局
- flex-direction：设置主轴的方向
row：水平从左往右，默认值
row-reverse：水平从右往左
column：垂直从上往下
column-reverse：垂直从下往上
- justify-content：设置主轴方向上的对齐方式
flex-start：向主轴开始的方向对齐，默认值（主轴从左往右，则左对齐）
flex-end：向主轴结束的方向对齐
center：居中对齐
space-between：两端对齐
space-around：平分
- align-items：设置侧轴对齐方式
flex-start（默认值）、flex-end、center
baseline：以文字基线对齐
stretch：不指定高度的情况下拉伸
- flex-wrap：是否换行
wrap：换行
nowrap：不换行，默认值
- align-content：换行情况下，设置行之间的对齐方式
flex-start、flex-end、center、space-around、space-between、stretch（默认）
- flex-flow：flex-direction与flex-wrap的简写
flex-flow: column wrap - flex：设置子元素占比
- align-self：设置该元素在父盒子侧轴上的对齐方式，会覆盖父元素align-items的效果
- order：设置元素在主轴上的排列顺序，值为数字，从小到大排列
- flex-grow：如果父盒子存在剩余空间，则将项目放大，设置值为所占剩余空间的份数，0表示不放大!
- flex-shrink：如果父盒子空间不足，则将项目缩小，设置值为所占缩小空间的份数，0表示不缩小，默认值为1
七. 多列布局
-webkit-column-count：设置列数
-webkit-column-width：设置列宽，当列宽*列数大于盒子总宽，则列数会减少
-webkit-column-gap：设置列之间的宽度
-webkit-column-rule：设置列之间的分界线，参数与border一样
-webkit-column-span：值为all，表示跨所有列
八. 过渡
一种状态过渡到另一种状态
transition-property：要过渡的属性
transition-duration：过渡的持续时间
transition-timing-function：过渡的方式，取值linear、ease、ease-in、ease-out、ease-in-out
transition-delay：延迟多久后开始过渡
transition：可一次性设置上面的属性
transition: width 1s, height 2s; //表示宽度1s过渡完，高度2s过渡完
div {
width: 200px;
height: 200px;
background-color: green;
transition-property: all; /*所有属性*/
transition-duration: 1s; /*1s内过渡完成*/
transition-delay: 0.5s; /*延迟0.5后开始过渡*/
transition-timing-function: linear; /*线性过渡*/
/*transition: all 1s linear 0.4s;*/
}
div:hover {
width: 50px;
height: 50px;
background-color: red;
}
九. 动画
animation-name：动画的名称
animation-duration：动画执行时长
animation-delay：延迟一段时间后开始执行
animation-timing-function：动画速度曲线，linear线性
animation-fill-mode：动画执行完后的状态，forwards表示保持最后的状态
animation-iteration-count：动画执行次数，infinite表示无限次
animation-direction：动画播放完后是否逆向播放，默认值为normal，alternate表示逆向播放
animation-play-state：动画播放的状态，running表示播放，paused表示暂停
使用@keyframes定义一个动画
div {
width: 100px;
height: 100px;
background-color: blue;
animation-name: change;
animation-duration: 4s;
animation-delay: 0.3s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
@keyframes change {
0% {width: 30px; height: 30px} /*初始状态，宽高100px，延迟0.3s后开始动画，此时宽高变为30px*/
25% {width: 30px; height: 300px; background-color: green} /*0-1s，宽度不变，高度变为300px，颜色变为green*/
50% {width: 300px; height: 300px; background-color: pink} /*1-2s，宽度变为300px，高度不变，颜色变为pink*/
100% {background-color: red} /*2-4s，颜色变为red，由于没有设置宽高，则会变为初始状态100px*/
}
十. 转换
使用transform设置元素的转换
2d转换
rotate()：设置旋转角度，正值为顺时针，负值为逆时针。
例：rotate(45deg)，延锚点顺时针旋转45度
scale()：设置元素的缩放，绝对值小于1缩小，大于1放大，当值为负数时会发生翻转。
例：scale(-1.5, 2)，水平方向放大1.5倍并翻转，垂直方向放大2倍
translate()：设置元素的位移
例：translate(50px, 80px)，右移50px，下移80px3d转换
rotate3d(x, y, z)：设置元素延三条轴的旋转角度
rotateX()、rotateY()、rotateZ()：设置元素在单个轴上的选择角度
scale3d(x, y, z)：设置元素在三个方向上的缩放比例
scaleX()、scaleY()、scaleZ()：设置单个方向上的缩放比例
translate(x, y, z)：设置元素在三个方向上的位移尺寸
translateX()、translateY()、translateZ()：设置单个方向上的位移其他属性
transform-origin：设置元素的锚点，默认为元素的中点
perspective：设置视距，需要设置在父元素上，只影响3d转换效果，值越小越明显
perspective-origin：设置灭点的位置，默认为中点，设置在父元素上
transform-style：设置子元素是否在3d平面呈现，默认为flat
如图，子元素旋转60deg的情况，flat时，子元素始终在父元素的平面上