牛津小马哥沙雕跨境电商KOL,一个无趣的it男。
个人微信
公众号
视频号
更新时间2022-03-20

什么是盒子模型

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

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

ShippingBox_sq.jpeg

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

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

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

什么是margin间距

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

margin
margin
内容
margin
margin

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

内容
内容
内容

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

什么是padding填充

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

padding
padding
内容
padding
padding

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

大盒子
中盒子
小盒子
mini

什么是边界border

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

内容
内容

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

内容

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

实际操作过程是如何的

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

shopline1-min.png

盒子模型相关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布局在独立站的装修中,也是非常有必要的。