CSS3选择器
层级选择器：
E>F{} 子元素选择器,选中e元素中的子元素f
E+F{} 相邻兄弟元素选择器，选中紧挨着e的那一个f兄弟元素
E~F{} 通用兄弟选择器，选中e后所有的f兄弟元素
属性选择器:
e[attr]{} 选中e元素,且有attr属性
e[attr="value"]{} 选中e元素,且attr属性值为value
e[attr~="value"]{} 选中e元素,且attr属性值包含value
【拓展】
e[attr^="value"]{} 选中e元素,且attr属性值以value开头
e[attr$="value"]{} 选中e元素,且attr属性值以value结尾
e[attr*="value"]{} 选中e元素,且attr属性值包含value
e[attr|="value"]{} 选中e元素,且attr属性值以value或者value-开头
结构伪类选择器:
X：first-child{} 选中x元素，且x元素是第一个子元素
X：last-child{} 选中x元素，且x元素是最后一个子元素
X：nth-child（n）{} 选中指定位置的x元素
n是从0开始的自然数
2n = even 偶数序列
2n-1 = odd 奇数序列
X：only-child{} 选中x元素，且只有x一个元素
目标伪类选择器：
.box:target{} 当box被关联的时候选中
【注】需要结合锚点链接一块使用
UI元素状态伪类选择器：
：enabled{} 可用状态
：disabled{} 禁用状态
：checked{} 选中状态
：：selection{} 选中文本状态，主要针对背景颜色 文本颜色
否定选择器：
.box:not(p){} 选中.box元素,但是排除.box元素中标签为p的元素
动态伪类选择器:
:link{} 未点击状态
:visited{} 访问过后的状态
:hover{} 鼠标悬停的状态
:active{} 鼠标按下状态
CSS3相关属性
text-shadow：水平阴影 垂直阴影 模糊度 阴影颜色；
background-size：；
px % cover contain
【注】多背景设置：background：url(),url()
圆角:
border-radius:10px
border-radius:10px/40px
盒模型:
box-sizing:
border-box 怪异盒模型(ie盒模型)
content-box 标准盒模型
标准盒模型:
W=width+左右padding+左右border
H=height+上下padding+上下border
怪异盒模型
W=width（包含了padding border）
H=height（包含了padding border）
flex弹性盒布局
弹性盒：
设置为弹性盒后失效的属性：float clear vertical-align
将父元素设置为弹性盒后，有容器属性和项目属性
容器属性是：设置在容器上，影响的是项目
项目属性是：设置在项目上，影响的是项目本身
默认主轴为水平方向，侧轴为垂直方向
容器（父元素):
1:display:设置为弹性盒;
flex
inline-flex
2:flex-direction:设置主轴方向;
row 水平主轴
row-reverse 反向水平主轴
column 垂直主轴
column-reverse 反向垂直主轴
3:justify-content:设置主轴对齐方式;
flex-start 起始位置
center 居中
flex-end 结束位置
space-around 两段平分
space-between 两段对齐
space-evenly 平均分配
4:align-items:侧轴对齐方式;
flex-start 起始位置
center 居中
flex-end 结束位置
stretch 拉伸
baseline 文本底部对齐
5:flex-wrap:是否换行;
wrap 换行
wrap-reverse 反向换行
6:align-content:多跟侧轴对齐方式;子元素换行的情况下使用
flex-start 起始位置
center 居中
flex-end 结束位置
space-between 两段对齐
space-around 两段平分
space-evenly 平均分配
项目(子元素):给子元素设置,影响子元素本身
1:align-self:侧轴对齐方式;
flex-start 起始位置
center 居中
flex-end 结束位置
stretch 拉伸
auto 默认值
2:order:反向排序;
数字越大,越靠后,反之靠前,可以为负数
3:flex:缩 放 大小;
flex-grow:放大;
flex-shrink:缩小;
flex-basis:大小;
多列布局:
column-count:列数;
column-gap:列间距;
column-rule:列边框大小 形态 颜色;
column-span:是否跨列;
none 不跨列
all 横跨所有
column-fill:填充方式;
auto 优先填满上一列
balance 尽可能平均分配
column-width:列宽;
columns:列数 列宽;
CSS3渐变+过渡+旋转
线性渐变:
background-image:linear-gradient(方位,颜色值1,颜色值2...);
重复渐变: background - image: repeating - linear- gradient (范围，颜色值1 ,颜色值2....);
径向渐变:
background: radial - gradient(原心点坐标,渐变大小，颜色值1,颜色值2...);
重复渐变: background:repeating radial-gradient (原心点坐标,渐变大小，颜色值1 ,颜色值2...);
过渡:
transition:过渡属性过渡时间延迟时间动画类型;
transition- property:过渡属性;
transition- duration:过渡时间;
transition- delay:延迟时间;
transition- timing- function:过渡动画类型;
linear 匀速运动
ease 减速运动
ease-in慢慢加速
ease-out慢慢减速
ease- in-out先加速，后减速
贝塞尔曲线
2D：
transform:功能函数;
功能函数:
位移：
translateX( )
trans lateY( )
translate(x)
translate(x,y)
[注]可以为负数，为相反反向
缩放：
scaleX( )
scaleY（）
scale(xy)
scale(x,y)
[注]可以为负数，为相反反向
1是默认大小
绝对值比1大，放大
绝对值比1小，缩小
倾斜：
skewX( )
skewY()
skew(x)
skew(x,y)
旋转:
rotateX( )
rotateY()
rotate(z )
景深:近大远小的效果
perspective:;给父元素设置,作用到子元素身上
3D环境:
transform-style:;
flat 2D环境
preserve-3D 3D环境
3D功能函数:
位移:
translatez()
translate3D(x,y,z)l
旋转:
rotatez()
rotate3D(x,y,z,deg）
x y z 取值为0-1 0为否 1为是 deg是角度
缩放:
scalez()
scale3D(x,Y;z)
动画:
定义动画
方式一:
@keyframes namf
from{}
to{}
方式二:
@keyframes namef
0%{}
50%{}
100%{}
调用动画
animation:动画名字 运动时间
调用动画
animation:动画名字 运动时间 延迟时间 动画类型 运动次数 运动方向;
animation-name:动画名称;
animation-duration: 运动时间;
animation-timing-function:动画类型
lienar
ease
ease-in
ease-out
ease-in-out
step-start 逐顺动画
animation-iteration-count: 运动次数;
具体数字
infinite 无限循环
animation-direction: 运动方向;
normal 常规运动
reverse 反向运动
alternate 先正后反
alternate-reverse 先反后正
animation-play-state:是否运动;
runnning 运动
paused 暂停
关于animation 和 transition 的区别:
相同点:都是随着事件的变化而改变元素的属性值
不通电:
前者页面加载完立即执行;后者需要触发方式
前者可以有多个状态;后者还有一个状态
grid网格布局
display:设置为网格布局;
grid
inline-grid
grid-template-columns:分列1 分列2 分列3;
px % fr份数 repeat(列数,大小) repeat(auto-fi11,大小) 根据大小确定列数
auto 自适应 minmax(最小值,最大值)
grid-column-gap:列间距
grid-row-gap:行间距;
grid-gap:行间距 列间距
[注]新版已经省略grid- 前缀
column-gap:列间距
row-gap:行间距;
gap:行间距 列间距
grid-template-areas:"分区1 分区2 分区3”
[注]分区只能分出矩形区
需要结合项目属性调用: grid-area:调用分区；
justify-items:内容在单元格内部的水平对齐方式;
align-items:内容在单元格内部的垂直对齐方式;
综合写法:place-items:垂直 水平;
start 起始位
center 居中
end 结束位
stretch 拉伸
justify-content:网格整体在容器内的水平对齐方式;
align-content:网格整体在容器内的垂直对齐方式;
综合写法:place-content:垂直 水平;
start 起始位
center 居中
end 结束位
stretch 拉伸
space-between 两端对齐
space-around 两端平分
space-evenly平均分配
