一、實例演示盒模型常用屬性注意box-sizing的用法

知識點

box-sizing的屬性值：
content-box:任何增加的內邊距和邊框寬度都會增加到最終繪制出來的元素寬度中，如果設置的寬高為200px，那么只是內容區(qū)域為200px的范圍；
border-box:告訴瀏覽器，任何增加的內邊距和邊框寬度都不會超出設置的元素寬高。
padding: 內邊距；
設置格式上px，右px，下px，左px 按順時針方向

三值寫法：padding{10px 20px 5px}
實際解析為：padding{10px 20px 5px 20px}

二值寫法：padding{10px 20px}
解析為：padding{10px 20px 10px 20px}
margin: 外邊距
設置格式：margin{10px 20px 5px 30px}

實例演示代碼：

<!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>
  <style>
    @import 'static/box.css';
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>
<style>
*{
  margin: 0;
  padding: 0;
  outline: none;
}
.box1{
  width: 200px;
  height: 200px;
  background-color: blanchedalmond;
  box-sizing: content-box;
  border: 5px solid #000;
  margin: 20px 10px 10px 50px;
  padding: 20px 20px 20px 20px;
  /* 
  box-sizing的屬性值：
  content-box:任何增加的內邊距和邊框寬度都會增加到最終繪制出來的元素寬度中，如果設置的寬高為200px，那么只是內容區(qū)域為200px的范圍；
  border-box:告訴瀏覽器，任何增加的內邊距和邊框寬度都不會超出設置的元素寬高。  
  */
}
.box2{
  width: 200px;
  height: 200px;
  background-color: blueviolet;
  border:5px solid #254;
  box-sizing: border-box;
  padding: 10px 10px 20px 20px;
  margin: 20px;
  /*增加的內邊距和邊框不超過元素寬高*/
}
</style>

預覽圖：

二、實例演示媒體查詢

語法：

<style>
  @media (max-width:500px){}
  /* max-width:視口小于多少時顯示樣式
  min-width:視口大于多少時顯示樣式
  (min-width:x) and (max-width:y)大于x小于Y */
</style>

案例源碼：

<!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>
  <style>
    /* 當視口尺寸小于640px時 */
    @media (max-width:640px) {
      .box{
        background-color: green;
        width: 200px;
        height: 200px;
        font-size: 20px;
        color: #fff;
      }
    }
        /* 當視口尺寸大于641小于768時 */
    @media (min-width:641px) and (max-width:768px) {
      .box{
        background-color: blueviolet;
        width: 300px;
        height: 300px;
        font-size: 20px;
        color: #fff;
      }
    }
  </style>
</head>
<body>
<div class="box">
  媒體查詢
</div>
</body>
</html>

當視口尺寸大于641小于768時的預覽圖片：
視口尺寸小于640px時的預覽圖片：

實例演示em rem用法并說出之間差別

em和rem解釋：

em：當前默認元素的字號，默認是16px；em跟隨其設置字號的父元素而變化；
rem：根元素的默認字號，默認是16px；rem不隨其父元素設置的字號而變化，如若修改只能通過修改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>單位em、rem理解</title>
  <style>
    .box1{
      font-size: 1em;
    }
    .box2{
      font-size: 1rem;
    }
  </style>
</head>
<body>
  <div>
    <h1 class="box1">Hello</h1>
    <h1 class="box2">World</h1>
  </div>
</body>
</html>