css3（2）

一、伪类选择器
1.内容生成
内容既可以是文本，也可以是元素
1.1::before或者:before
1.2::after或者:after
1.3内容属性
向匹配的位置处添加内容
取值：1.字符串2.图片 url(路径)
1.4高度坍塌

#content::after{
			content: "";
			display: block;
			clear:both;
		}

1.5外边距溢出

#dv::before{
			content:"";
			display: table;
			
		}

二、弹性布局
1.什么是弹性布局
主要解决一个元素中的子元素的布局方式，为布局提供最大的灵活性
2.弹性布局的概念
2.1.弹性布局的容器
要把子元素布局成弹性布局的父元素成为容器
2.2.弹性布局的项目
要布局的元素成为项目
2.3.主轴
项目排列的方向，成为主轴
项目们横向排列，主轴就是x轴
项目们纵向排列，主轴就是y轴
2.4.交叉轴
与主轴垂直的交叉方向，称之为交叉轴
3.语法
将元素变为弹性容器之后，那么他的所有子元素变为弹性项目
所有的项目都允许按照弹性布局的方式排列
display:flex,将块级元素变为容器
　　　inline-flex,将行内元素变为容器

注意：
3.1.元素设置为flex容器之后
子元素项目中的float/clear/vertical-align失效
3.2.元素设置flex容器之后，子元素允许修改尺寸
3.3.容器的对齐方式text-align失效
4.容器的属性
4.1flex-direction 方向
设置主轴的方向
取值：
1.row 默认值，主轴是x轴，主轴的起点是x左端
2.row-reverse 主轴是x轴，主轴的起点是右端
3.column主轴是y轴，主轴的起点是顶端
4.column-reverse主轴是y轴，主轴的起点是低端
4.2flex-wrap不压缩，换行
当一个主轴排列不下所有的项目时，可以设置换行显示
取值：
1.nowrap 默认值，空间不够也不换行。项目们会自动缩小
2.wrap 换行
3.wrap-reverse 换行并反转
4.3flex-flow
是flex-direction和flex-wrap的缩写
取值：
1.row nowrap 默认值
2.column wrap 组合
4.4justify-content
取值
1.flex-start，在主轴的起点对其
2.flex-end，在主轴的终点对其
3.center ，居中对其
4.space-between，两端对齐
5.space-around，左右间距相同 项目和项目之间的距离是项目和容器之间距离里的两倍
6.space-evenly 项目与项目之间的距离及项目与容器之间的距离都相同
5.align-items
项目在交叉轴上的对其方式
取值：
5.1flex-start 默认值，在交叉轴起点对齐
5.2flex-end ，在交叉轴终点对齐
5.3center ，在交叉轴居中对齐
5.4baseline，在交叉轴基线对齐
5.5stretch，如果交叉轴设置了尺寸，则在交叉轴上沾满所有空间
6.项目属性
这个属性只能设置在某个项目上
对其他的项目没有影响
6.1order
定义项目的排列顺序，值越小越靠近主轴起点的位置，默认值为0
取值：无单位整数
6.2flex-grow
定义项目放大的比例
如果容器有足够大的空间，项目则按照比例放大
取值：无单位整数 默认值是0
取值越大占据的剩余空间越多
6.3flex-shrink
定义项目的缩小比例，当容器空间不足时，项目应该如何缩小
取值：无单位整数 默认值是1
取值为0时不缩小
取值越大缩小越快
6.4align-self
定义当前项目在交叉轴上的对齐方式
取值：
6.1flex-start 默认值，在交叉轴起点对齐
6.2flex-end ，在交叉轴终点对齐
6.3center ，在交叉轴居中对齐
6.4baseline，在交叉轴基线对齐
6.5stretch，如果交叉轴设置了尺寸，则在交叉轴上沾满所有空间
6.6auto ，继承父元素的align-items
三、CSS hack
不同浏览器对css的解析不一样，导致生成的效果不同
我们需要针对不同的浏览器写不同的css样式
这个针对不同浏览器的编写不同css cord的过程
就叫做css hack
四、转换
改变页面中位置、大小、角度以及形状的一种方式
2D转换：只在x轴和y轴上发生转换效果
3D转换：增加了z轴 ，网页中不存在真正的3D，模拟出来的
转换属性：
1.transform
取值：
1.none 默认值 ，无任何转换效果
2.transform-function
一个或多个转换函数，多个的话，中间用空格隔开
2.转换圆点
transform-origin
取值：
px为值的单位数字
%
关键字 left/center/right top/center/bottom
取值个数：
2个值，表示圆点在x轴和y轴的位置
3个值，表示圆点在x轴y轴和z轴的位置
4.2D转换
4.1位移
改变元素在页面中的位置
4.2属性transform
取值：
4.2.1
translate(x)指定元素在x轴上的距离位移 +往右移动 反之往左
translate(x，y)
指定元素在x轴上的距离位移
x同上
y +往下移动 反之往上
translateX(x)只设置x轴上的位移
translateY(x)只设置y轴上的位移
4.3缩放
改变元素在页面中的尺寸
transform
取值：1.scale(value)
value 横向和纵向的缩放比例，默认值是1
>1放大
0<value<1 缩小
-1<value<0 反转缩小
value<1 反转放大
scale(value1,value2);
value1，沿着x轴方向放大
value2，沿着y轴方向放大
scaleX(value)，沿着x轴方向放大，scaleY(value)沿着y轴方向放大
4.4旋转
改变元素在页面中的角度
tansform:rotate(ndeg)
注意：
1.旋转是连同坐标一起旋转的，会影响旋转之后的位移效果
2.旋转圆点会影响最后的旋转效果
4.5倾斜
改变元素在页面中的形状
transform:skew(xdeg)
skewX(x)同skew(x)相同 x轴不变 y轴变
x:+ y轴向逆时针方向倾斜
x:-y轴向顺时针方向倾斜
skewY(x) y轴不变 x轴变
x:+ x轴顺时针方向倾斜
y:- x轴逆时针方向倾斜
3d旋转
（1）透视距离
模拟人的眼睛到3d转换元素之间的距离
perspective(ndeg)
此属性，要加在转换元素的父元素上
（2）3D旋转
1.rotateX(ndeg):以x轴为中心，旋转元素的角度（烤羊腿）
2.rotateY(ndeg):以y轴为中心，旋转元素的角度（旋转门）
3.rotateZ(ndeg):以z轴为中心，旋转元素的角度（摩天轮）
4.rotate3D(x,y,z,ndeg) 全方位3D旋转
x,y,z取值大于0表示参与旋转 取值为0表示部分参与
五、过渡
css的值，在一段时间内平缓的变化
1.设置过渡的属性
transition-property
取值
1.all 能使用过渡的属性，一律用过渡体现
2.具体的属性名称
能够使用的过渡属性
1.颜色属性
2.取值为数字的属性
3.转换
4.阴影
5.渐变
6.visibility