CSS笔记三：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效果

盒子模型

• 标准盒模型
  • margin 外边距
    • margin-top
    • margin-left
    • margin-bottom
    • margin-right
    • margin:同时设置上下左右四个边的外间距
    • margin:10px 20px; 设置上下为10 左右为20
    • margin:10px 20px 30px 设置顶部10，左右为20 底部为30
    • margin:10px 20px 30px 40px 上 右 下 左 顺序设置四个边的外间距
  • border 边框
    • border：四边的宽度，样式，颜色
    • border-top: 宽度 样式 颜色
      • border-top-width
      • border-top-color
      • border-top-style
    • border-left
    • border-right
    • border-bottom
  • padding 内边距
    • padding:
    • padding-top
    • padding-bottom\
    • padding-right
    • padding-left
• 怪异盒模型
  • box-sizing 定义当前元素使用哪种盒模型
    • border-box（怪异）
      • 边框和内间距不会占用盒模型的大小
    • content-box (标准)
      • 边框和内间距会占用和模型的大小
• 弹性盒模型
  • display:flex 定义父容器是一个弹性盒。
  • Justify-content 设置活检索弹性盒子元素在(主轴)方向上的对齐方式。
    • flex-start 默认值。项目位于容器的开头
    • flex-end 项目位于容器的结尾
    • center 项目位于容器的中心
    • space-between 项目位于各行之间留有空白的容器内。
    • space-around 项目位于各行之前、之间、之后都留有空白的容器内。
  • align-items 定义flex子项在flex容器的当前行的侧轴(纵轴)方向的对齐方式
    • stretch 默认值，项目被拉伸以适应容器
    • center 项目位于容器的中心
    • flex-start 项目位于容器的开头
    • flex-end 项目位于容器的结尾
  • flex-grow:number 规定项目将相对于其他灵活的项目进行扩展的量。默认是0。

动画属性

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
  }