开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第29天，点击查看活动详情

前言

CSS盒子模型是最基础的概念，页面可以看成是由一个个盒子堆砌而成，盒子模型的知识点也是基础面试题，对此我们要非常熟悉盒子模型。

定义

页面中的元素都是由盒子构成的，盒子里面装的就是元素的内容。盒子的从内到外分别是内容(content),内边距(padding),边框(border),外边距(margin)，这些属性也是我们常用的属性。我们f12打开开发者工具选中页面的元素就能很清晰的看到对应的属性及属性值。

盒子分类

标准盒模型

标准盒模型的宽高就是content的宽高，也就是说width、height设置的是content的宽高，剩下的三部分内容我们就可以根据需要去设置。

• margin:外边距设置，有单独的属性去设置单个边距。左(margin-left);右(margin-right);上(margin-top);下(margin-bottom)。我们可以通过margin直接写成简写模式： margin:上 右 下 左（四个属性值，就是按照顺时针设置）
  margin:上 左右 下（三个属性值，中间就是左右的）
  margin:上下 左右（两个属性值，前面表示上下，后面表示左右）
  margin:上下左右（一个属性值，表示四个方位的值都相同）
• padding:内边距设置，它也有四个方位单独的属性。左(padding-left);右padding-right);上(padding-top);下(padding-bottom),padding简写规则跟margin一样。
• border:设置边框，border是宽度 样式 颜色的简写。 border-width:用来设置边框的宽度。 border-style:用来设置边框的样式,常用的属性值有以下几种：实线(solid);虚线(dashed);点(dotted);双边(double)。 border-color:用来设置边框的颜色，跟color属性值一样可以跟单词、rgb、16进制。

    * {
        margin: 0 auto;
        padding: 0;
      }
      .box {
        width: 500px;
        height: 500px;
        border: 1px solid skyblue;
      }
      .item{
        width: 100px;
        height: 100px;
        margin: 50px;
        padding: 10px;
        background: orange;
        border: 5px solid red;
      }

   <div class="box">
       <div class="item">
        标准盒模型
       </div>
    </div>

怪异盒模型

怪异盒模型宽高等于content+padding+border加在一起的宽高，当我们设定好宽高后，再设置padding跟border并不会像标准盒模型向外，而是会向内。怪异盒模型由box-sizing设置，当border-box为属性值时就是怪异盒模型，content-box就是标准盒模型。怪异盒模型margin等的设置规则时跟标准的是一样的。

   .item{
        width: 100px;
        height: 100px;
        margin: 50px;
        padding: 10px;
        box-sizing: border-box;
        background: orange;
        border: 5px solid red;
      }

对比这两个图很明显怪异盒模型比标准盒模型看起来小。还有一种盒子模型——弹性盒子flex，我 们之前讲解过，这里不再赘述。

总结

以上就是CSS的盒子模型，对于盒子模型的属性，属性简写，如何设置我们要滚瓜烂熟，不积小流，无以成江河。