标签：

一、新增选择器

布局伪类选择器

:root——根选择器

:nth-child(an+b)——子元素选择器。下标是a的倍数，，偏移b个的子元素，n从0计数。odd奇数，even偶数。

:nth-last-child(n)——倒数第n个

:last-child——最后一个

:only-child——属于其父元素的独一子元素的阿谁

...

二、新增属性 边框

border-image——边框图片

border-radius——边框圆角

border-shadow——暗影

配景

background-image——配景图片

background-size——尺寸

background-origin——位置区域

background-clip——裁剪属性

渐变色

linear-gradient(direction, color-start1, color-stop1)——线性渐变

radial-gradient(shape size at position, start-color, ..., last-color)——由中心向周围渐变

文本效果

text-shadow

box-shadow

text-overflow: clip/ellipsis/string——文本溢出显示形式

字体

@font-face{...}

三、重要属性 1、2D、3D转换——transform

位移——translate(x,y)、translateX(n)、translateY(n)、translateZ(z)、translate3d(x,y,z)

缩放——scale(x,y)、scaleX(n)、scaleY(n)、scaleZ(z)、scale3d(x,y,z)

旋转——rotate(angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)、rotate3d(x,y,z,angle)

倾斜——skew(x-angle,y-angle)、skewX(angle)、skewY(angle)

2、过渡行动——transition

transition-property ——规定设置过渡效果的 CSS 属性的名称。

transition-duration——规定完成过渡效果需要几多秒或毫秒。

transition-timing-function——规定速度效果的速度曲线。

transition-delay——界说过渡效果何时开始。

贝塞尔曲线:cubic-bezier(n,n,n,n)

运动速度就是曲线的斜率巨细

3、动画——@Keyframes和animation

animation是以部属性的缩写：

animation-name——规定需要绑定到选择器的 keyframe 名称。。

animation-duration——规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function——规定动画的速度曲线。

animation-delay——规定在动画开始之前的延迟。

animation-iteration-count——规定动画应该播放的次数。

animation-direction——规定是否应该轮流反向播放动画

@ keyframes语法如下：

@ keyframes animationname { keyframes-selector { property: style; } }

keyframes-selector——"from" 和 "to"，等价于 0% 和 100%。或百分比

property——元素属性

style——元素样式

四、弹性构造——flex

display:flex;——给与 Flex 构造的元素，称为 flex 容器。它的所有子元素自动成为容器成员，称为 flex 项目。

1、父元素属性

flex-flow: flex-direction || flex-wrap;

flex-direction: row | row-reverse | column | column-reverse;——主轴标的目的（项目摆列标的目的）

flex-wrap: nowrap（不换行） | wrap（换行） | wrap-reverse（换行，倒序）;——超过换行

justify-content: flex-start | flex-end | center | space-between | space-around;——主轴对齐方法（横轴）

align-items: flex-start | flex-end | center | baseline | stretch;——纵轴对齐方法

align-content——堆叠伸缩行的对齐方法

2、子元素属性

order——在父元素里的排序，小的在前

flex: none | flex-grow |flex-shrink|flex-basis

flex-grow——按照弹性盒子元素所设置的扩展因子作为比率来分配残剩空间。
若盒子的basis总和小于父盒子宽度，则残剩的宽度按grow比例分配。

flex-shrink——按照弹性盒子元素所设置的收缩因子作为比率来收缩空间
若盒子的basis总和大于父盒子宽度，则按子盒子shrink比例压缩，例如1:1则子盒子等比例压缩。

flex-basis——设置或检索弹性盒伸缩基准值

五、多媒体盘问 1、语法 @media mediatype and | not | only (media feature){ CSS-Code; } 2、属性值 （1）mediatype（媒体类型）

all——所有设备

print——打印机

screen——电脑、平板、手机屏幕

（2）媒体特征

height——设备可见区域高度

width——设备可见区域宽度

max-height——可见区域最大高度

max-width——最大宽度

min-height——最小高度

min-width——最小宽度