1216 选择器优先权、字体图标、盒模型属性缩写

选择器优先级
根据当前选择器的构成计算其优先级，[id数量，class数量，tag数量]（从右往左进位），想要覆盖之前的样式，把优先级做高。
字体图标
iconfont下载源文件到项目里面，根据提示在html文档中添加必要的引用和使用代码
盒模型属性
3.1 布局里面几乎都是盒子
3.2 盒子的基础属性(构成)包括:content\paddding\border\margin

padding和margin是空间间隔,只有大小可定义
目前常缩写5个:font,background,padding,border,margin

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./resources/iconfont.css" />
    <style>
      .iconfont.icon-24px {
        color: red;
        background-color: aquamarine;
        font-size: 24px;
      }
      #box {
        width: 400px;
        height: 200px;
        padding-top: 5px;
        padding-right: 10px;
        padding-bottom: 15px;
        padding-left: 20px;
        padding: 5px;
        background-color: cornflowerblue;
        background-clip: content-box;
        color: red;
        background-image: url(https://img.php.cn/upload/course/000/000/001/5fbb84ba39b3a182.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 200px;
        background: lightblue
          url(https://img.php.cn/upload/course/000/000/001/5fbb84ba39b3a182.jpg)
          10px 50px/250px no-repeat content-box;
        border-top: 5px;
        border-right: 10px;
        border-bottom: 15px;
        border-left: 20px;
        border-width: 20px;
        border-style: solid;
        border-color: green;
        margin: 30px;
        font-size: 30px;
        font-family: Serif;
        font-weight: 600;
        font-style: italic;
        font: normal 600 30px "sans-serif";
      }
      div.box {
        color: darkmagenta;
      }
      .box {
        color: red;
      }
      body div {
        color: coral;
      }
      div {
        color: violet;
        background-color: beige;
      }
    </style>
  </head>
  <body>
    <div id="box" class="box">盒子</div>
    <span class="iconfont icon-24px"></span>
  </body>
</html>

相关文章