web进阶之八:盒子模型1，内外边距边框和垂直重叠

---

在有的编程语言中有这么一句话：一切皆对象。

---

其实在网页中“一切皆是盒子”

盒子

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

• 为什么要想象成盒子呢？因为如果把所有的元 素都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。
• 我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。

盒子模型

一个盒子我们会分成几个部分：

1. 内容区(content) 放东西用
   内容区指的是盒子中放置内容的区域，也就是元素 中的文本内容，子元素都是存在于内容区中的。
2. 内边距(padding)
   顾名思义，内边距指的就是元素内容区与边框以内 的空间。
3. 边框(border)
   可以在元素周围创建边框，边框是元素可见框的最外部。
4. 外边距(margin)
   外边距是元素边框与周围元素相距的空间。

这个要熟记。

图片1.png

首先我们来画个盒子

盒子套了一个盒子

盒子.JPG

内边距

内边距这里有点意思了，有一个应该特别注意，不然会想不明白。

内边距会影响整个盒子的大小。

请注意看代码中注释的内容。

---

外边距

外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置

• 盒子有四个方向的外边距：
  margin-top
  margin-right
  margin-bottom
  margin-left

由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置

外边距的重叠

当我们在设置外边距的时候，会遇到一个重叠的问题，有垂直方向的重叠和父子元素的相邻重叠。

• 垂直方向的重叠

• 父子元素的外边距重叠

那么如何解决不让父子元素出现这个问题呢？
其实在我们的注释中可以看出，出现上面的问题的一个必要条件就是相邻，所以我们不让它们相邻就可以了。

1. 
   

   
   a
   

   
   
   
   
   我们在box1下面加了一个a效果虽然是子元素自己移动但是我们看的出，很难看，而且也用不上，本身a也是有默认高度的。
   
   
   

   加a的效果.JPG
2. 给父类元素设置一个上边框或者上内边距

.box1{
            width: 200px;
            height: 199px;
            background-color: red;
            /*border-top:1px blue solid;*/
            padding-top: 1px;
        }

同时需要注意的是，由于我们设置的高度原本是200px如果在加一个上边框或者上内边距的时候，其实box2还是超出的边界，只是我们肉眼看不出，所以这里我把高度改为了199px，这样就可以了。

---

有任何问题请给我留言，或者直接发我邮箱[email protected]。欢迎大家交流讨论。