尚硅谷前端基础 (73)

好，那么我们用这四节课，把我们这四种定位我们都给它过了一遍啊，都给它过了一遍，那这四种定位当中呢，其实我们用的最多的，那就要数我们的这个绝对定位啊，那我们的相对定位啊，固定定位都是一些。比较特殊的场景会用的，或者比如说像相定位，那相对定位我们说了它一般都会结合固定定位一起用，为什么要结合固定定位一起用的，因为不是结合固定定位啊，是结合我们这个绝对定位一起用，为什么要结合绝定位一起用呢？因为我们的绝对定位它是参考于这个包含块去定位的，而它的包含块又由这个副元素或者组先元素是不是开启定位来决定，所以这个时候往往我们都要干嘛呢？哎，给一个绝对定位元素的副元素或者组先元素开启一个相对定位，那这样的话，我们就可以明确的，我们当前这个元素它是相对于谁去定位的，我们定位起来就比较比较明确啊，比较呃比较简单一点，并且你开启了相对定位以后，对那个元素还不会产生什么影响，当然这个东西后边我们练习还会说到啊，暂时先体会一下啊，理解一下，然后像这种年制定位的话，我们用这种方式就比较少了，因为它的兼容性不好。所以真正。

要写的话，我们也必须得结合GS，所以我们再重点说一下我们的这个绝对定位啊绝定位，呃，绝对定位的话，我们还要再补充一点的，就是我们说的，哎，我们说了这个绝对定位元素的一个什么呢？元素的一个布局点一个层，那之前这个问题实际上我们就提到过，我们提到过什么呢？哎，我们之讲这个核模型的时候，我们就说过了，我们这个水平方向布局七个属性是吧？哎哎，垂直方向布局七个属性，但是当我们有了这个绝对定位以后，它又发生了一些变化，诶我们来看看啊，在这我们直接来一个这个点一个BOX1，呃，我们这样吧，点一个BOX1 box1里边我们再来一个点一个BOX2，然后呢，在这我们来设置一下样式啊，点一个BOX1 box1呢，我们来大一点，当成我们一个画布外是一个500。

啊，还没写style标签啊，Style标签千万不要忘了啊，我们这是一个这个tle style标签，然后这里边我们是一个点一个BOX1 box1呢，White我们给它写一个500 hat呢也来一个这个500，然后呢，Background color background color，我们来一个这个井号BF，哎，这是我们BOX1，然后呢，在这儿我们来一个点一个BOX2 box2呢，Y是一个100 hi是一个100，然后background color background color，我们是一个这个orange吧，Orange那之前我们提到了我们正常情况下的布局啊，正常情况下我们水平布局是什么决定的？哎，我们这么几个值，哎，Margin Mar margin left。

哎，加上什么呢？加上一个我们这个，哎，Borderder DR borderder一个left，哎，加上一个拍掉left。哎，再加上一个什么呢？Rice，再加上一个我们这个拍定right，哎，再加上一个我们border right，哎，再加上一个我们这个，哎叫做一个margin left margin right，呃，应该等于什么呢？等于副元素的一个宽度啊，副元素内容区的一个宽度，那现在这应该换了，不应该叫副元素了，应该叫什么呢？叫包含包含块，因为这个时候就都是包含块啊，都是相当于包含块去计算的，包含块的规则还是这样，那现在现在这种情况，那BOX2的包元块就是包BOX1，这没法说的对吧，就是最近的一块元素绝对定位，以绝对定位那个来算就完事了啊好，那这个时候这个是我们之前这几个属性，但是注意了，当我去开启了绝对定位以后，我去开启了绝对定位以后，我这个规则就变了，这。

那规则就变成什么了，这个规则就变成了，我们这儿左边要多一个left，然后右边呢，还要多一个什么呢？多一个这个right，也就是说从我们之前的七个值变成了九个值，那其实就是增加了谁呢？增加了一个这个left，还有right，也就是说你要把这九个值加在一起，应该等于包含块内容区的宽度，但是现在你注意了，我给BOX2开启了绝对定位，现在它的含块是谁？哎，它的副元素也没有开启相应定位，它的组先元素也没有开启定位，对吧？那这个时候对于BOX2来说，它的包含块是HTM2，所以这个时候为了明确一点，我给BOX1啊开启一个相对定位。

那这个时候BOX2的包含块是不是就是BOX1了？哎，当然你这开一个绝定位也行，只要开启定位就行啊，只要开启定位就行啊，我们这儿还是开一个相对定位，不会对它产生任何影响，那现在BOX2的包含块是不是还是BOX1啊？哎，那这里面注意了，这个等式你就必须得满足啊，必须得满足，诶有同学说老师我要看看吧，我这写一什么呢？我写一个RIGHT0。让零，那这个时候我是不让它的，右边就是零啊，诶你看它是不是就跑跑右边来了，诶那我如果写什么呢？我如果写一个LEFT0呢，LEFT0干嘛了，哎，就跑左边来了，那这时候注意了，我就想它冲动啊rig right一个零。左也是零，右也是零，那这时候注意右管不管事儿不管事儿啊，这时候我们来检查一下。

你来看一下这个right，哎，直接看那个布局，你看这个right它是有没有生效，没有生效对吧？这这看不出来，但是你你也能看到，如果生效了，是不是right应该跑这来了，哎right跑这了，Right它并没有真的生效啊，并没有真的生效，那这是为什么啊，还是那个原因，我们说了，当我们到了绝对定位以后，当我们开启了我们这个绝对定位以后，哎，我们这个什么呢？我们这个水平方向的。水平方向的这个布局等式就需要什么呢？就需要添加一个什么呢？添加left和right啊，两个值啊两个值，那此时此时规则呀，规则和之前的一样，规则和之前一样，只不过多添加了两个值啊，规则和之前一样，只不过多添加两个值，那此时规则和我们之前一样。

哎，只是什么呢？只是多添加了两个值，什么规则，我们再总结一下，如果七个值中七个值，哎不是七个值了啊，九个值中没有凹凸，没有凹凸，哎当然这块啊，我们说的是什么呢？说的是当我们这个叫做什么呢？发生我们这个过度过度约束时，过度约束时，什么叫过度约束？哎，就是说白了，我们这几个值加到一起，加到一起不满足这个等式了，是不是叫过度约束了？哎，当发生过度约束时，如果九个值当中没有凹凸啊，没有凹凸则什么呢？则自动调整我们这个什么呢？Right，以使我们这个等式满足，诶这个跟我们之前就不一样。

之那是什么？哎，之前那个是，哎调in，那现在有了了，我就不调in了，调谁调，所以这个时候你注意我left是零，然后marin left也是零，然我这一堆值加一块什么marin borderding，我是不是都没设置啊，哎，都没设置，我给它设置了一个100，也就是说现在的等式基本上是一个零加上100加上一个零，我需要它等于谁需要让它等于500啊，需要它等于500，那这个时候我这是不是才是100啊，差了几，差了400啊，差了400，所以这个时候你的零就没用了，这叫过度约束，它会把自动把RIGHT0调整什么呢？调整成410等式满足，所以现在这个距离就是一个什么呢？就是一个400，为什么？这是因为我们浏览器自动调的懂了意思吧，哎，自动调的，这是我们说的，如果九个之中没有凹凸，如果有凹凸。

啊，如果有凹凸，那这情况又不太一样，哎，如果有这个凹凸则什么呢？则自动调整我们这个凹凸的这个值以什么呢？以使我们这个等式满足啊，一是等式满足，那我们来说一下哪些值可以设置凹凸，可以设置我们凹凸的值，之前我说了有谁啊，有我们这个margin，还有我们这个right，诶这时候多了两个，一个是我们这个left，还有我们这个right啊，所以注意left right也可以设置成凹凸啊，也是凹凸，那现在我们来看了，那这个时候比如说啊，比如说我把right设成凹凸，那这是什么效果啊，那这时候注意它就不会调right了，它会调什么呢？调外看效果干嘛了？哎，它是不是把我们这个宽度变成。全屏了，哎，变成全屏了，为什么这么调，因为你外设置成凹了，设置成凹，也就是说这个值需要由浏览器自动计算，那浏览器自动计算它就会尽量去调整这个值来使我们等式满足，你现在life是零，Right是零，那现在你最后结果是不是应该等于500呀？那你要使等式满足怎么办？那你就只能把什么呢？把宽度调成500，那等式是满足了，为什么调宽度，因为宽度是凹凸，懂这意思吧，因为宽度是凹凸，所以这里边我们换过来，我还是改成100像素啊，改成100像素，那你改成100像素以后，那这个时候就调整谁呢？调整这个left，调整right啊，调整right了，那同理，我要把我的margin left margin left设置成auto，那这时候干嘛了，它就会调整margin left，也就说在这会多了一个margin，哎，Left还是0MARGIN left是一个400，然后这是100，然后。

21个零是不是等式也满足了，哎，也满足了，那我再来一什么呢？我再来一个margin right来一个凹凸，那这时候干嘛了？左右都凹凸，那就意味着它把左右的距离都给你设置一个什么呢？设置一个相等的啊，设置一个相等的，所以这样是不是也可以让我们元素在这儿达到一个水平居中的效果呀，哎，水平居中效果，但是注意我能这么写的前提是我的left还有right，我是零，如果你left right不写，你看效果我们这一保存，它是不是就靠到左边了，为什么靠到左边了，为什么一定注意，因为什么呢？因为我们这个left和right的值默认是什么呢？默认是凹凸，所以诶，如果你不指定我们这个left和right，哎，则什么呢？则我们这个等式不满足时，哎，不满足时它会什么呢？会自动。

修正，哎，自动调整哎这两个值，哎，自动调整这两个值，所以这个时候你看啊，你现在等于什么情况，现在我没写left的right，等于我写了一个的凹，因为默认值就是凹嘛，然后我来了一个right凹，那这个时候注意了，它就会自动去调这两个值，你这俩就写的没用了啊，写没用了，所以如果你要想让这个margin可以通过margin来设置居中的话，那这里边你必须得把life的零，RIGHT0给它写上，把这两个值给它固定住，然后你的margin又可以像我们之前在文档格那样，让元素水平居中了啊水平居中了是这么一个特点啊好，那这个是我们说的一个水平布局，那接着再来说这一块，其实跟我们之前没什么太大区别，诶主要就是多了两个值，一个是left，还有一个是right，那这里面变化比较大的就是垂直方向布局，垂直方向布局我们之前说过了，就是我们这个。

垂直方向它也有一个等式，但是那个等式它不要求你强制满足啊，强制满足，但是现在到了我们绝对定位垂直方向布局的等式，哎，垂直方向布局的等式也必须要什么呢？也必须要满足啊，也必要满足，那么那这是什么等式，我们点起啊，我们就是一什么呢？那你就得是一个top，加上一个什么呢？Margin，哎，Margin margin2个margin top，还有什么呢？还有margin bottom，哎，再加什么呢？加上我们这个head，哎，加上我们这个pading paing top，哎，Paing bottom，再加什么呢？加上我们这个border，哎，Borderder top，还有一个borderder bottom，再加上一个hat he，你得等于什么呢？哎，你得等于我们这个包含块的一个高度，这个等式就必须满足了啊，这个时候就必须满足了，所以那利用。

这个特点，那其实我们就可以做一件事儿，我可以干嘛呢？我可以利用这个特点也让我的元素干嘛呢？在我们的副元素里边垂直居中啊，垂直居中怎么做，我们先看一下啊，它同样也得需要这个等式满足，所以这个时候如果我这设置一个TOP0，然后是一个包零，这个时候注意它不可能实现，为什么呢？TOP0是是贴在上边，包零是不是贴在里边啊，那这个时候是不是又过度约束了，过度约束怎么办？过度约束它就会自动调整bottom值，给bottom设置一个大值，本来是高度是500吧，哎，你本来这是100，这是500，差了400，所以bottom值会自动调整为400，以使这个等式满足，但是如果我给hi设置了一个凹，我们来看效果，什么效果，哎，Hide设置完凹凸以后，它就不再去调整那个bottom，会调整什么呢？调整那个设置为那个凹那个值，所以它会自动调整hi。

十等式满足，那hide等式满足，是不是就把hide直接调整成500等式满足了，哎，那同理，如果干嘛呢？我把hide写成死了，写成100像素，然后在这儿呢，我给他来一个呀，来一个这个margin top auto，是不是自动设置margin top呀？哎，Margin top auto，那这时候是不是它就会调整margin top呀？哎同理我要是把margin top跟margin bottom全都设置成auto，那这个时候它就可以达到一个什么呢？上下外边距相同的一个效果啊，相同效果就可以使我们这个元素在这儿垂直居中啊，垂直居中注意了，这个在我们正常的文档轴力是不能这么写的，因为它没有这个强制，强制这个措施，但是在我们的绝对定位以后，就可以通过垂直方向外边距设置一个凹凸，让我们元素在这儿垂直居中，那你再把刚才那些都给它打开，那我们就可以实现一个效率。

哎，实现一个效果干嘛呢？哎，让我们的元素啊。

哎，让我们的元素垂直水平双方向居中，那是不是就等于把这个元素放到了我这个屏幕的最中间，哎，最中间达到这么一个效果，那这个效果很简单，其实就是让四个值top left right bottom4个值全都为零，因为它默认值是凹嘛，你必须得把它变成零啊，变成零，然后呢，让margin全都变成什么呢？全都变成凹，其实你就直接写一个marin，一个凹凸就行，全都变成凹凸，那这样就可以达到水平垂直双方向居中，让元素，让这个元素正好在它的包含块的中间，注意不是在负元素中间，是在包含块中间，如果把负元素的相对定位关了，那这个时候它就在哪了，是不是在我整个这个网页的中间了，哎，网页中间了啊，一定要注意这个这个特点，那这样我们是不是可以很简单的让一个元素垂直居中了，哎，注意。

D了，这个是一种让元素垂中，垂直居中的方式之一啊，通过我们这个绝对定位以后我们还会去讲别的方式啊，会讲别的方式，但是现在你先把这个理解一下是吧，两个等式，水平方向九个属性，水平方向九个属性，Marin，哎，这个left margin left border left pading left wise border right pading right，然后那个margin right，还有一个right，水平方向九个属性调谁都没有，都没有凹凸，调right有凹凸的，就是调整那个凹凸那个值，那这儿也是一样，垂直方向也是九个属性，上边是top margging top order top padding top head padding bottom border bottom margin bottom，还有一个bottom，九个属性，他们九个值加一起应该等于的是包含块的高度啊，包含块。

高度这两个等式必须满足，利用这两个等式我们也可以完成很多很厉害的布局，所以这个等式一定要记住，因为以后我们要做一些这种特殊的位置，要计算的时候经常要用到这个等式啊。好，我们这先说这么多，停一下。