- 选择器
1.ul li:first-child{}第一个孩子
2.ul li:last-child{}最后一个孩子
3.ul li:nth-child(1){}第几个孩子
odd奇数 even偶数
4.ul li:only-child{}只有一个孩子
5.h1:first-of-type{}第一个兄弟
6.h1:last-of-type{}最后一个兄弟
7.h1:nth-of-type(1){}第几个兄弟
8.h1:only-of-type{}只有一个兄弟
9.div:not(".text"){}刨除某一种元素
10.div:empty{}选中空标签
- 变换transform //变形工具箱
1.translate(x,y,z)平移 默认值是给x轴
单位：像素或百分比
translateX()水平移动 translateY()垂直移动 translateZ()前后移动
2.scale(x,y,z)缩放 默认值是给所有轴
单位：数字，可以为小数，不可以为负数
scaleX()宽度 scaleY()高度 scaleZ()厚度
3.rotate(x,y,z)旋转 默认值给z轴
单位：度数deg
rotateX()水平旋转 rotateY()垂直旋转 rotateZ()中心轴
4.skew(x,y)扭曲 默认值是给x轴
单位：度数deg
skewX()水平扭曲 skewY()垂直扭曲
transform-style:preserve-3d开启3D效果
perspective立体视觉 单位：像素或百分比或数字
transform-origin:x y z 偏移中心点 单位：像素或百分比 默认左上为0
- 过度
1.transition-property指定过度属性
all所有 none不指定
2.transition-duration过度时间
单位：秒数s
3.transition-timing-function动画类型
linear线性 ease平滑 ease-in由慢到快 ease-out由快到满 ease-in-out由慢到快再到慢
4.transition-delay延迟时间
单位：秒数s
简写：transition：width 1s ease 0.5s
- 动画
1.animation-name动画名称
2.animation-duration动画时间 单位：秒数s
3.animation-timing-function动画类型
4.animation-delay延迟时间 单位：秒数s
5.animation-iteration-count循环次数
单位：数字 infinite无限循环
6.animation-direction是否反向运动
nromal默认 alternate正反交替 必须要设置循环次数大于2
7.animation-play-state动画状态
running运行 paused停止
8.animation-fill-mode 动画时间之外的状态
none不设置 forwards结束状态 backwards开始状态
- 执行动画
@keyframes 动画名称{
方法一
from{}
to{}
方法二
0%{}
50%{}
100%{}
}
- 多列布局
1.column-width指定列的宽度 单位：像素或百分比
2.column-count指定列数 单位：正整数
3.column-gap间距 单位：像素或百分比
4.column-rule 设置列的边距
column-rule-width边框粗细
column-rule-style边框样式
column-rule-color边框颜色
5.column-span横跨所有列
all所有 none不设置
6.column-fill高度统一
auto自适应 balance按最高一列统一
7.column-break-before之前断行
8.column-break-after之后断行
auto自适应 always断行 avoid避免断行
9.column-break-inside是否断行
auto自适应 avoid避免断行
- 媒体类型和查询条件
例如：
@media all and (min-width: 800px) and (max-width:1000px ){
.box{
background-color: blue;
}
}
属性
1.all 代表所有设备都支持
2.and 连接符
3.min-width最小宽度
4.max-width 最大宽度
设备属性
1.all支持所有设备 2.screen所有显示设备 3.aural听觉设备 4.braille点字触觉设备
5.bandled便携设备 6.projection投影设备 7.embossed盲文打印机 8.tty打字机
导入响应式css
<link rel="stylesheet" href="" media="all and (min-width:800px)">
自适应标签
<meta name="viewport" content="width=device-width,initial-scale=1">
属性
name="viewport"做响应式的
width=device-width 移动设备宽度自适应
initial-scale=1 初始缩放比例
minimum=0.5 最小缩放量
maximum=1.5 最大缩放量
user-scalable=yes是否可调整缩放
宽度适应值
电脑端：1000px-1200px
平板:1000px-768px
手机:768px以下
响应式页面的注意事项：
1.设置字体尺寸自适应可以用百分比，em，rem
2.设置图片宽高自适应:width:100%;height:auto
3.布局标签自适应用百分比，em，rem
4.设置内外边距自适应用百分比，em，rem，减少使用内边距
5.浮动元素串行不算bug，可以自适应页面，但是父类不要设置固定高度
