HTML5&CSS3常用属性和方法

DOM扩展

1. 获得元素 document.querySelector(‘selector’) 获得符合的第一个元素
2. document.querySelectorAll(‘selector’) 获得符合的所有元素
3. 类名操作 Node.classList.add(‘class’) 添加类名
   Node.classList.remove(‘class’) 移除类名
   Node.classList.toggle(‘class’) 切换类名
   Node.classList.contains(‘class’) 检测类名

渐变

• linear-gradient 线性渐变 方向 to top/left/right/bottom
  颜色+百分比
• radial-gradient 径向渐变 半径 像素值
  - at 位于
  - 圆心（x，y） 百分比或者像素值
  - 颜色+百分比

变换

• transform(2D) 实现2D转换 matrix(a,b,c,d,e,f) 矩阵，扯淡，不会（不过参数是数字）
  -translate(x,y) 表示移动距离（长度单位或者百分比）
  -rotate(x,y) 表示旋转角度（角度单位）
  -scale(x,y) 数值，大于1表示放大，小于1表示缩小
  -skew(x,y) 表示斜切角度（角度单位）

• transform(3D) 实现3D转换 martrix()
  translate(x,y,z) 表示对象的3d位移
  rotate3d(x,y,z) 表示对象的3d旋转
  scale3d(x,y,z) 表示3d缩放

• perspective 表示透视距离 像素值 一般取值600-1200px

• transform-origin 设置转换角度 百分比，百分比 第一个参数控制水平方向，第二个控制垂直方向

• transform-style 设置元素在什么空间 flat 默认值，2d空间
  preserve-3d 将子元素位于三维空间内

• perspective-origin 设置透视点坐标值 百分比，百分比 第一个参数控制水平方向，第二个控制垂直方向
  单词 center，left，right，top，center，bottom等
• backface-visibility 设置背部是否可见 visible 默认值 可见
  hidden 背面元素不可见

过渡

• transition 符合属性 [ none | ] || || ||

• transition-property 属性 css属性
  all 设置所有属性

• transition-timing-function 指定过渡的速度 linear 线性过渡（匀速）
  ease 默认值
  ease-in 加速
  ease-out 减速
  ease-in-out 先慢到快在到慢
  transtion-delay 延迟的时间 time 设置延迟的时间

动画

• animation 符合属性 “ || || || || || || ||
  ”
• animation-name 动画名称 自定义名称 必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
• animation-duration 执行时间 time 动画的执行时间

• animation-timing-function 指定过渡的速度 linear 线性过渡（匀速）
  ease 默认值
  ease-in 加速
  ease-out 减速
  ease-in-out 先慢到快在到慢
  steps 设置需要多少步数

• animation-delay 延迟的时间 time 设置延迟的时间

• animation-iteration-count 循环的次数 infinite 无限循环

• animation-direction 循环的方向 normal 默认值，正常方向
  reverse 反方向运行
  alternate 先正常，再反向，并持续运行
  alternate-reverse 先反向，在正向，并交替运行

• animation-play-state 是否暂停 running 默认值
  paused 暂停、运行

• animation-fill-mode 设置对象事件之外的状态 none 默认值，不设置
  forwards 设置对象状态为动画结束的状态
  backwards 设置对象状态为动画开始的状态
  both 设置对象状态为动画结束或者开始的状态

伸缩盒子

• flex-basis 定义元素宽度 长度值 定义长度
  百分比 按照元素长宽
  auto 无特定宽度

• flex-direction 调整主轴方向 row 默认值：水平方向
  row-reverse 水平方向反向排序
  column 主轴为垂直方向
  column-reverse 垂直方向反向排序

• flex-wrap 换行不换行 nowrap 默认值：不换行，宽度不够时，会压缩子盒子
  wrap 自动换行

• flex-flow 为flex-direction和flex-wrap的复合属性，值也相同

• align-content 设置该父元素的子元素对其方式 flex-start 从主轴起始位置
  flex-end 从主轴结束为止
  center 各行向容器中间为止堆积
  space-between 平均分配举例
  space-around 平均分布，两端距离为子元素之间距离的一半
  stretch 默认值：会拉伸盒子
  当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <’ justify-content ‘> 属性类似。

• justify-content 调整主轴方向对其方向 flex-start 默认值：主轴开始方向对其
  flex-end 主轴结束方向对其
  center 各行向容器中间为止堆积
  space-between 平均分配举例
  space-around 平均分布，两端距离为子元素之间距离的一半

• align-items 调整侧轴对其方式 flex-start 默认值：主轴开始方向对其
  flex-end 主轴结束方向对其
  center 各行向容器中间为止堆积
  baseline 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

• flex 用于子元素 数值（number） 设置子盒子在主轴方向的缩放比例

• flex-grow 用于子元素 数值定义扩展比例 数值（number） 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

• flex-shrink 用于子元素 数值定义收缩比例 数值（number） 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。

• align-self 定义子元素纵轴对其方式，可以覆盖父元素的align-items属性 auto 默认值，跟随父元素
  flex-start 默认值：主轴开始方向对其
  flex-end 主轴结束方向对其
  center 各行向容器中间为止堆积
  baseline 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  stretch 默认值：会拉伸盒子
  order 控制子元素顺序 整数 设置或检索弹性盒模型对象的子元素出現的順序（谁小谁在前面）