css3新增

属性选择器

[title="ss"]    //选择所有符合这个属性的元素;

[title~="ss"]  //选择符合这个属性的元素，可以用空格隔开（包含这个属性就可以）;

[title*="ss"]  //只要包含这个字符串就可以被选中;

[title|="ss"]    //以ss开头就会被选中;

[title$="ss"]    //以ss结尾就会被选中;

:lang(zh-ch)   //选中lang()值为zh-ch的元素;

:root    //根元素选自器；

:empty   //选中所有空标签;

:enabled  //有效的标签选择器，针对可以使用disabled 让其失效是选择器

:checked  //选中的属性;

::first-letter  //选中第一个单词的;

::first-line   //选中第一行;

:selection //复选框选中;

:target  //跳转元素在跳转之后选中添加样式;

transition

 transition-property: background-color,width;   //指定要过度的属性;可以天机多个属性;

 transition-duration: 3s;   //指定过度的时间;

 transition-delay: ;   //指定过度的延迟时间;

 transition-timing-function:linear ;  //指定过度的时间函数;

animation (配合@keyframes);

 animation-name    //动画名称;

 animation-duration  //指定动画时间;

 animation-timing-function  //指定动画的时间函数;

 animation-delay    //指定延迟多长时间执行动画,(为负数直接提前执行);

 animation-iteration-count  //指定重复的次数  infinite 为无限重复;

animation-direction  //设置动画的播放方向  reverse反向播放  alternate 奇数正向，偶数反向 （先执行一遍动画，然后再反向执行一遍动画：）

animation-fill-mode  //设置动画结束/开始时的状态；  forwards  结束时停留在结束时的位置  backwards  当设置了动画延时时间  开始前就在在开始的位置; botn 遵循前面两个;

 animation-play-state: ;  //设置动画的开始于暂停  paused 暂停动画  running开始动画;

filter 滤镜

 brightness(%)  //更亮或者更暗，使用于遮罩层;

 grayscale(100%)  //添加灰度；

 blur(px)  高斯模糊;

 hue-rotate(deg)    //色相旋转,改变图片颜色

弹性盒模型之flex属性

 display: flex;

1、在一设置display: flex属性可以把块级元素排显示。

2、flex需要添加在父元素上，改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

父类（容器）  子类（项目）

direction 属性

rtl   right-to-left;

容器

使用justify-content属性设置主轴排列方式

1，flex-start：交叉轴的起点对齐（左对齐）
2，flex-end：右对齐
3，center： 居中
4，space-between：两端对齐，项目之间的间隔都相等。
5，space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

使用align-items属性设置垂直轴排列方式

1，flex-start：默认值，左对齐
2，flex-end：垂直轴的终点对齐 
3，center： 垂直轴的中点对齐
4，baseline：项目的第一行文字的基线对齐。（文字底部）；
5，stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。


flex-direction弹性盒子的方向;

row：默认的排列方式。 主轴依然是水平方向;
row-reverse：与垂直轴进行镜像操作;
column：纵向排列。主轴变为纵向排列
column-reverse：纵向排列。主轴变为纵向排列 与垂直轴进行镜像操作;


flex-wrap 属性（设置是否换行弹性布局）;

nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。


align-content属性（设置换行弹性布局之后的纵向排列位置）;

stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。



项目



fiex: number;   //使用整数 ，来定义项目在容器中的占比，本项目/所有项目中之和 就是要站的宽度;  如果设置宽高，则宽高失效
 
order: number;    //使用整数 来定义所有项目在容器中的排序，可以为负数  越小越靠前;

flex-basis   //主轴方向的每个项目的大小;主轴为水平x轴 为宽度，，主轴为竖直，为高度; 如果设置宽高，则宽高失效；

flex-grow  // 使用整数  元素放大的比例，当容器没有被元素所占满时，所剩下的宽度按比例分给每个项目;

flex-shrink     //使用整数  元素缩小的比例   当容器溢出时，溢出的宽度按比例让每个项目减掉；

align-self  //属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 

可选值：auto | flex-start | flex-end | center | baseline | stretch;

justify-self  //允许项目于其他项目不一样的对齐方式;

详情：https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

可选择  于父类相同;

margin配合弹性布局作用

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，
可以使弹性子元素在弹性容器的两上轴方向都完全居中中心居中margin: auto;

让CSS flex布局最后一行列表左对齐的N种方法

https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/

方法一：最后一项margin-right:auto

方法二：创建伪元素并设置flex:auto或flex:1

自动编号

counter-reset: name  number;   //计数器，创建一个计数器;  （父类创建）  name 计数器名字  number  初始值; 也可以定义多个计数器 使用空格隔开;

counter-increment: name;   //让计数器加一;  子类每次渲染到这个属性， 计数器就会加一;  渲染数据是遵循从上到下，从外到里;一个元素只能渲染一个计数器;

使用方式   //在要添加编号的元素的前缀上添加content: counter(name)"."counter(name2);  让前缀展示这个值，就能自动编号了;

3D转换

3D转换需要配和景深来使用;

perspective: 600px;   //景深，数值越小，距离观察者的距离也就越近，3D画面也就越清晰 灭点也就越大 画面就更加扭曲;

transform: rotote()translate() ;  //transform 属性的连写;单独写没有效果连写; 

3d转换于2D转换没有实质上的差别，无疑在结尾处添加一个坐标，z轴式垂直于屏幕的一个轴；

transform-style: preserve-3d | falt;    //指定后代元素如何在3D空间中呈现;

preserve-3d   //规定所有子元素在3D空间呈现;

falt  //默认值， 所有子元素在2D空间呈现;

背景

background-attachment：   //背景图片是否跟随滚动条滚动  值为fixed背景图片不会移动;  scroll  默认值，跟随移动;

background-clip：  //背景覆盖区   背景颜色覆盖的区域  ;

background-origin：  //背景图片覆盖区

上面的参数:

border-box  //默认值， 背景颜色覆盖到边框元素以内 包含边框;

padding-box  //背景颜色覆盖到内边距以内 包含内边距;

content-box  //背景颜色覆盖到内容以内 包含内容;


animation 动画库

animated   //基类  配合其他动画类形成相应的动画;


hover 库  

一组CSS 3动力悬停效果，适用于链接，按钮，标志，SVG，特色图像等。容易应用于你自己的元素，修改或仅仅用于灵感。可在CSS，Sass，和更少。

hvr   //基类  类名使用 “ - ” 拼接;