选择器的提权方式

id > class > tag

标签	ID	CLASS	TAG	说明
h1	0	0	1	TAG 1个
body h2	0	0	2	TAG 2个比上一个优先
html body h2	0	0	3	TAG 3个比上一个优先
.box	0	1	0	CLASS 进阶1位比上一个优先
h1.box	0	1	1	CLASS 1个 TAG 1个比上一个优先
#off	1	0	0	id 进阶1位比上一个优先
…	…	…	…	以上方式有很多，就不举例了。

字体图标的应用

已将 iconfont.* 复制到 css 目录

<link rel="stylesheet" href="css/iconfont.css">

<p>
    <span class="iconfont icon-baidu"></span>
    <span class="iconfont icon-google"></span>
</p>

盒模型常用属性的缩写

body{
        /* font-family: sans-serif;
        font-size: 24px;
        font-style: italic;
        font-weight: lighter; */
    }

简写方式 `body{font: italic lighter 36px sans-serif;}`

<!DOCTYPE html>
<html>
<head>...</head>
<body>
    <div class="box">盒子</div>
</body>
</html>

box 的内边距

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

box 的外边距

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