5 分钟学会 CSS 的盒模型及其简写规则【附实例演示】 - CSS基础知识

盒子模型介绍

CSS 的盒子模型在实际的应用中是非常重要的部分，几乎在每一个网页中，我们都会用到盒模型。那什么是盒模型呢？通俗来说，就是网页中的元素的布局规则。

元素在网页中的布局非常的重要，特别是元素与元素相互之间的布局经常会用到。

盒子模型就是用来解决元素与元素之间的相对布局的关系的。主要分为外边距和内边距两块。

控制一个元素的外边距需要用到外边距的四个属性： -上外边距：margin-top -右外边距：margin-right -下外边距：margin-bottom -左外边距：margin-left

控制一个元素的内边距需要用到内边距的四个属性： -上内边距：padding-top -右内边距：padding-right -下内边距：padding-bottom -左内边距：padding-left

具体的用法我们以实例来讲解

四个外边距和内边距可以依次设置大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .demo {
      /* 设置盒子demo的宽度、高度和边框（粗细、线型和颜色）   */
      width: 200px;
      height: 200px;
      border: 2px solid red;
      /* 设置盒子demo的四个外边距的大小 */
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 30px;
      margin-left: 20px;
      /* 设置盒子demo的四个内边距的大小 */
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 10px;
      padding-left: 20px;
    }
  </style>
</head>
<body>
  <div class="demo">我是盒子里面的内容部分</div>
</body>
</html>

简写规则

为了方便，很多时候我们并不会依次分别去写每一个边距的大小，我们可以采用简写的方式来做

简写的规则：不管是外边距还是内边距，我们简写的时候都是遵循相同的规则具体如下

可以按照上、右、下、左的顺序依次写出上边距、右边距、下边距和左边距四个值的大小
如果对应边距的值有相同的，则可以这么来写：只写三个值，第一个值就代表是上边距，第二个值就代表左右边距（相同），地三个值就代表下边距；
如果只写两个值，第一个值代表上下边距的值（相同），第二个值就代表左右边距的值（相同）
如果只写一个值，那就是代表四个边距的值都是一样的

简写实例

写四个值(和上面的实例效果一致)

padding: 10px 20px 10px 20px; ：表示内上边距为10px，内右边距为20px，内下边距为10px；内左边距为20px（遵循顺时针的方向）
margin: 10px 20px 30px 20px;：表示外上边距为10px，外右边距为20px，外下边距为30px；外左边距为20px（遵循顺时针的方向）

写三个值

margin: 10px 20px 30px;：第一个值表示外上边距为10px，第二个值表示外右边距和外左边距都为为20px，第三个值表示外下边距为30px（padding同理）

写两个值

padding: 10px 20px; ：第一个值表示内上边距和内下边距都为10px，第二个值表示内右边距和内左边距都为20px（margin同理）

写一个值

padding: 10px; ：一个值表示四个内边距的值都为10px（margin同理）

em 与 rem 应用的场景

在页面中，设置元素的大小，除了可以采用像素px的单位来设置，也可以采用其他的单位方式来设置，比如em和rem来设置

em实例

含义：em单位表示相对大小，相对父元素来确定自身的大小

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    html {
      font-size: 20px;
    }
    p {
      font-size: 2em;
      padding-left: 2em;
    }
  </style>
</head>
<body>
  <p>我是字体的大小</p>
</body>
</html>

说明1：上面对根元素html设置了字体的大小为20px，对于p元素设置了字体的大小为2em，那么p元素最终的大小就是是多少呢？对于em单位来说，p元素是继承了其父元素body的大小，body元素没有单独设置过，所以也继承了其父元素，也即根元素html的大小，所以最终的结论就是p元素字体的大小是相对于html设置的20px为基准的，2em代表2倍大小的意思，也即p元素的最终大小为：20px * 2 = 40px。

说明2：通过em的单位设置大小时，字体属性font-size大小会继承其父元素，而其他属性则会以它自身的字体大小为基础来动态变化。比如此时padding-left: 2em;的实际大小为：40px * 2 = 80px。

总结：通过em来设置元素的大小，对于字体大小属性来说是以父元素的大小为基准的，对于其他属性则是以自身字体大小属性为基准的。

rem实例

含义：rem单位也表示相对大小，是相对与根元素（html元素）来确定自身的大小

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    html {
      font-size: 20px;
    }
    #demo {
      font-size: 2em;
    }
    p {
      font-size: 2rem;
      padding-left: 2em;
    }
  </style>
</head>
<body>
  <div id="demo">
    <span>字体大小</span>
    <p>我是字体的大小</p>
  </div>
</body>
</html>

说明1：上面的实例中，根元素html的实际字体大小为20px，demo元素的字体大小设为了2em，那么其实际字体大小就是20px * 2 = 40px，也即span标签中的文字的实际大小为40px；

说明2： p元素设置了字体大小为2rem，那么其实际大小则为根元素html字体大小的2倍，即20px * 2 = 40px，此时p元素并没有继承其父元素demo的字体大小来计算的；

说明3：p元素还设置了内左边距为2em，此时内左边距具体的大小为其自身字体大小的2倍，也即：40px * 2 = 80px。

em 与 rem 的区别与联系

em与rem都是用来设置元素相对大小的，em的字体大小font-size总是相对于其父元素的大小来变化的，而rem的字体大小font-size不管其父元素是谁，它只会根据根元素html的大小为基准来变化的。

对于元素自身其他属性的大小，通过em的单位来设置的，则都是与其字体大小font-size为基准来变化的，与父元素或是根元素没有直接的关系

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：总结的很好, em/rem有时是不好分清, 因为很多时候,他们的值是完全相同的