尚硅谷前端基础 (51)

好，我们说完了这个水平和垂直方向的一个布局，那关于这个呢，我们就先说到这儿，当然不是说把这两个听明白了，你就可以去做一些，就就可以去布局就没问题了啊，我们还需要通过练习去哎，去巩固这些知识，当然哎别着急，马上我们就可以开始做这个练习了，但是我们还需要有一些前置的知识要给他说完，那这个时候呢，我们要说一个问题。啊，还是说的是我们外边距的问题，实际上我们会说，呃，很多的时候我们的问题都是集中到这个外边距上，所以外边距用的时候一定要注意啊，我们新建一个文件，我们来说一下，我们这叫一个外边距的一个折叠，点一个HTML外边距的折叠啊我们在这儿创建一个div，呃，点一个这个点一个BOX1，然后我们加上一个点一个BOX2，这是一个，诶这这这这不能加，不能写空格是吧？哎，这是一个我们这个兄弟元素选择器。

点一个报菜，我们直接创建两个盒子啊，两个盒子在这儿，我们直接给它运行一下啊，把这关掉，这里边我们来写点样式啊style标签在这里边，我们直接点一个BOX1，呃，BOX1我们这里边我们我们给它统一统一设置一下吧，点BOX1逗号，点一个BOX2，我让这两个呢都是是200是200啊，然后我们再分别设置点一个BOX1BOX1的呃，Background color background color background color，我们来一个这个井号B蝠，然后BOX2呢，点一个BOX2的一个background color background color，我们叫做一个这个井号就叫orange吧，Orange啊两个上边这是BOX1，下边这是BOX2啊，我给写一个名吧，这是一，这是二啊，这是一，这是二，当然我们可以把这字再给它调大一点，方size，方size直接调一个100的像素啊，把字给它稍微调大一点啊，那是这么一个效果，那这。

这个是我们的BOX1，这个是我的这个box box2box1box2我们看见了，诶这字我还现在先不能写，因为写上以后待会可能会对我有干扰啊，我们先知道吧，上边这是一，下边这是二，那现在呢，我们说了我们学了外边距，我们说了默认情况下左外边距还有上外边距它会改变我们元素自身的位置，而下外边距它会挤别的元素，右边距我们就不提了，因为现在这两个元素我们也没办法放到一排，对吧？所以右我们就不提了，我们说下下会挤别的元素，所以这个时候我给BOX1BOX1我来干嘛呢？哎，我来设置一个下外边距啊，我来设置一个下边距，我们直接来一个margin bottom啊margin bottom，比如说我来个100个像素，很明显，100个像素会干嘛？哎，他是不是会把我们的这个BOX2往下挤100个像素，也就是说这一段距离实际就。

是100个像素啊，100个像素，也就说这个是给谁设置的，给BOX1设置的好，那接下来在这儿我在干嘛呢？哎，我在给我们这个BOX2设置一个上位边距啊，上位边距，上位边距的话，那我们注意了，上位边距我们说的是移动自己，所以我给他设置一个上半句，按理说他是不该往下走啊，哎往下走，所以这个时候我们来给他写一个，写一个margin top margin top，我也来个100个像素，这时候你看页面有没有发生变化，诶没有发生任何变化，这距离有没有变，诶这距离并没有变啊，这距离并没有变，诶那这个是这个是为什么呀？这个是为什么？哎，我们来想一下，这个就是我们要说的一个外边距的一个问题啊，外边距的一个问题，本来说它有一个下边距，它的下边距在哪，是不在这个位置，它还有一个上边距的上距在哪，是不是也在这个位置，等于说它俩的这个外边距是不是是不是挨着，哎，挨着那所以这里边我们就直接说一下这个问题，这个问题我们叫做什么呢？叫做一个外边距的一个重叠啊，外边距的重叠，或者可以叫外边距的一个折叠，这两个东西叫哪都行，完整说法叫做一个垂直外边距的一个重叠，也就说只有垂直方向才会发生这么一个问题，我们来说一下，诶垂直，垂直方向的外边距，垂直方向的相邻，哎，这么写吧，相邻的垂直方向外边距。

它会发生什么呢？会发生我们这个重叠的一个现象，你就要重叠也行，你叫要折叠也行，总之就这么一个东西啊，会发生这个重叠现象，所以注意出现这个问题的构成要件有两个，第一个是相邻的，哎，你这两个问具你得挨着，你说我这一个，它这一个都是垂直方向的，它是不是不挨着啊，哎，你得挨着啊，第一个你得是相邻的，得挨着，第二一个你得是垂直方向的margin top，或者是margin bottom Mar left marin right，不行，得是垂直方向的啊，所以两个构成要件，一个是相邻的，一个得是垂直方向的，所以它这是一个margin bottom，这是一个margin top，现在是不是既相邻又是垂直方向啊，所以这就发生了重叠现象，一定注意两个构成要件，一个是相邻的，一个是垂直方向，那折叠重叠怎么了？那这里边我们要分开讨论，一种是我们叫做一个兄弟。

元素还有一种我们是父子元素啊，父子元素我们先说兄弟元素，兄弟元素间的相邻垂直外边距会什么呢？哎，注意了，它会它不，你像这个它下外边距是100，它上外边距是100，它俩的距离会不会加一块直接取一个200呢？注意不会啊，不会，兄弟元素之间垂直的，哎，我相邻的垂直圆距它会什么呢？诶会取哎两者诶之间的一个什么呢？角大值啊，两者之间的一个较大值，所以它是100，它也是100，那较大值那就是100，那所以之间距离就是100，如果我妈这top是一个150，那OK，他们俩之间距离就是150，如果上边这个margin bottom是200，他们之间距离就取200，说白了这个距离谁大？

听谁的啊，这个距离就是谁大听谁的，就这么一个效果，很简单，所以注意就是两者之间取较大值，这怎么理解呢？其实也也很好理解，哎，就是说可能比如说哎，比如说咱俩说咱俩关系不好，我瞅你生气是吧，我瞅你生气，那我跟你说了，我说你躲远点，你离我十米开外，不要在我十米范围之内出现，哎，那这时候你也跟我说了，你说我瞅你也烦，你离我也不要进入到我十米范围内，那这个时候我俩咱们两个人之间距离，我用不用拉开20米啊，不用拉开20米，我们只要保持十米的距离，是不是既满足你那个，又满足我那个，哎，那假如说你比较讨厌我，你说你20米开外不能看见你，那我们就保持一个20，你那这个时候我们是不是两者都满足，哎，所以这就是一个合并现象，它会让什么呢？诶他会确保两者都满足，那只能是取一个什么呀，取一个最大值啊，取一个最大值，这个就是我们外边距的一个，诶折叠的一个现象啊，折叠或者重叠这么一个现象，那这里边。

我们说的一个这个两者都是正值的情况啊，两者都是正值取较大值。哎，两者都是我们这个正值，则取我们这个角大值，那这里边接着再来看，那还有一些特殊情况，特殊情况其实遇到的比较少，但是我们要说一下，如果有负值呢？哎，比如说比如说我这是一个margin bottom啊，我把这抛套过去了，Margin bottom呢，我这是一个100像素，100像素呢，它往下移这么多，那我如果是负100。

如果是负100，那它是不是就往上移啊，哎，负的往反方向移动嘛，对吧，负的往反方向移动，那这个时候我这儿我改成一个100，那这时候一正一负，我们来看什么情况，一正一负这是干嘛了，是不是跟没有一样，哎跟没有一样，所以我这来一个200，哎你看他们距离实际上就是一个100，所以啊，特殊情况一般不会遇到啊，特殊情况一般我也不希望你在写的时候一般也不要去往这种情况写，你就设计你用起来会比较麻烦一点啊，特殊情况我们说了，哎，如果我们这个相邻的外边距一正一负，一正一负则什么呢？取两者的什么呢？两者的和你这不负100吗？你这是200 200加负100正好是100 OK，那咱们俩之间就是100，懂意思吧，这是我们这个一正一负啊，一正一负，那还有什么情况呢？还有情况是两个都是负啊，两个都是负，那比如说我上边是一。

负100啊负100，那这儿呢，我也改成负100，我也改成负100，两个都是负100啊，两个都是负100，他说了，哎你离我近100，哎，我他说了我离你近100，那这时候你来看都是负100，有没有变化，没有变化啊，没有变化好我这改一个，这改一个负120。是不是往上走了，哎，往上走了好，那同理，我们这改一个这个负200啊负200哎，这时候是不是整个就上去了，哎，所以这个东西也非常的简单，那就是什么呀，就是两者的值取什么呢？取绝对值较大的啊，谁的绝对值较大就取这，所以如果什么呢？如果相邻的这个外边距都是什么呢？都是负值，都是负值，则取两者中这个什么呢？绝对值较大的啊，则取这个绝对值较大的，那这个时候我们就这两种情况遇到的比较少，主要就是两个都是正值那个啊，它会取一个这个最大值啊，取一个最大值，所以你知道一下就行了啊，知道一下就行了，好，这个是我们说一个这个兄弟元素之间啊，BOX1和BOX2他们两个是兄弟，会发生这种情况，那我们先说一下，像这个玩意儿，我们用不用处理，哎，不用。

处理这个东西就是我们希望出现的情况，因为这种重叠的情况，它可以避免我们两个元素之间的距离，这个边距过大，就是可以保持一个相等的距离，这个东西是有利的，我们就希望它存在，所以这个问题我们压根儿不用处理啊，压根不用处理，所以注意。

兄弟元素之间的这个垂这个什么呀，外边距的一个重叠，哎，对于我们的这个开发啊，对于开发是是有利的啊，对于开发是有利的，所以什么呢？所以我们不需要进行处理啊，兄弟之间的元素它的这个重叠对我们开发是有利的，这个东西我们压根儿就不需要管它啊，不需要处理它啊，不需要处理它，所以就放着就完事了，不用管它，那但是还有一种特殊情况是我们父子元素间的什么意思呢？我把这住了。这直接写一个写一个这个点一个BOX1，诶我换一个吧，BOX3，然后大于号，这来一个点一个BOX4，两个元素BOX3是BOX4的一个子元素，在这我们直接来个点一个BOX3BOX3Y，我们来一个200个像素，Hi也来一个200个像素background background我们来一个井号一个bic啊井号一个BFA，然后这我们来一个BOX4 box4是一个100，是个100BACKGROUND，我们来一个这个orange，然后这保存现在这个是三，诶这个是三，这个是四，对吧，两个元素一个是三，一个是四，那现在干嘛呢？我要给BOX4啊设置一个marin top，我比如说我就设置一个100，我想干嘛呢？我想把BOX4啊。

挪这来，那marin top我们说了是移动自己，这哥们儿是不是正好跑这儿来呀，所以这个时候我直接给他来一个margin top，我们来一个100，诶你看，诶，的确这哥们儿确实跑这儿来了，但是问题来了，不仅他跑这儿来了，这个副元素是不是跟着他往下一起挪了，哎，往下一起挪了，所以这块为什么会产生这个问题，那好了，我问你了，BOX4的上外边距在哪？

是不是在这儿啊，那BOX3的上位边距呢？哎，它是不是也在这儿啊，那也就是说他们两个的上外边距是不是又相邻了，又挨到一起了，哎，所以这个时候我们就说了，父子元素之间的，父子元素间的一个相邻外面距，相邻外面距我们这个什么呢？子元素的会什么呢？会传递给复元素，会传递给元素啊，我们说的是一个什么呢？是一个这个上外边距啊，上外边距是这么一个情况啊，父子元素间的子元素会传递给负元素，所以这个时候注意了，这是子元素，这个是负元素，子元素元距是不是在这儿，负元素也在这儿，那OK，你给子元素置了，子元素设置完了，就相当于给负元素也设置了，所以这个时候它会把负元素一起给一起给拉下啊，一起给拉下来，这个就是我们说的一个上位。

啊，相邻的问题啊，主要上面面具，下面文具一般也涉及不到这个问题，我们只考虑上面文具，那这个时候这个问题好不好，这个效果好不好，哎很明显这个是有很大问题的啊，这有很大的问题的，为什么呀，因为我现在只想把它往下移动，但是呢，我一他同时呢，把这玩意儿也给整下来了，那他一下来是不是把下边整个布局全都会给我挤乱，这还出一空白的，很难看对吧，很难看，所以附子外边距的一个折叠，它会什么呢？会影响到我们页面的一个什么呢？布局，我们必须要进行处理，所以像这种情况我们就躲不过去了啊，该处理那就必须得处理了，因为它已经会影响到我们页面当中的一个整体的一个布局了啊，整体一个布局了，好，那这个问题我们现在先看一下怎么处理。

那注意，呃，现在来讲，就我们现在的一个情况呢，我没有办法很完美的处理，或者我现在也暂时先不想告诉你那个完美的处理方案，我们就先说一下一个临时的解决方式怎么解决，那现在我们来看，现在是子元素的外边距传递给了负元素，对吧？那我们说了它的构成要件一共有两个，一个是什么呢？一个是相邻的，还有一个是垂直方向的外边距，哎，构成要件两个，一个是相邻，一个是外边距。所以我们解决问题的思路目前来讲也是两个，要么你别用外边距，要么你就别让它相邻，懂这意思吗？哎，我们先说，哎，那你说老师不用外边距用什么呀？我把这个边距住了，不用外边距，还是我们需求是什么？需求是把它往下移，是不是移到这儿来呀，哎，你要把它往下移，移到这儿来，我们除了通过外边距去移它。

还有什么方式，那我们想一下，你不就想把它移这来吗？对吧，你把它移这来，那我如果给我们的这个BOX3加上一个上拍定，加一个100，那他是不是也跑这来了，哎，所以在这呢，我给BOX3我加一个拍定top拍ing top我们来个100个像素，那这个时候你看它是不是整个就给挤这儿来了，但是问题来了，你加上这个拍ing以后，我们整个这个盒子的大小是是被挤开了，哎被挤开了以后，这多了100像素，多了100像素怎么办？你把这100像素从负元素的高度里给它减去。是不是就行了，哎，就行了啊，但是你得算一下，把那高度点出去，你就可以达到把这个元素移到这个位置的这么一个目的，也就是说我可以取而代之不用margin了，而改用什么呢？改用拍镜，我是不是就可以实现这个效果呀，哎，实现这效果，但是很明显这么做它也稍微有点麻烦，你还得去改这个什么呀，改这个高度啊，稍微有点麻烦，但是你要知道它是一种方式，好改回来好，那你说我现在不想用这种方式了，我还想用外边距，但是你用外边距就会出现这种折叠现象，我还用外边距怎么办呢？那你就别让它相邻怎么着呢，相邻我们它的外边距在这个位置，它的外边距也在这个位置，那为什么能挨一块，是不是因为他们之间没有边块，还有内边距，哎，所以我可以怎么办呢？比如说我给BOX3加一个border top border top啊，我先写上我叫一个什么呢，一个。

抗素，然后来一个，然后来一个solid，我们来看效果，这时候还合不合并，哎，这个时候是不是就不合并了，哎就不合并了，但是不合。

为什么不合并？哎，就是因为这个边框现在把它的外边距和它的外边距给隔开了，隔开了以后那不就不合并了吗？哎，很简单啊，就隔开了就不相邻了，就不合并了，但是也是有这么一个问题，我加了一个像素的编号以后，是不是也是把我整个盒子拉长了一像素，哎，所以你可以把这高度从这个height里边减去一个199，那这样高度不变了，当然你还需要这个边框的颜色换成这个跟它是一样，这样就解决了，对吧，这样解决了也看不出，也看不出一个什么这个什么区别，但是有问题了，有问题了你会发现实际上我这元素是不是多出去一个像素啊，哎，多出一像素，因为那个边框你给你，你把这东西减下去了，它等于多移了，所以你这还得改，你还得把它改成什么呀，改成99。

哎，改成一个99像素，那这样才是正好的啊，才是正好的，所以你会发现这玩意儿整起来是不是也很麻烦呀，哎，也很麻烦啊，所以我改回来啊，改回来我把这给你留下啊，把这给你留下，你知道一下有这么两种方式啊，两种方式，呃，把这先住这啊，把这先住这，这还是改回来，也就是说外边距折叠的现象，我们这就已经看见了。解决方案对于目前来讲，我们两种方式，一种你要么就别用外边距了啊，要么就别用外边距了，第二种要么你就采取一种特殊方式，把这两个外边距给它隔开就完事了，但是就现在来讲，都不是什么特别好的方式，那往后我们还会说一些其他的解决方式，我们还有两种方案去处理这个问题，但是这个内容我们稍微放后一点，那以后你布局的时候，你会发现你给子元素设置一个边边距，结果把负元素给挤下来了，那你要想一下是否发生了这个外边距的一个折叠，先意识到这个问题，后边我们再去解释。

好，外边距折叠我们就说完了啊，总之要件就是垂直方向的，然后还得是相邻的外边距啊，然后兄弟元素之间的爱，爱重不重吧，我们就不需要处理，而我们只需要处理的是父子之间的好，我们先说这么多，评一下。