CSS3：样式规则

1.字体规则（可被继承）：

  1） font-family 字体
        字体栈 "Microsoft YaHei","宋体"
        在浏览器所在pc从字体栈顶到底寻找字体，找不到使用默认字体
  2）font-size   字体大小
        12px
  3） font-weight 字体粗细程度
        100~900
        bold
        bolder
  4） font-style  是否是斜体
        italic
        normal
  5）color       字体颜色
  6）line-height 行高
      （长度的相对单位
        1px
        em    相对于当前元素上的字号
        rem   相对于根元素上的字号  ）
  7）font  速写形式
        font: font-style font-weight font-size/line-height font-family
        font: normal normal 14px/1.2 '宋体','微软雅黑';
        font: 14px/1.2 '宋体','微软雅黑';

2.文本规则：

  1）text-align  文本在容器中显示方式
        center
  2）text-decoration-line:underline;          下划线
  3）text-decoration-style: double;           文本装饰线条的形状
  4）text-decoration-color: lightsalmon;   文本装饰线条的颜色
  5）text-decoration: none;               文本的修饰线外观的(下划线、上划线、贯穿线/删除线或闪烁)
  6）text-indent     缩进
  7）text-transform  控制大小写
  8）white-space：容器内的文本是否会主动换行
        nowrap  不换行
  9）overflow: 容器内的内容超出部分如何处理？
        hidden
10）text-overflow: 文本超出部分如何显示提示？
        ellipsis '...'

3.列表规则：

  用于设置有序列表、无需列表、自定义列表的显示方式 ul、ol、dl
      list-style:none;

4.其他规则：

   1）cursor:pointer;    设置鼠标放上去显示手型
   2）visibility:hidden   定义一个元素是否是可见的（hidden为隐藏）
   3）opacity:0.2          设置元素的不透明级别
   4）display:none;      隐藏页面元素（它使元素完全不占空间，连盒模型也不生成，任何基于该元素的用户交互操作也不会起作用）
        改变元素的显示方式
        none
        block                将行内元素转换为块元素
        inline                将块元素转换为行内元素
        inline-block      行内块元素   与其他行内元素共享一行空间  可以指定宽高

  5）overflow:        控制内容溢出元素框时在对应的元素区间内添加滚动条
        overflow-x,overflow-y速写
        overflow:hidden;
        overflow:scroll; 
        overflow:auto;
  6）outline           外圈线框
      outline-color: pink;
      outline-width: 2px;
      outline-style: solid;
      outline-offset: 1px;

5.盒子规则：

  1）margin  外边距（盒子外边框距离其他元素的距离）
        margin: 10px;       上右下左
        margin: 10px 20px;  上下，左右
        margin: 10px 20px 30px;   上 左右 下
        margin: 10px 20px 30px 40px; 下 右 下 左
        速写形式，外边距，上下外边距会进行重叠
        margin-top
        margin-right
        margin-bottom
        margin-left
  2）border 边框
        border-width
          border-top-width
          border-right-width
          border-bottom-width
          border-left-width
        border-style
          border-top-style
          border-right-style
          border-bottom-style
          border-left-style
        border-color
          border-top-color
          border-right-color
          border-bottom-color
          border-left-color
        border 速写
          border: 2px solid #ccc;
  3）padding 内边距(内容距离盒子内边框的距离)
        padding: 10px;       上右下左
        padding: 10px 20px;  上下，左右
        padding: 10px 20px 30px;   上 左右 下
        padding: 10px 20px 30px 40px; 下 右 下 左
        速写形式，外边距，上下外边距会进行重叠
        padding-top
        padding-right
        padding-bottom
        padding-left
  4）width/height
        宽高
  5）background
        background-color 
        background-image
        background-repeat
        background-size
        background-position
        background-clip
        background-orign
        background-attachment
        background  速写形式

6.默认文档流（y轴）：

   块元素， 独占一行空间，高度由内容决定。块元素默认从上往下排列

7.浮动布局：

  1）float:left
      浮动元素：
        （1) 脱离文档流
        （2) 块元素的宽度不再是100%，由内容决定
        （3) 块元素不再支撑其父元素
        （4) 同一层次（兄弟关系）浮动元素会在一行排列，当浮动元素宽度总和大于父元素的时候会发生换行。
  2）clear
      清理浮动
        left  不与左浮动元素在同一水平线上
        right 不与右浮动元素在同一水平线上

8. 伸缩盒布局（x轴）
9. 定位布局（z轴）