16.尚硅谷_css2.1_margin叠加.wmv原创

我们来看好，刚刚我们已经讲了BFC的两个规则了，其实第一第二规则是不是讲完了，好来看第三个规则，大家熟不熟，内部的box垂直方向的距离由马决定，这个应该没有太大问题，是不是属于同一个BFC的两个相邻box的会发生？重叠看它的条件，首先属于同一个BFC的，其次两个相邻的box，问你这个box是什么box？什么不啊？谁的规则啊，那这个应该这个应该什么故事啊。会计，也就是说你要发生马丁重叠要有三个条件，第一个属于同一个BC，其次相邻的，再其次，会计元素。能明白吗？必须要得必须要有这个三个三个条件，不然的话马是不会重叠的，我们可以来重，我们可以什么把这个market重叠，我们可以来写一下马重叠吗？之前应该在什么接触过吧？你们接触过几种形式的market重叠？

好，零四来看marin重点，好，这个我们写一下。二接下来marin。重叠好，那怎么去演示一个马重叠呢？好，这个步骤一些一定要做好，来D吧，两个div好呃。怎么写呢？好，一个给ID吧，一个叫做up，一个叫做down。好，来给div，只要是div，我就给它一个宽度为200PX，给一个高度也为200PX，来一个背景颜色为粉色，两个粉色的盒子，好，一个叫做up，一个叫做down。

好，我让他们干嘛，都有马马in四周都给40，呃，都给50片，好来看一下都给50片吧，好来看一下现在这两个盒子现在长什么样。好，是不是长这样？问妈有没有充电？嗯。Marin有没有发生重叠啊，大家看本质上你看一个盒子两个盒子吧，有没有重叠？好看一下马in重叠的条件首先属于同一个BFC，这两个div属于哪一个BFC？HT所管理那个BFC是不是？其次它们俩是不是相邻了，比有没有相邻马比一旦相邻了，其其次还有什么特点啊？首先属于同一BFC，这个条件有没有？其次是两个相邻的会计盒子，你看属于同一个HTL所管理的BFC，其次是两个快集合子，他们的马相同了，所以重叠了。

能理解吗？怎么解决？这三个条件里面只要有一个条件不满足就可以了。哎，我们来看我把这个大，我现在选中这个大。我把这个大。换成。伊兰卡，看马有没有重叠。马有没有重叠，为什么没有重叠？他不是快计盒子是不是OK，我们再来说一遍，还能怎么解决啊？不是说要属于同一个比较C吗？是不是来看我外面直接给你包一层。这一层我什么事情都不干，我只开启BFC。好，这一层我就是用来开启标C，它会对你的页面造成任何影响吗？是不是什么样式都没都没有写啊，Div是特别干净的吧？好，我就让他什么掉，来个over呗，黑的好，来看一下双。我让谁啊？

看一下，死掉欧弗洛维。黑的啊，是不是我给所有的div都设设置个尺寸，我应该只给谁啊，Up跟谁？跟到CTRLC2跟到这里，呃，这边应该来个逗号，好来看一下mark有没有重叠。哎，看这个down是不是在这块啊，你看这个O回来是不是在这块，为什么他们俩没有重叠啊，数一数现在页面上几个BFC。一个HD码数管理的BFC，一个over的BFC，是不是属于同一个BFC的两个会计元素？马相？交的时候才会重叠吧，来看现在我这个阿尔法属于HT的BFC，我这个大属于上面这个o flow的这个BFC吧，他们属于同一个BFC吗？不属于，那他们能重叠吗？不重叠那还能怎么改？

不相邻不就行了吗？怎么让他们不相邻啊？中间加个啥随便你加个啥吧。可是我问你只加一个div行吗？来看一下行不行。有没有重叠啊，很明显重叠了吗？是不是啊，我问你，你这个div，我说了D是干干净净的吗？身上什么东西都没有吧，问你阿尔法跟大猫有没有点，有没有香蕉。Market，你就看这个up的下面这个monkey跟当这个上面这个monkey有没有碰到一起，有碰到一起吧，只要你给它隔开就行了。我一个高度为。EPX都可以。

有没有重叠？有没有分开来，因为你这个up跟这个档之间是不是有了一个一相数的分分割线啊，正根线是不是把你上下这个马分开来了，只要market没有碰到一起就不会重叠啊，能明白吗？好，那为什么我们说，那我问你，我在这个编写个SPA行不行？是干形吗？零乘以零啊，啥啥都没有啊，二分跟马有没有碰到一块，有没有碰到一块，碰到一块就会重叠，能明白吗？可是为什么我们写BR可以啊？是不是记得写BR应该是可以的，为什么写一个BR标签可以？好，BR标签本身它就有一个高度，我们来看一下，我们来印个屏幕，好呃，我要上一下我的QQ。

好。好，印个屏幕。CTRL2的加A。把这个屏幕印一下，打开我的。好。嗯，哇OK，打开标识之后好稍等一下。让他换一下好，Ctrl altl加N，打开一个画布。好，呃，看一下。你们学过了吧，好确定。啊，要用起来，特别是去量像素的时候，去量是里面什么是是最最准的啊，啊CTRLV把这个东西贴上来，好，我们来画两条辅助线。结过了。

OK，放大一点看吧。好像没有辅助线没画好。好走，你这个时候应该差不多矩形选框。好，来选一下，看一下它的高度为多少，是不是120多了，这里面的妈比是不是上面我们给了50，下面是不是给了50啊，其其中当中的21是什么。BRBR默认会占个二二十一的高度，懂不懂，而且这个高度你在页页面上面，你去什么，通过调试工具你还看不到，你看我选中这个BR你是干嘛，相当于什么都都没看到啊，可是你看这个BR的高度是凹凸凹凸啊，本身就是有一个21的高度，就说你用BR标签去清这个是不是有问题的，这个market还对吗？它会无缘无故多出来21像素，能理解吗？所以一般我不建议使用这个BR去清啊，好，一般怎么切呢？你如果实在想把这个高度给清掉的话，你就干嘛外面套一层套一层干嘛E我不建议这么去清，我也不建议在这边去加高度，也不建议给SPA去加高度，因为照样会对你这个market产生影响嘛，Market会会变大的，那我建议的青码就是什么，在外面给我包一层div，这个div开启over，那这个div不干任何事情，就是用来干嘛开启BFC的，能明白吗？那其实最好的解决方法你就不要用马。

能用pen的就用Penny，就是marketin跟Penny都可以使用的情况底下去。Pen等等，可是绝大多数情况之下，你会发现需求的话只能使用monkey，能理解吗？OK，那这个时候得知道，好，那现在我们BFC讲了几个规则了。三个规则，那这个时候首先BF区与浮动区域不会重叠，可以可以让我们实现两条布局是不是啊？其次马in叠加这个问题你得干嘛要搞，搞清楚了懂不懂，那这是marin叠加的一种形式，再来看。Market加还有其他形式。

那我如果有个负元素div，我给个什么rap，我里面再有一个子元素叫什么inna，好，我这个外跟ina。万稍微大一点，给个300乘以300，好，它有个上下左右等于什么50的马in应当我们给小一点。娜给个150 150，可是她也有150的妈。好，他一个什么50的码，你这个我给身份好来看一下，呃，哪边改错了啊，选择性没错啊，不不选择去错了，是不是我都语无伦次了，这里看马有没有重叠。子元素的马跟负元素的马有没有重叠？有重叠吧，为什么重叠了？看我们马重叠重叠的三个条件，首先外壳跟一塔是不是受一个BFC管理，外壳跟一塔是不是受同一个什么。

HT的管理啊，其次的有没有发生，呃，有没有相，有没有相交到一块，有没有碰到一块，碰到一块的话，他们俩是不是快计结束，有没有重叠，怎么解决。我给外婆家行不行？为什么可以不是同一个BC了，是不是还有呢？我给这个外加个宽度行不行？呃，现在宽度没有起作用，因为什么。没有给它加掉吧，你必须得是四个再给嘛，默认就给嘛，黑颜色你看可不可以啊，这个时候为什么可以啊，你子元素这个marin是不是在这一块，你负元素的marin是不是在这一块，两个人有没有相交到一块。

被一项数的边框给隔掉了，能理解吗？这个时候是不是也可以解决马重点啊？好，这个其实我们更更通常的叫法叫马传递吧，是不是不管是马in传递还是马in重叠，在我们BFBFC里都是我们这条规则造成的？能明白吗？以后不管是听到兄弟节点之间的马in重叠跟指腹之间的马in传递，其实都是我们这第三条BFC的第三条规则所所影响的，能明白吗？好，那这是我们说的妈给你什么叠加的问题，以及什么怎么解决，只要破坏它这什么三个必要条件里面的一个就可以了，知不道OK？