大前端学习总结

5) 样式规则
    1. 字体规则
      可被继承
      font-family 字体
        字体栈 "Microsoft YaHei","宋体"
        在浏览器所在pc从字体栈顶到底寻找字体，找不到使用默认字体
      font-size   字体大小
        12px
      font-weight 字体粗细程度
        100~900
        bold
        bolder
      font-style  是否是斜体
        italic
        normal
      color       字体颜色
      line-height 行高
      长度的相对单位
        1px
        em    相对于当前元素上的字号
        rem   相对于根元素上的字号  
      font  速写形式
      font: font-style font-weight font-size/line-height font-family
        font: normal normal 14px/1.2 '宋体','微软雅黑';
        font: 14px/1.2 '宋体','微软雅黑';
      
      网络字体(iconfont)
        应用
        分析实现过程
          @font-face {
            font-family:"iconfont"
            src:
          }

          .iconfont {
            font-family:"iconfont"
          }
          .icon-Backward-Button:before {
            content: "\e82e";
          }
    2. 文本规则
      text-align  文本在容器中显示方式
        center
      text-decoration-line:underline;
      text-decoration-style: double;
      text-decoration-color: lightsalmon;
      text-decoration: none;
      text-indent     缩进
      text-transform  控制大小写
      white-space：容器内的文本是否会主动换行
        nowrap  不换行
      overflow: 容器内的内容超出部分如何处理？
        hidden
      text-overflow: 文本超出部分如何显示提示？
        ellipsis '...'
    3. 列表规则
      用于设置有序列表、无需列表、自定义列表的显示方式 ul、ol、dl
      list-style:none;
    4. 其他规则
      cursor:pointer;
      visibility:hidden
      opacity:0.2
      display:none; 【三十年河东三十年河西】
        改变元素的显示方式
        none
        block   将行内元素转换为块元素
        inline  将块元素转换为行内元素
        inline-block  行内块元素
          与其他行内元素共享一行空间
          可以指定宽高
      面试题：
        如何将一个文本在块元素进行水平居中？
          text-align:center
        如何将一个文本在块元素进行垂直居中？
        如何将一个块元素进行水平居中？【3种】

      overflow:
        overflow-x,overflow-y速写
        overflow:hidden;
        overflow:scroll; 
        overflow:auto;
        容器，容器的内容的大小超过容器本身
      outline
        外圈线框
      outline-color: pink;
      outline-width: 2px;
      outline-style: solid;
      outline-offset: 1px;
      outline:
    5. 盒子规则
      盒子 - 块元素
      margin  外边距（盒子外边框距离其他元素的距离）
        margin: 10px;       上右下左
        margin: 10px 20px;  上下，左右
        margin: 10px 20px 30px;   上 左右 下
        margin: 10px 20px 30px 40px; 下 右 下 左
        速写形式，外边距，上下外边距会进行重叠
        margin-top
        margin-right
        margin-bottom
        margin-left
      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;
      padding 内边距(内容距离盒子内边框的距离)
        padding: 10px;       上右下左
        padding: 10px 20px;  上下，左右
        padding: 10px 20px 30px;   上 左右 下
        padding: 10px 20px 30px 40px; 下 右 下 左
        速写形式，外边距，上下外边距会进行重叠
        padding-top
        padding-right
        padding-bottom
        padding-left
      width/height
        宽高
      box-sizing(盒子模式)
        内容盒子（普通盒子 ， 默认盒子）
          content-box;
          盒子实际占据的宽度 2borderWidth + 2padding + width
          盒子实际占据的高度 2borderWidth + 2padding + height
        边框盒子（怪异盒子 ie低版本）
          border-box;
          盒子实际占据的宽度 :width
            width = 2borderWidth + 2padding + 内容宽
          盒子实际占据的高度 :height
      border-radius:2px
          外圆    300px 
          内圆    200px
          期望 内圆由200 变化到250，并且，中心点不变
      background
        background-color 
        background-image
        background-repeat
        background-size
        background-position
        background-clip
        background-orign
        background-attachment
        background  速写形式
    6. 默认文档流 （y轴）
      块元素， 独占一行空间，高度由内容决定。块元素默认从上往下排列