CSS3-千峰
.child>li{ }---只作用在儿子标签，孙子标签无影响
.child+li{ }---这个标签后的第一个li
.child~li{ }---这个标签后的所有li
[class]{ }
div[class]{ }
div[class=box1]{ } ---完全匹配
div[class~=b]{ } ---包含匹配calss="box1 box2"
div[class^=b]{ } ---以这个b开头的
div[class$=b]{ }---以这个b结尾的
伪类
last-child---最后一个
first-child---第一个
nth-child(2)---第2个
nth-child(even)偶数2n-----nth-child(odd)奇数2n+1或2n-1
div p:only-child()---div下只有一个p的
emply---标签内无内容的和子元素，空格也不行
html,body{ ... }--- :root,body{ ... }
div:target{ }---手风琴--利用描点效果，点击显示内容
input标签伪类
input:enabled{ }---背景色
input:disabled{ }---按钮背景色 <input type="submint" disabled>
input:focus{ }---聚焦时的背景色
input[type=checkbox]{ apperance:none;//去掉默认样式}
[type=text]{ }
盒子
box-sizing:border-box;---怪异盒---不会因为边框的宽度挤压内容---自动换行
box-sizing:content-box;---标准盒
box-shadow:px px px #;---外部阴影
box-shadow:px px px # inset; ---内部阴影
box-radius：%/px % % %;---角度
border-top-left-redius:---左上角---其他同理
@font-face{ ---引入字体
font-family：kerwin; ---随意取名
src:url(font/aaa.ttf)；---引入下载好的字体
}
弹性盒
display:flex;
影响：
1.子元素默认横向排列
2.行内元素变成块级元素
flex-direction:colum;竖直排列---row水平---row-reverse---colum-reverse
justify-content:flex-start;靠左---跳转主轴对其方向---flex-end靠右--ecnter居中(水平)
---space-between两端对齐（贴紧左右边框）---space-around两端与边框有距离
align-items:flex-start;调整侧轴flex-end，center（竖直）
flext-wrap:wrap;---出现会挤压式换行
align-content:flex-start;---控制行间距，值同（j-c）---atretch()沾满高度横向，纵向是宽度沾满---baseline位置不变
flex:1;---沾满剩余空间
flex:10;---占1/10同一布局（横/竖）已存在另一个felx:1；
flex-shrink:1/0;---横向滚动
移动端开发
<meta name="viewport" content="width-device-width,initial-scale=1.0,user-scalable=no">
::-wevkit-scrollbar{ }----定义滚动条
多列布局
column-count：5；---控制列数
column-gap：30px;---列间距
column-rule:2px soild red;---裂边框
column-fill:auto;---列高度统一auto把父盒子沾满
column-width:500px;---列宽度
break-inside:avoid;---禁止盒子内部折行
响应式布局
@media screen and (max-width:1000px) and (min-width:500px){
//500-1000
body{ }
}
@media screen and （orientation:portait){
//orientation:portait---竖屏
//orientaation:landscape---横屏
body{ }
}
rem与em
html{
font-size:100px;
}
app适配像素单位---随着浏览器窗口大小改变，字体大小跟着改变
px
em相对单位，相对于父元素的字体大小
rem相对单位，相对于根元素(html)的字体大小 2rem---html的2倍
fontsize计算
document.documentElement.style.fontSize=documentElemrtn.clientWidth/375*100+'px'
fontsize = 当前设备的CSS布局宽度/物理分辨率(设计稿的宽度)*基准(font-size)
vh 与 vw(view-width)
375px = 100vw
1vw = 3.75px
1px = 100/375px = 0.2667vm
包含滚动条
100vw 窗口大小
100% 刨除滚动条，甚于的空间
渐变
---线性渐变
linear-gradient(red,tellow,green,blue)
linear-gradient(to right,red,green)
---支持方向：to left ,,,, to right ,,,,
---角度写法：linear-gradient(90 degt,red,green)
---径向渐变
radial-gradient(circel,red 10%,green 30%)---由内向外圆形渐变
% ---过渡占比，和为100%没有渐变效果
radial-gradient(x% x%,m,#,#,#,#)---前面百分比控制中心点位置，
m=>
closest-side---最近边
closest-corner---最近角
farthest-side---最远边
farthest-corner---最远角
repeating-linear-gradient(...)---重复
过渡
transition:height 2s linear 2sr;---高度变化时间,匀速,延迟
transition:all 2s linrar;---所有变化时间
ease-in---匀加速
ease-out---匀减速
速度控制网站：https://cubic-bezier.com
transition-property---变化方式 ---height background
transition-duration---变化时间
transition-delay---变化速度
transition-timing-function---变化延迟
transform:
平移
水平移动：translate(tx,0)---向右移动，translate(-tx,0)---向左移动
垂直移动：translate(0,-ty)---向上移动，translate(0,ty)---向下移动
对交移动：translate(tx,ty)---向右下角移动
translateX():水平方向移动一个对象，正向右，都向左
translateY():纵轴方向移动一个对象，正向下，负向上
scale()缩放
scale(sx,sy)---元素x轴(水平)放大sx倍，y轴(纵横)放大sy倍
旋转
transform:rotate(80deg)---正数顺时针，负数逆时针
rotateX()---X轴旋转
rotateY()---Y轴旋转
rotateZ()---绕中心点旋转
transform-origun:left top;----沿着左上角旋转
倾斜
skew(x,y)
skewX(30deg)---倾斜30度---正数拽着右下角向右倾斜，负的拽着左下角向左倾斜
skewY---正数拽着右下角向上倾斜，负的拽着左下角向下倾斜
Position的属性值有：
1. Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位
2. Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。
3. Relative：相对定位，是相对于其原本的位置来定位的。
4. Static：默认值，没有定位。
5. Inherit：继承父元素的position值。
关键帧动画
transition---触发事件（hover,click等）
animation---无须触发任何时间
animation-delay 延迟时间
animation-iteration-count:number/infinite无限---循环次数
animation-direction:normal正常发向/reverse反方向/alternate先正再反持续交替/
alternate-revaerse先反在正持续交替
/*声明动画*/
animation:随意名 2s linear 2s/infinite(无限次);
@keyframes 随意名 {
from{ ... }
to{ ... }
}
@keyframes 随意名 {
n%{ ... }
m%{ ... }
...
}
animation:run 2s steps(1000,end)---跳跃式
end---最后一帧看不带动画结束
start---看不到第一帧，从第一种跳跃到最后一帧
step-end
animation动画库：http://www.animate.net.cn/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<div class="animated bounce" id="dowebok"></div>
animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。
3D
transform-style:preserve-3d;---flat(2d)
平移---translateX():
旋转---rotateZ()
缩放---scaleZ()
倾斜---skewZ()
opacity:0.2; ---背景透明度
网络布局
display:grid---块级网络
inline-grid---行内块网络
grid-templete-rows:20px 20px 20px;---3行---可%
grid-template-columns:20px 20px 20px---3列
grid-auto-flow:column;改变顺序
repeat
---repeat(3.33.33%)/repeat(auto-fill,20%)
fr片段
grid-templete-rows：1fr 1fr 1fr;---定义网格线的名称和网格轨道的尺寸大小
minmax
grid-templete-rows:minma:(100px,200px) 200px 400px;
间距
grid-template-areas:'a b c'
'd e f'
grid-area:a;---置顶元素内容
复合属性
justify-items:stretch/center/start/end---以默认方式沿适当轴线对齐到每个盒子
place-items:center stretch/center start/start end/end center;---可以同时沿着块级和内联方向对齐元素
grid-cloumn-start:;
grid-cloumn-end
grid-row-start:;
grid-row-end;---项目将横跨多少行，或者项目将在在哪条行线上结束。
grid-cloumn:1/4;
grid-rows:1/5;---定义了网格单元与网格行（row）相关的尺寸和位置
grid-gap:px;---用来设置网格行与列之间的间隙