选择器的优先级，字体图标的应用，盒模型常用属性的缩写。
程序员文章站
2022-04-28 22:35:21
...
选择器的提权方式
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;}