盒模型常用属性、媒体查询及em,rem用法

演示盒模型常用属性

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>盒模型</title>
      </head>
      <body>
        <div class="box"></div>
        <div class="box"></div>
        <style>
          .box {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            border: 10px solid rgb(230, 238, 195);
            padding: 10px;
            background-clip: content-box;
            box-sizing: border-box;
            margin: 20px;
          }
        </style>
        <style>
          body {
            background-color: rgb(228, 174, 219);
          }
          @media (max-width: 400px) {
            body {
              background-color: rgb(241, 230, 208);
            }
          }
        </style>
      </body>
      </html>
    </body>
  </html>

实例演示媒体查询

<!-- 实例演示媒体查询  -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn samll">btn1</button>
    <button class="btn middle">btn2</button>
    <button class="btn large">btn3</button>
    <style>
      html {
        font-size: 10px;
      }
      .btn {
        background-color: seagreen;
        color: white;
        border: none;
        outline: none;
      }
      .btn:hover {
        cursor: pointer;
        opacity: 0.8;
        transition: 0.3s;
        padding: 0.4rem 0.8rem;
      }
      .btn.small {
        /* font-size: 12px; */
        font-size: 1.2rem;
      }
      .btn.middle {
        /* font-size: 16px; */
        font-size: 1.6rem;
      }
      .btn.large {
        /* font-size: 18px; */
        font-size: 1.8rem;
      }
      /* 媒体查询 */
      @media (max-width: 374px) {
        html {
          font-size: 12px;
        }
      }
      /* 374px - 414px 之间 */
      @media (min-width: 375px) and (max-width: 413px) {
        html {
          font-size: 14px;
        }
      }
      /* >414px 之间 */
      @media (min-width: 414px) {
        html {
          font-size: 16px;
        }
      }
    </style>
  </body>
</html>

演示em,rem用法

em: 动态的字号,总是相对于自身或祖先元素,如果祖先是根元素,em=rem

    <style>
      html {
        font-size: 10px;
 }
      div {
        font-size: 30px;
}
      div span {
        font-size: 2em;
}
    </style>

rem:静态的字号,总是相对于”根元素”

    <style>
      html {
        font-size: 10px;
      }
      div {
        font-size: 30px;
      }
      div span {
        font-size: 2rem;
      }
    </style>

演示盒模型常用属性

实例演示媒体查询

演示em,rem用法

em: 动态的字号,总是相对于自身或祖先元素,如果祖先是根元素,em=rem

rem:静态的字号,总是相对于”根元素”

相关文章