52.尚硅谷_HTML&CSS基础_垂直外边距的重叠.avi原创

刚才呢，我们这里边是说了一下这个外边距，那接下来呢，我们来看一下这个外边距的一个问题啊，可能刚才有同学已经看到这个问题了，诶我们来接着来说一个这个外边句，那说这个之前呢，我们先做这么一个东西啊，来个div，点一个BOX1，然后再来个div点一个BOX2，现在是有两个这么一个盒子，然后我们给他写一个样式啊，这点一个BOX1Y来一个这个100个像素，然后get也来一个这个100个像素，Background开点来一个这个red红色的，然后再点一个BOX2 Y呢，来一个这个100个像素，诶，别200啊，咱们这来一个100个像素，然后呢，Hat也来一个这个100个像素，Background color background color来什么呢？来一个这个green GR音，诶，两个盒子，上边一个红的，下边一个这个绿的啊，上下两个盒子来我这一运行，咱们来看看效果啊，现在我们看见什么呀，两个盒子是不是竖直竖直。

摆垂直摆列呀，哎，垂直垂直的这个排列啊，垂直排列，那现在我来干一件事儿，干什么事儿呢？我来给我上边这个，也就是BOX1给它设置一个什么呀，设置一个这个下外边距，那么想想，如果我给BOX1设置一个下外边距应该是什么效果呀？诶那他是不是应该整个把我这个BOX2整个往下挤了100个像素啊，诶我们来看一下啊，来为我们box一来我这写一下为什么呢？为我们这个上边的元素设置一个这个下外边距直接，诶外半距去了，诶Y边距直接，我们这来一个叫做一个marin bottom bottom来什么呢？来一个100个像素保存，我们来看效果啊，一刷新走你诶你发现什么了，我这设置了一个下边镜100个像素，是不是整个把我们这个box塞往下挤了100个像素啊，哎，往下挤了100个像素，然后接下来我们来看一个问题啊，还要干嘛，我这呢，那我一想这个。

是给我BOX1设置一个下外边距，然后呢，我再给我BOX22啊，我再设置一个上外边距，诶那我们想想这是一个什么效果来，那BOX2是我们这个下边元素，我们来为什么呢？为下边的这个元素设置一个什么呢？设置一个上外边句啊为下边的元素设置一个上外边句来什么呢？来一个我们这个margin top来什么呢？来一个100个像素，也是100个像素，那我们来说了这个问题，那我们说了下边有一个marin bottom，上边有一个Mar bottom，下边有一个marin top，这两个外边是不是连一块了呀？诶那这块就有问题了，那我这一段距离待会一刷新，它会是100个像素呢，还是。200个像素。诶，那我们想如果是100个像素，诶如果是200个像素，那证明什么？证明是不是他把这个上下外边距给它加一块求和了呀？诶取和了，那如果是100个，那证明什么呀？它有没有相加呀？哎，没有累加，也就是说它是不是只取了一个外边距啊？哎，我们来看效果，那怎么看呀？如果我刷新以后变大了，是不是证明200啊，如果我刷新以后没变，是不是证明还是100啊？诶我们来看看效果啊，我这一刷新走你，诶发现什么了？

是没有发生任何变化呀，诶没有发生任何变化，那这个是为什么呢？诶那这个东西呢，就是我们这个HTL，或者说我们这个CS边一个特点叫做什么呢？叫做这个垂直外边距的一个折叠，或者叫重叠，垂直诶外边距的一个重叠啊，重叠诶那我们来说一下这个问题，叠在我们这个CSS中或者这样写吧，在我们这个网页中叫什么呢？哎，垂直的相邻哎外边距啊，直方向的相邻，外边距会什么呢？会发生我们这个外边距的一个什么呀？外边距的一个重叠啊，会发生我们一个外边距的一个重叠，那什么叫外边距重叠呢？我们说所谓的这个，哎外边距重叠指什么呢？哎，指我们这什么呀？哎，兄弟元素之间。

诶，兄弟元素之间的这个，哎，相邻外边距会什么呢？会取最大值啊，而什么呢？而不是取和啊，会取最大值而不是取和，那你想想看，现在我们说margin bottom margin top这两个外边距，它们是不是相邻的呀？上边元素的下边距，下边元素这个上外边距是不是就相邻的外边距呀，而且都是什么呀？垂直方向什么叫垂直啊，Bottom还有top都叫垂直，而left和right叫什么呀？叫水平方向啊，叫水平方向，这个叫垂直方向，它们两个现在相邻了，那干嘛呢？会取他们两个和的一个，是它们两个外边距的一个什么呀，最。

大值啊，最大值那什么意思，两个是不是都是100，那都是100什么效果，是不是就取100了，那现在假如说了。我这有一个200了，BOX2的marin top是200，那你说这回取了，诶是不是该取200了，注意会不会取300啊，不会啊，一定注意它不是求和，而是取那个最大值啊，最大值我这一保存一刷新走，你是不是现在这个距离变成200了，哎，我们来看看。这一块我们来量一下。是不是正好是一个200个像素啊，诶200个像素啊，所以注意叫做什么呀，相邻的垂直外边距啊，兄弟之间的它会什么呀？会取这个最大值啊，最大值，那这个问题还比较简单，但是有一个问题可能你们就，诶那咱们先这样说吧，我们先不说这个问题，我们先说这块啊，还是说这个兄弟元素，现在我们说相邻的它们之间取的是一个什么呀？是一个最大值，诶那现在干嘛呀，我不想让它重合，我希望什么呀？诶这样还是都改成100，都改成100，距离变成多少了。

保存是不是距离又变回100了，哎，又变成100了，那现在呢，我不想让它相邻，那怎么办呢？我想什么呀，我想让它什么呀，你上边100下边100，你干脆两个你给我取和取成什么呀，取成200，我不想让你重叠，我不想让你这个折叠，那怎么办呢？那我一想解决这问题其实比较简单，问题是在哪啊，它重叠的原因是不是因为它是相邻外边距啊，那我现在不想让它重叠怎么办呀？来咱们在这儿，我把它俩整一个A干嘛呀，我整一个字母A，是不是把我这个BOX1和BOX20给隔开了呀？那这样这两个东西还相不相邻了，那不相邻了，根据我们这个特点，那它还应不应该重叠了？诶我这一刷新走你。

是不是就不重叠了，哎，这样上边100是不是下边100中间隔着一个A啊，哎，这块注意啊，所以这边注意发生外边距重叠，垂直外边距重叠有两个关键的要件，第一个什么呀？得是相邻的，第二个得是什么呀？得是垂直方向的外边距啊，是这个两个要件啊，咱们这样写吧，在网页中相邻的垂直方向的外边距会发生外边距重叠啊，所以注意两个要件，一个是相邻的，一个是垂直方向的啊，垂直方向的。相邻的垂直方向的边距，好，这也是我们说的Y边距一个重叠，比较简单，但是你写的时候一定要注意这个问题啊，你给上边设一个，上边设置一个，它不是取和，而是取它那个最大值啊最大值，那接下来再看一个问题啊，这个问题就不是那么的明显，我来一个div点一个box box3，然后在BOX3里边来一个div点一个BOX4啊BOX4，那我们这里边干嘛呢？我来一个这个点一个BOX3 box3是我们这个负元素Y来一个200个像素hat呢，也来一个200个像素，Background个color们来一个这个yellow黄色的一个背景颜色，然后呢，下边我们这块复制一个，我来什么呢？来一个这个BOX4 box4我来成小一点，来一个这个100个像素啊，100个像素颜色，我们来一个这个yellow保存，现在我来看一效果，诶，这是不是一个大的div里边套着一个小的div啊，这是我这个BOX3，这是我这个BOX4，诶好，那现在我们来做这么一个事儿干嘛呢？给我们这个子元素。

为我们这个子元素设置一个这个上外边距，哎使什么呢？使我们这个子元素的这个哎位置干嘛呢。下移啊下移，我直接来一个margin top，我来什么呢？100个像素，我是不是希望我这个子元素往下移动100个呀？诶，我注意啊，我这个top我是给谁设置的，是不是给我们这个BOX4设置的，换句话说，我是不是只希望BOX4往下移，而三动不动，三是不是应该不动啊，好，那我们来看看能不能达到我们的这个目的啊来，我在这一刷新来走你，哎哟，我们发现什么了？当我给BOX4设了一个上位边距以后，不仅仅是四往下移了，而什么呀，而是三和四是不是一起往下移了呀？诶，那这个又是为什么呢？

诶，那现在我问你了，我的BOX4的外边距上外边距在哪呢。是在这块啊。那BOX3的上外边距呢，它是不是也在这块啊，我们发现什么了，我们发现BOX4的和BOX3的这个垂直外边距，这个上外边距现在是一个什么状态啊，是不是也是一个这么一个相邻的这么一个状态啊，诶也是这么一个相邻的状态，那这里边我们就要说一个问题了，那又相邻了，那我们来看看满不满足我这个要件，它是不是垂直方向的，是不是两个都是marin top，诶都是垂直方向的，那它相不相邻啊，同样它是不是也。

相邻啊，哎，也相邻，所以注意还有什么呢？哎，那刚才我们说的这重叠指的什么呀？指的是兄弟元素之间的如果什么呢？如果注意了，如果附子元素的这个垂直外边距相邻了。则什么呢？则我们这个子元素的这个，哎外边距会什么呢？会设置给谁呢？给我们这个负元素啊，会设置给我们这个负元素，那我们来看现在BOX4和BOX3垂直圆距是不是相连了呀，所以现在发现什么效果了，当我给BOX4设置一个上位边距以后，实际上干嘛了？实际上这个外边距传递给我们这个BOX3了，就相当于我给BOX3是不是设置了一个上边距啊？诶，那会导致什么呀？BOX3整体往下移了，就相当于这个慰问距，我设置给了谁呀？BOX33了啊，BOX3了，所以这个问题你一定要注意，当我们给子元素设置上来边距的时候，如果他们两个的外边距是重叠的，这个外边距会传递给它们的什么呀？

负元素负元素，但是我们说它这种设计好不好啊。诶，实际上我们说这块不太好，为什么不太好呢？因为现在我是只希望动这个子元素，我希望你这个负元素是不是不动啊，但是我这么写完了以后，发现子元素和负元素一块动了，那我不想让你动，那怎么办？诶那我们来说无非是不是我们说我是它的构成要件是两个叫什么呀，垂直外边距，还有一个什么呀，相邻啊，垂直外边距相邻，那我一想干脆我不想让你重叠怎么办呀来。

我是不是让你不相邻啊，那我怎么不相邻啊，还是那个招，我在BOX3上边加一个A，现在我们说了这个字母A，是不是就把我们BOX3还有BOX4的这个外文句给他。隔开了呀，诶那这一隔开，我们一想想还相不相邻了，诶那既然不相邻了，那它还会不会重叠了呢？我们来刷新一下走你诶这回是不是就不重叠了，但是你会发现我这个BOX4它是不是明显往下走了呀，为什么是往下走了呀？诶因为什么呀，因为有了A以后，我这个100个像素外边距是不是相对于。A来计算了，诶相当于AA来计算了，所以这么写呢，它也不好啊也不好，所以你用A来隔开呢，它不太好，那除了用A来隔开，那还怎么办呢？那么想想，我除了能在这个。BOX3的外边距和BOX4的外边距之间放一个文字，放一个字母，我还能干嘛呢？那我一想这样，我给BOX3呀，我来一个这个border。

Boer一个这个top，我来一个一个像素，然后来一个这个red，然后来一个solid，我干嘛了，我是不是给BOB3设置一个上边的一个边框，诶喂，BOX3设置一个这个上边框，那我们来看了，我给BOX3设置一个上边框，那现在我们BOX4和BOX3他们还是不是一个相邻的状态，那这玩意儿应该不是了吧，他们之间是不是被我们这个BOX3的那个上边块给隔开了呀？那既然隔开了，他还会不会重叠了，诶我这一刷新走你。是不是也不重叠了呀，哎，因为有了一个边框给它隔开了，诶那我们一想边框行，那我拍定行不行，PA定来一个top，那我们说了PA定top是不是是在我们这个外边距里边啊，所以这个东西它是不是也可以把我们这个外边距给它隔开啊，我来一个一个像素一保存一刷新走你。

是不是也行啊，哎，也可以啊，所以注意解决我们这个外联的一个重建问题，关键问题干嘛呀，有两种思路，一种干嘛呀，一种我们叫做使用一个属性，使用一个样式干嘛呀，将这个两个问具隔开，它是是不是就不重叠了呀？诶但是注意了这两种方式啊，实际上它们都有一些小问题，有什么问题啊，我们说了borderder和pading会影响整个元素的一个可见宽的一个大小，所以你加完了以后，实际上我整个可见宽是不是高度整个增加了一个像素啊，哎，所以这块你最好干嘛呀，把这个一像素再给它刨出去啊刨出去，这样才能确保我这个整个盒子的一个可见框不变啊，可见框不变啊，这是一个好，那这一块说完了，我们说了，这是我们说方法一，方法一无论是加内容加边块还是加拍定，无非是不是就是把我们这个相邻的边距场呢，不相邻啊，哎，那现在我们来说，那除了这一招，还有没有其他招。

诶，我们来看看还有什么问题，它这块是什么呀？出现问题的关键有两个，一个是垂直，还有一个是什么呀，相邻，相邻我们处理过了，那我们来能干嘛呀？垂直方向的外边距，那我能不能，既然你垂直的外边距会出现问题，那我一想干脆我不用垂直外边距了，诶干脆我把这给你住了，我这一住现在有没有问题了，我这一刷新走你。是不是就不重叠了，哎，不重叠也没用，它是不是。也不往下走了，我是不是还是希望这个BOX4可以往下走100个像素，那问题来了，垂直外面距不能了，那我怎么办？诶，那我通过给BOX4设置垂直外距能把它往下移，那我给BOX3设一个垂直内边距，是不是同样也可以把这个BOX4往下挤啊？诶我们来试试给我们这个BOX3添加一个上外边距拍定top来多少呢？来一个100个像素，那这样是不是就相当于把我们这个BOX4往下挤了100个像素，来咱们保存这直接一刷新走，你是不是下来了？哎，首先我们来看位置，我们是不是就希望它上这个位置，哎，所以注意我们用拍定可不可以解决这个问题。

哎，也可以解决，但是PA定有问题，我们设置完PA定以后，我们发现整个盒子的可见框是不是又变了呀，我们说了PA定会影响盒子的可见框，我PA定设置了一个100，是不是导致我可见宽又增加了一个100啊，那为了高度不变我干嘛？诶我把这个100从这个hi里边给他。刨出去是不是就行了呀，诶那这回我再一刷新走，你是不是就OK了呀，哎，就OK了啊，所以注意啊，在我们这个网页里，我想实现一个功能呢，它的方式不唯一，你像这块我用PA镜，我用复元素的PA镜型用子元素这个marin是不是也行啊，诶我们要选择的时候，一定要选择一什呀，诶对我们这个副作用最小的一个方式，所以这个垂直方向marin你用的时候一定要干嘛，一定要去慎重看看它会不会有这个什么呀，重叠的问题，当然了这几种方式实际上它都不是一个最好的方式，那我们，诶等以后讲我们这个。

Table的时候，我们还会说还会有什么呀，更加的一个方式啊，好，那这个呢，是我们说外边距的一个折叠的问题啊，或者也叫重叠啊，以后我们说折叠和说这个重叠都是什么呀，一个意思啊，一个意思，好这里边儿我来停一下。