什么是盒子模型

盒子模型是一个css概念，通俗一点讲，就是一个盒子。这个盒子里面放着你的内容。这个内容可以是文字，这个内容当然也可以是图片。而每个网站，就是通过无数个盒子组成的。所以如果你想要精通店铺装修，那么你就需要精通盒子的概念，哪怕只是最基础的概念。站在我个人的角度，掌握了盒子模型和flex布局，你就能掌握独立站的装修诀窍。因为在独立站的装修过程中，一切都离不开这两个东西。而且这两个概念是百搭万能的，换种说法，单纯只是熟悉了这两个知识点，也足够让你做出非常漂亮的网站了。

一个盒子就会有盒子内，盒子的纸皮箱以及盒子的外部空间，就如同我们日常所看到的盒子一样。

只是在代码的世界里，这不过是一个2维空间的盒子，而并非3维空间。

• #4C1D95是盒子内的空间，里面放着一个产品，也就是我的内容这两个字。
• #8B5CF6是盒子的边缘，就如同盒子的纸皮箱。这个边框会有厚度。
• #DDD6FE是盒子的外部空间，就是盒子纸皮箱外的空间。

而我们在装修的过程中，经常会需要设置这个盒子多项属性，主要有：

什么是margin间距

margin间距的意思就是指纸箱应该在外部空间保留多少，你也能理解为纸箱应该要与别的物品保留多大的距离。

如果我有两个纸箱，并且都不再使用#DDD6FE颜色作为背景色，而是选择了透明或者白色，那么你就会看到margin的作用。

在这里我成功的把这三个盒子区分开了位置，这个在独立站的布局中有非常多的作用。margin不仅能控制左右间距，也能控制上下间距。

什么是padding填充

padding填充就是指内容和盒子纸皮箱的距离。在现实生活中，你没有办法确保你放进去了纸箱里面的物品，是刚好能和盒子一样大的，所以我们都有填充空间，也就是padding。

这里，我把外部空间，重新设置成透明的。然后给你展现一下，一个大的盒子和一个小的盒子的区别。前者拥有更大的填充padding空间，而后者只有很小。

什么是边界border

border边界就是纸皮箱，这个边界是可以有厚度的，如下图所示。

这里一定要记住，边界的厚度，也会增加箱子的大小。上面的两个盒子，外部空间和内部空间都是一样的，只有边界厚度是不同的，而最终大小，也差别很大。

内容

盒子里面可以存放各式各样的内容，文字，图片，视频甚至是代码块都是没问题的。

实际操作过程是如何的

当你使用SaaS软件装修，或者是在Wordpress下使用类似于elementor装修器的时候，一般都会有一些虚线，告诉你，你的盒子的长相。下图是在shopline后台截取的。可以看得到，一行里有3个盒子，而每个盒子里面放了一个图片。这些盒子可能是有margin间距的（当然也可能是flex布局，通过space-around就可以不使用margin了）。

盒子模型相关css

上述只是最基本的盒子模型，并不代表你就完全掌握了盒子模型。如果想要完全掌握盒子模型，就必须要懂得flex布局还有各类控制盒子模型的css参数。下面我罗列出部分常用css，经常都可以用于控制盒子的外貌形态。

// 这里是部分常用于控制盒子的css
.box {
  // 控制边缘border
  border-width: 3px; // 边缘宽度
  border-style: solid; // 边缘风格
  border-color: black; // 边缘颜色
  border-radius: 3px; // 边缘的弧度
  
  // 控制内容
  color: black; // 内容的颜色，例如字体颜色
  font-size: 14px; // 字体大小
  font-family: sans-serif; // 字体
  
  // 控制间距
  margin: 5px; // 控制4个方向的间距
  margin-top: 5px; // 只控制上方间距
  margin-bottom: 5px; // 只控制下方间距
  margin-left: 5px; // 只控制左方间距
  margin-right: 5px; // 只控制右方间距
  
  // 填充
  padding: 5px; // 控制4个方向的填充
  padding-top: 5px; // 只控制上方填充
  padding-bottom: 5px; // 只控制下方填充
  padding-left: 5px; // 只控制左方填充
  padding-right: 5px; // 只控制右方填充

  // 直接控制盒子大小
  height: 100px; // 直接控制盒子的高度
  width: 100px; // 直接控制盒子的宽度

  // 盒子如何处理超出范围的内容
  // 在真实生活中，经常都会有内容超出盒子大小的情况。
  //     例如你把盒子高度设置成了50px，但是却在里面放了一张高度为100px的图片。
  //     这样子，图片就直接超出了盒子了。
  overflow: auto; // 告诉盒子听如何处理超出的内容，推荐设置为auto

  // 盒子的背景
  background-color: #fff; // 控制盒子的背景颜色
}
// 这里已经是属于够用的范围，但是仍然不是100%全部都涵盖。
// 例如line height这类很有用的css就没有被涵盖进去，它虽然有用，但不是必须的。

最后

盒子模型的理解，是为了帮助你更好的进行独立站的装修。如果想要装修出漂亮的独立站，熟悉盒子模型的基本原理是必须的。除此之外，还需要了解flex布局。flex布局在独立站的装修中，也是非常有必要的。