1.盒子

• CSS处理网页时，它认为每个元素都包含在一 个不可见的盒子里。

• 为什么要想象成盒子呢？因为如果把所有的元 素都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。

• 我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。

2.盒子模型

• 一个盒子我们会分成几个部分：
  内容区(content)
  内边距(padding)
  边框(border)
  外边距(margin)

• 盒子模型：

image.png

3.内容区

• 内容区指的是盒子中放置内容的区域，也就是元素 中的文本内容，子元素都是存在于内容区中的。

• 如果没有为元素设置内边距和边框，则内容区大小 默认和盒子大小是一致的。

• 通过width和height两个属性可以设置内容区的大 小。

• width和height属性只适用于块元素。

4.内边距

• 顾名思义，内边距指的就是元素内容区与边框以内 的空间。

• 默认情况下width和height不包含padding的大小。

• 使用padding属性来设置元素的内边距。

       padding:10px 20px 30px 40px
  

  这样会设置元素的上、右、下、左四个方向的内边距。

• 内边距：

• padding:10px 20px 30px;

• 分别指定上、左右、下四个方向的内边距

• padding:10px 20px;

• 分别指定上下、左右四个方向的内边距

• padding:10px;

• 同时指定上左右下四个方向的内边距

• 同时在css中还提供了padding-top、padding-right、padding-

• right、padding-bottom分别用来指定四个方向的内边距。