CSS基本属性

字体属性

• color 字体颜色
• font-style 指定文本的字体样式(正常、斜体)
• font-size 指定文本字体大小
• font-family 定义文本使用某个字体
• font-weight 指定文本的粗细
• font-variant 设置字体为小型大写字母
• font 简写属性：斜体/小型大写字母/粗体/(字体/行高)/族科
• letter-spacing 设置字的间距
• word-spacing: 设置单词的词间距(对中文无效)
• opacity 设置颜色的透明度
• overflow | overflow-x | overflow-y 当内容溢出元素框时隐藏|自动|显示混动条
• text-overflow 让溢出的文字以省略号显示
• white-space 设置文字是否在同一行显示

文本属性

• text-align 元素内容对齐方式
• text-decoration 指定文本是否有修饰，默认值为none。
• text-indent 文本首行缩进
• word-wrap 设置当前行超过指定容器的边界时是否换行。
• vertical-align 设置对象内容的垂直对齐方式。
• line-height 设置对象的行高

背景属性

• background-color 背景颜色 默认值：transparent透明的
• background-image 背景图片
• background-repeat 背景图片是否重复
• background-size 设置背景图片大小
• background-position 背景图片位置(相对于外层容器)
• background-attachment 背景图片是否随内容滚动
• background 背景属性简写属性

尺寸属性

• width 设置元素的宽度
• height 设置元素的高度
• min-height 设置最小高度
• max-height 设置最大高度

列表属性

• list-style-type 设定列表的符号样式
• list-style-image 使用指定的图片来代替列表的序号
• list-style-position 设定列表需要的位置
• list-style 列表简写属性

定位属性

• position 设定元素的定位方式 calc
  • static 静态定位(默认)
  • relative 相对定位
  • absolute 绝对定位
  • fixed 根据窗口定位
• z-index 设定定位元素Z轴的距离

布局属性

• display 设置元素的显示方式
  • inline 将元素作为行内元素样式显示
  • block 将元素作为块状元素显示
  • inline-block 设定一个元素既可以设定宽高属性，也可以在一行显示。
  • none 设置元素不显示(隐藏元素)
• visibility 设置元素是否显示
  • visible 显示
  • hidden 隐藏

浮动属性

• float 浮动属性
  • left 设置元素向左浮动
  • right 设置元素向右浮动
  • none 设置元素不浮动(默认值)
• clear 用于清除其他元素的浮动属性对当前元素的影响
  • left 用于抵消float:left效果
  • right 用于抵消float:right效果
  • both 用于清除float效果

动画属性

1. 浏览器私有前缀
   • -moz- Firefox
   • -webkit- chrome safari
   • -ms- IE
   • -o- Opear
2. 圆角、阴影、渐变
   • border-radius 圆角
     • border-radius:4个角水平半径/4个角垂直半径
   • 阴影
     • 盒子阴影 box-shadow：阴影1，阴影2……；
       • 阴影格式:水平偏移位置 垂直偏移位置 模糊度 外延值 颜色 内置阴影；
     • 文字阴影 text-shadow：阴影1，阴影2……；
       • 阴影格式:水平偏移位置 垂直偏移位置 模糊度 颜色 ;
   • 渐变
     • linear-gradients 线性渐变/* 从上到下，蓝色渐变到红色 */
       ​
       linear-gradient(blue, red);
       ​
       /* 渐变轴为45度，从蓝色渐变到红色 */
       ​
       *linear-gradient(45deg, blue, red);
       ​
       /* 从右下到左上、从蓝色渐变到红色 */*
       ​
       linear-gradient(to left top, blue, red);
       ​
       /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
       ​
       linear-gradient(0deg, blue, green 40%, red);
     • radial-gradient 径向渐变/*形状 大小 as 位置*/
       background-image: radial-gradient(shape size at position, start-color, …, last-color);
3. 转换Transform
   • transform2D
     • translate(x,y) 2D转换转换
     • scale(x,z) 2D缩放
     • rotate(angle) 2D旋转
     • skew(x-angle,y-angle) 2D倾斜
   • transform3D
     • translate3d(x,y,z) 定义3D转换
     • translateZ(z) 定义3D转换，只适用Z轴的值
     • scale3d(x,y,z) 定义3D缩放
     • scaleZ(z) 通过设置Z轴的值来定义3D缩放转换
     • rotate3d(x,y,z,angle) 定义3D旋转
     • rotateZ(angle) 定义沿着Z轴的3D旋转
     • perspective(n) 为D3转换元素定义透视视图
4. 过渡Transition
   • 过渡指定四要素
     1. transition-property 过渡属性，如background,color等。
     2. transition-duration 过渡所需要时间。
     3. transition-timing-function 过渡函数。既过渡的速度，方式等。
        • ease 默认值，规定慢速开始，然后变快，然后慢速结束过渡效果
        • linear 匀速
        • ease-in 规定以慢速开始，加速效果。
        • ease-out 规定以慢速结束，减速效果。
        • ease-in-out 规定以慢速开始和结束，先加速后减速效果。
     4. transition-delay 过渡延迟时间。表示开始执行的时间。
     5. transition 过渡属性简写属性
5. 动画animation
   • animation 属性用于控制动画
   • 调用由@keyframes定义的动画
   • animation属性是一个简写属性
   • animation动画子属性
     • animation-name 调用动画，规定需要和keyframes的名字一致
     • animation-duration 动画完成一个周期所需要的时间
     • animation-timing-funtion 规定动画的速度变化类型
     • animation-delay 播放之前的延迟时间
     • Animation-iteration-count:数值|infinite 播放次数
       • infinite 表示无限次播放
     • animation-direction:normal|alternate 动画播放方向
       • normal 为默认值，表示正常播放
       • alternate 表示轮流播放，既动画会在奇数次正常播放，而在偶数次向后播放。
     • animation-fill-mode:forwards 动画停在最后一帧
       • 默认值为none
     • animation-play-state:paused | running 属性规定动画正在运行还是停止
       • 默认是为running

媒体查询

• 使用Media Query的基本语法@media mediatype and | not | only (media feature) {
  CSS-Code
  }