2021-01-17

CSS中的“盒子”

   我们先看一个盒子基本的属性：
     width & height
     用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。
     padding  内间距   
     代表内容盒子的外边界与外边框的内边界之间的距离border设定介于padding的外边缘与margin
     的内边缘之间，默认值为0。
     border
     设定介于padding的外边缘与margin的内边缘之间，默认值为0。
     margin  外边距    
     代表盒子四周的区域。设值方法与padding类似。相邻元素的边距会合并。

一、盒子的组成

  盒子主要由内容、内边距、边框和外边距四个部分组成。
  盒子的高度则是由内容、内边距和边框组成。
  而盒子所占空间的高度则要加上外边距，由内容、内边距、
  和外边距组成。

二、盒子的分类

  盒子主要分为两类
  1、标准盒子，也被称为w3c盒子。一般默认都为标准盒子。
  2、边框盒子，也被称为怪异盒子。

三、盒子的特点

  标准盒子的特点：设置的宽高属性直接设置给元素内容。
     （VS code中使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。)
  边框盒子的特点：设置的宽高属性直接设置给盒子。
     （VS code中使用box-sizing属性可以改变盒子模 型，取值“border-box”的盒子为默认盒子模型。)

接下来具体在VS code中理解一下：

我们先简单的写一个div标签，并设置宽高，内外边距及边框。

效果如下：

这时，系统默认为标准盒子也就是:content-box。
盒子内容区宽度：100px
盒子宽度：100+20+2=122px
盒子所占空间的高度：122+20=142px 

此时，我们将box-sizing改为border-box(边框盒子)效果如下：

此时， 
盒子内容区宽度：100-20-2=78px
盒子宽度：100px
盒子所占空间的高度：100+20=120px

虽然页面表现出的差距不大，但是在后期加入动画时，就十分好看与明显，例如呼吸灯的设计。

下次再见！bye