选择器优先级与提权方式、字体与字体图标、盒模型常用属性的缩写方案

1.选择器优先级与提权方式

• 优先级
  选择器相同时候，和写作顺序有关系，后面的覆盖前面的。

    /* 无效 */
    h2 {
        color: gold;
    }
    /* 有效 */
    h2 {
        color: green;
    } 

  选择器不相同的时候，和优先级有关，级别高的覆盖低的。
  id > class > tag

    /* 优先级从低到高 */
    /* 无效 */
    h2 {
        color: green;
    }
    /* 无效 */
    .on {
        color: violet
    }
    /* 有效 */
    #foo {
        color: blue;
    }

• 优先级提权方式
  计算公式：[id选择器的数量, class选择器的数量, tag选择器的数量]
  例子：[0,0,1] < [0,0,999] <[0,1,0] < [0,99,0] < [1,0,0]
  例子（优先级从低到高）：

    /* [0,1,1] */
    h2.on {
        color: red;
    }
    /* [0,1,2] */
    body h2.on {
        color: skyblue;
    }
    /* [0,1,3] */
    html body h2.on {
        color: teal;
    }
    /* [0,2,3] */
    .on.off {
        color: red;
    }
    /* [1,0,0] */
    #foo {
        color: teal;
    }
    /* [1,0,1] */
    h2#foo {
        color: red;
    }
    /* [1,1,0] */
    #foo.on {
        color: seagreen;
    }

2.字体与字体图标

• 字体调整
  例子：

    /* 字体属性 */
    .title {
        /* 字体 */
        font-family: sans-serif;
        /* 字号 */
        font-size: 16px;
        /* 字样 */
        font-style: italic;
        /* 粗细 */
        font-weight: 
        /* 简写 */
        /* 第一个样式 第二个粗细 第三个大小 第四个字体*/
        font: italic lighter 36px sans-serif;
    }

• 字体图标
  在阿里素材库下载素材代码，按照提示操作。
  复制

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 38px;
        color: skyblue;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

  调整

    .iconfont.icon-kehuguanli {
        color: red;
        font-size: 50px;
    }

  调用

    <span class="iconfont icon-kehuguanli"></span>

  3.盒模型常用属性的缩写方案

• 边框

         .box {
        /* 边框 */
        /* 每个边框可以设置三个属性: 宽度,样式,颜色 */
        border-top-width: 5px;
        border-top-color: red;
        border-top-style: solid;
        /* 边框简写，顺序可以随意 */
        border-top: 5px red solid;
        border-top: rgb(255, 0, 255) solid 5px;
        /* 其他边框，比如下边框也可以单独设置 */
        border-bottom: 10px red dashed;
        /* 如果边框一样可以直接简写 border */
        border: 5px solid #000;
    }

• 内边距

     .box {
        /* 内边距 */
        /* padding: 上 右 下 左; 按顺时针方向*/
        padding: 5px 10px 15px 20px;
        /* 页面看不到是因为padding是透明的,且背景色会自动扩展到padding */
        /* 将背景色裁切到到内容区 */
        background-clip: content-box;
        /* 当左右相等，而上下不相等，使用三值语法 */
        padding: 10px 20px 15px;
        /* 当左右相等，上下也相等，使用二值语法 */
        padding: 10px 30px;
        /* 如果四个方向全相等，使用单值语法 */
        padding: 10px;
        /* 总结,当使用三值和二值时,只需要记住第二个永远表示左右就可以了 */
    }

• 外边距

    .box {
        /* 外边距:控制多个盒子之间的排列间距 */
        /* 四值,顺时针,上右下左 */
        margin: 5px 8px 10px 15px;
        /* 三值,左右相等，上下不等 */
        margin: 10px 30px 15px;
        /* 二值,左右相等,上下也相等 */
        margin: 10px 15px;
        /* 单值,四个方向全相等 */
        margin: 8px;
    }