尚硅谷前端基础 (49)

好，刚才我们把这个盒子模型里边的各个区域我们都给介绍了一遍，再回顾一下啊，最里边的叫内容区，通过wise还有height来设置啊，内容区是用来放我们的内容，包括子元素啊，包括这个文本都在这个内容区里面，内容区和边框之间的距离我们叫拍定啊，拍定啊有四个方向，上右下左四个方向，它是设这个边和内容区和边块距离的，然后最外边是我们这个边块啊，边块就是我们盒子的边缘，边块里边算盒子内部，除了边块，那就是盒子的一个外部了啊，那就是说这三个部分，内容区内电距还有边块，它共同决定着我这个盒子可见块的一个大小啊，可见块大小。然后边块的外边我们叫做margin margin它决定了我们元素的一个。位置啊，你是靠左是靠右，靠上靠下，它决定这个位置，并且margin它也决定了我们的这个整个元素的实际占位的大小，你说那个margin实际上也被元素占着，你设置了margin，别的元素就过不来了啊是这么一个意思，那接下来我们来说什么呢？我们就开始说一下这个布局，呃，布局的问题，那刚才其实我们会发现我说一句话是吧，我说这个。

右温距默认情况下根本就没用，为什么没用，我们这里边要说一下这个问题，我们要说什么呢？诶我们要说我们这个盒子的一个水平布局，盒子的一个水平布局，我们再去对网页进行布局的时候，其实比较麻烦的，其实就是水平布局啊，水平布局垂直布局，呃，总体来说你怎么弄都还好，相对来说比较简单，水平布局就相对来说有一点点麻烦，那什么是水平布局呢？就是横向的布局，也就说我想把这元素横着摆，对吧，它是怎么摆的啊，横向的一个效果，那这里边啊，我们为了掩饰这个问题呢，我在这儿创建一个div div点一个我叫做一个alter，点一个OUT叫做一个alter alter呢在这我们来写一个样式啊，Style标签，Style标签，我这直接来一个点一个al OT啊，点一个aler呢，我在这啊，我给它设置一个宽度，宽度是一个。

呃，一个800。宽度是一个800，高度是一个200，然后呢，我不给它设置颜色，我直接来一个borderer，是一个十个像素，然后一个red，然后这是一个solid，是这么一个效果，就出现这么一个边框啊，它里边是一个800，然后这个边框是一个十像素，对吧？十像素我们就拿这个来演示一个问题啊，把它调的小一点，正好跟屏幕容下，然后接着来呢，在aler里边，我们再创建一个in的，创建一个点一个in啊aler就是外边啊，In的就是里边，Inner的话，我们在这直接写一个点，哎一个这个inner inner呢，哎，Wise我们小一点，Wise就是一个200呢，也是一个是一个200像素，也是一个200像素，Background我们用我们这个号，一个BFAB，那现在我们的这个音呢，是不是就在这个位置啊，哎，当然如果你不设置宽度，那它的宽度就跟负元素一边宽了，对吧，就跟。

它是宽度一边宽了，内容区的宽度啊，内容区的宽度，所以这里边你要注意我们现在的inner它是在哪了，在这个副元素的内容区中的啊，内容区中的，那现在我的元素是靠左呢啊，靠左呢，我如果想着往右移，我就可以给它设置一个margin left的，我来一个什么呢？100个像素，它是往右移了100啊，这段距离就是一个100啊，那我如果设置一个margin right啊，Margin right margin right呢，我也来一个什么呢？我也来一个这个200个像素，你看管不管用。一点用没有对吧，一点用没有，它就是没用啊，它就是没用，那这一块是怎么回事，那这里边我们就要说一下，我们要说一下元素，哎，我们这个元素的这个水平方向的一个布局啊，水平方向布局，那这里边我们来说一下水平方向就是横向的啊，横向的我们现在不考虑，纵向我们就说是横向的，横向布局，我们水平方向的一个位置，哎，12布局就是一个位置啊元素再起负元素中水平方向的位置有以下。

哎，几个属性共同决定啊，有以下几个属性共同决定哪几个属性，我们从左往右说，从外往里说，最左边的是我们叫做一个margin left，哎，Margin left，然后margin left往里是我们的borderulder bur DR borderulder left border left再往里叫做一个我们这个pading left啊，Pading left再往里叫做一个west啊，West再往外啊，West再往外那就是我们这个pading right，再往外那就是我们这个border right啊，Border right再往外那就是我们这个maring right，也就是说我们这个元素的大小，还有位置是不是由这个玩意儿这些属性共同决定啊。哎，那么想一下，我这个元素占那么大地儿，有同学说，老师这不就占了200嘛，就220，就是那什么呀，200乘200就是占400呗，注意了，不是因为什么，我下边如果写了这么一个东西，你看。

这字儿有没有跑这儿来，没有跑这儿来，为什么没有跑这儿，因为这块地儿依然被这个inner给占着呢，所以实际上的inner占了多大地儿，实它看上去可见花只有这么点，但是它实际的占地范围占到多大，占到这么大个啊，占到这么大个，那你可能会说了，诶老师，那这东西是什么呀？哎，这东西是什么？哎，那这里边注意我们一个元素一个元素在其负元素中。

负元素中它的水平布局必须要满足什么呢？以下等式啊，必须要满足以下的一个等式，什么等式我直接CTRLC粘过来，这个啊，我说的都是子元素的啊，子元素的margin life的加上子元素的border left加上子元素的pading left加上子元素的west，再加上子元素的pading left再加子元素的border。哎，Right，再加上我们这个子元素的一个margin right往这挪一点啊，Margin right水平方向这几个值什么意思？左外边距啊，加上什么呢？加上边左边块，再加上左内边距，再加上什么呢？加上这个外，再加上右内边距，再加上右边块，再加上右外边距，这几个值加一块一共是七个值啊，一共70左外边距。

左边块左内边距宽度加上右那边距，右边块加上。右外边距对吧，就是说白了就是把我们这图里边这是什么呀，这个值这个值这个值这个值这个值这个值这个值这个值都给它加上啊，都加上七个值全都加一块，它们的总和应该什么呢？应该是等于其等于其负元素内容区的宽度，内容的一个宽度，把它调大一点啊，等于其负元素内容区的宽度。这个等式，注意它是必须满足啊，必须满足，拿我们这个实例举例子，现在inner的副元素是不是aler啊，所以inner的margin left加上border left加上pading left加上它的宽度加上它的pading right加上它的right加的in right。

必须等于它负元素内容区的宽度，它负元素内容区宽度是多少？内容区宽度是不是800啊，所以对于因ner来说，它的这些所有值加到一起必须等于什么？必须等于800，必须的必须等于800，强制你必须必须必须等于800，没有任何商量余地，所以我们来看看现在我们这个等式满不满足啊，现在我们等式满不满足，那我们来看啊，首先我们来看我们的这个inner，从第一个值开始算，Inner的margin left是多少，是多少，有没有marin left，没写marin left的，哎，没写，注意margin left的默认值是零，所以你没写，那就是零完事了。border left的时候，好border left的值是没写，没有边框吧，哎，没有边框，所以也是零啊，也是零，拍平写没写，也没写，也是零宽度，写没写，写了宽度多少宽？

度是200，哎，这个拍定是零，然后宽度是一个200，然后再看右拍定有没有没有也是零，然后再看右边框有没有没有也是零，加上一个零，那右外边句有没有没写没写，同样默认值也是零啊，也是零，那这个是不是就是我们这个inner的一个Y，就是一个，它这七个值加一块是不是应该等于这个值啊，所以这个东西要求你必须等于800，你看我们这个等式是不是非常完美的成立了。

成立了吗？来我们看看，算算零加零，这不用算了，我左边的值是200，右边的值是800，等式成不成立啊？哎，傻子都知道这个等式不成立，懂这意思吧，这个等式不成立，诶老师同学说，老师你不是说必须成立吗？现在他不成立，当场打脸了吧？哎，当场打脸了，那这里边注意了啊，这里面注意了，我们来看一下，现在等式是不成立的，因为这些值我通通都没有，只有一个YY一共才200，而我们负元素的宽度是不是是不是800呀，哎，它是800，所以这个时候不行，哎呀。怎么回事啊，诶注意。以上等式必须满足啊，必须满足，如果。结果，如果计算结果使什么呢？使我们这个等式不成立啊，如果我们这个相加结果，相加结果使我们这个等式不成立，则我们称其为什么呢？哎，称为叫做过度约束啊，你这值对我们这个东西约束太大了，约束太大导致我们这个算式不成立了啊，则称为过度约束，则我们这个等式会自动调整。

等式会自动调整什么意思？我现在要求你的这个值必须等于它，必须等于它，现在你不等，不等怎么办？浏览器会自动调整，怎么调整，你这是200，这是800，差了几百，差了600，所以他会在等式右边左边的一个值，我给它让它加上600是不是就成立了，会调哪个值啊，会调哪个值，那我们先说现在这种情况。现在这种情况是不是其他值都是零，这是一个200啊，它会调谁呢？它会调我们这个零，哎，所以注意啊，我们来说一下，如果。

我们来说一下它这个调整的一个情况，如果所有的值，这七个值啊，这七个值中没有什么呢？没有为凹凸的情况，凹凸是什么？就叫自动没有为凹凸，因为那几个都是零，这是200，剩下这三个是不是也是零啊，没有凹凸，没有凹凸的情况，则我们浏览器会自动调整什么，调整我们这个margin right值，Margin right值以什么呢？以使我们这个等式满足，所以现在来看你这是200啊，差了600，差了怎么办？他会把这600在margin right上给它补上，这补一个600，那这补完一个600，这等式是不是就满足了，哎，就满足了，所以我们看它的效果也是这样的啊，也这。

这你看这儿宽度设置完了，Margin什么boer拍定是不是都没有，但是等是不满足怎么办？所以这段距离一定是600，一定是600，那这是不是就是一个margin right呀，所以它是600了，这等式是不是就就满足了，哎，所以注意你直接我们来怎么看啊怎么看，点开你的开发者工具，你选中它，你看这儿，你在这个页面里，你只要一看这出现一黄的，那这就表示是一个外边距，实际上这儿就设置了一个右外边距，这边辑哪来的，我没有设置它是哪来的，就是浏览器它为了确保这个等式满足它自己设置的，所以一般情况下过度约束就调margin right，所以我为为为什么跟你说这个margin right没用，因为margin right一般都会有我们浏览器去自动设置，往往不用设置，所以比如说我这写了一个margin left margin left我写了。

的一个100个像素marin left是不是变成100啊，所以现在这种情况，我们这个等式就变了，变成什么呢？变成了一个100加零加零加200加零加零加零对吧？但是现在等式满不满足同样不满足，不满足怎么办？不满足它就会自动去调整什么呢？自动去调整这个margin right100200是不是差500啊，它会把margin right变成500像素啊，500像素这个时候你看这边就是一个500，这边就是一个100，你说老师我就不信邪，我就非得指定marin right是一个什么呢？是一个400像素啊，400像素我这一保存刷新行不行，一点用也没有，为什么？因为你写成400，这是不是也是过度约束，不满足条件呀，所以它会自动把它变成500，懂这意思吗？它会自动变，把它变成500，所以这400你根本就设置不上，你说我写500，你写500能生效，但是你写不写是不是都一样啊哎。

不一样，所以为什么说说这值没用，因为这值总是那个被调整的值，为什么要调整，就是为了确保这个等式满足啊，就是为了确保这个等式满足好，这个是我们说的这种情况，然后刚才我们提到一嘴，提到一嘴什么呢？提到了一嘴说。没有凹凸的情况，哎，没有凹凸的情况，那这里边如果有凹凸呢？哎，那注意了，这些值中，我们说这七个值里，七个值中有三个值可以什么呢？设值为呕吐啊，有三个值可以设置O吐哪三个值叫做一个Y。哎，还有什么呢？还有margin left，还有我们这个margin right，这三个值可以设置成凹凸，我们说了设置成凹凸什么效果，如果某个值为凹凸则会什么呢？则会自动调整为凹凸的那个值也。

屎。以使我们这个等式成立啊，自动调整那个为凹那个值，以使等式成立，好那现在我们来看效果，现在呢，我这啊不写这个了，我把这个margin我都给他住了啊都给他了，现在来看效果，现在是二百二百，我没有凹，妈这默认值是零，没有凹，所以它现在是不是自动调整这个RIGHT1是等值满满足，好那现在干嘛呢？我把Y换成凹，我把wise换成凹凸，我让wise是自动设置的，那这个时候它还调不调整这个margin了，不调整了啊，不调整了，所以现在的结果是是什么，现在是这么一个情况，我就写过来啊，应该是一个什么呢？现在是这么一个情况，它是一个零加零加零加上一个凹凸，然后加零加零加零等于一个什么呢？等于一个800，那这个时候注意现在这些值都是零，是不是有一个值是凹凸啊，凹凸的意思就是自动由浏览器自动计算。

对吧，所以为了等式满足，它会把凹凸干嘛呢？它会让凹two直接等于800，因为凹凸等于800是不是等式满足啊，所以等于800就意味着我们的这个in尔的宽度和它的负元素宽度是一样的，所以你看它的效果就是它把负元素给称满了，懂意思吗？就把负元素给称满，就这么一个效果，那好，那接着再看，这个时候我再设置一个margin right margin right，我来一个200个像素，那这个是什么效果？Margin right，你设置一个200，我这个等式变成什么样了，我直接写一个marin right 200，这是不是一个200啊，200我们来看等式前面是零，然后这一个凹凸200，这是不是还差600呀，所以凹凸就等于600，那么结果就是右弯边距是200，我们的宽度是600，所以一刷新这是不是就是200，这是不是就600啊，是这么一个效果，懂那意思吧，凹two的那个值会自动调整，如果你再来一个，我再来一什么呢？我再来一个margin life的来一个200。

这个in的来一个200，那这个时候它的效果就变成这样了，两百两百两百加零加零加凹凸，然后加零加零加200，这时候这200这是两百八百，这是不是差了400啊，差了400啊，那么凹凸就是400，所以只要谁是凹凸他就会去调整谁，谁是凹凸就调整谁，我们意什么诶，它会自动的去调整那个凹凸那个值，以使这个等式满足啊，以等以使等式满足，其实我都不用写凹凸，我直接把这凹凸给它住了，你看效果是一样的。效果是一模一样，有变化吗？没有变化，为什么？因为Y的值默认就是凹凸。

所以注意啊，Y的值默认就是凹凸，所以你不写它就是凹凸，所以我们说了，我们这个子元素，我们块元素默认的宽度是它负元素的100%，这100%其实它的值并不是百分百的值，是凹凸，也就是自动设置，我们看文档。直接搜一下with外，找到我们的CS3的一点开外，在这直接往下找它的默认值啊，默认值那有一个表，在这引一首Y叫做什么叫做凹two啊，叫做凹two，再看谁呢？我们这个margin margin left margin left默认值我们来看是多少，默认值是零啊，Left margin margin left margin right，这margin值默认值都是零，所以这个时候就是谁是凹two就就就调谁啊，谁是凹two就调谁，那好，那再来看了，那我如果margin是凹凸呢？如果我marin left是凹呢？那就调整。

2LEFT好看看我把外啊改成一个200改回。200PX现在是这样的，那我把这个margin呢？我把这个margin啊给它改成凹啊，我把这个margin left改成凹，那这时候调谁，这时候自动调marin left，所以现在这个等式变成什么了，我们来写一个啊。复制一下，所以你这个其实你自己算一下能算明白，现在谁是凹凸，现在life的是凹凸，中间是200，中间是200，然后这右边也是200 200加200是400，那凹最终就变成400，所以marin left的是不是就是就是400啊，哎，就是400是这么一个效果啊，所以你要你把right设置成凹，那就调right当是right，你没必要设置凹，因为你别的不设置凹，那本来就是调什么呀，本来就是调调啊，本来就是调RA，就这么一个效果，诶那还有什么情况。

还有什么情况，哎，我能不能把两个值都设置成凹凸，哎，比如说我把。Life的还有宽度都设置成凹凸行不行，哎，你看效果是不是一样的，哎效果是一样的，所以这个时候我们来说一下，如果。将一个这个宽度和一个外边距置，为什么呢？设置为我们这个凹凸什么呢？我们这个。宽度为什么呢？哎，会调整到我们这个最大，哎宽度能做大就做大，然后置为什么呢？设置为凹凸的那个外边距。哎，个边距会什么呢？会自动为自动为零啊，自动为零，所以这个时候你看着啊，你看着我给这个宽度设置一个凹凸啊，设置一个凹凸，那你现在看宽度是凹凸，左边距是不是也凹凸啊，哎，那同样我right是100。

它就宽100，我right是一个，这个是一个50，那它就宽50，你看右边距怎么样，左外边距永远为零啊，左外边距永远为零，所以你就记住了这么一这么一个特点啊，这么一个特点改回来啊改回来，所以啊，如果如果你将一侧的宽，一个宽度和一个外边距设置为凹凸，则宽度会调整为最大啊调整为最大，那如果什么呢。如果将我们这个三个值都设置为凹凸啊，都设置凹凸则什么呢？哎，外边距都是什么呢？都是零宽度什么呢？宽度最大，宽度最大，宽度能多大就多大，哎就跟其实你就跟没写一样啊，跟没设置边你一样啊，所以你只要是两侧你说我这我这个。

叫什么呀？Left right也是凹。然后呢，我这个外也是凹凸，那就是宽度就最大了啊，就最大了这么一个效果好，这个是我们说的一个这么一个特点，也就是说谁设成凹凸就调整谁啊那这个时候我们说这种情况还有什么情况呢？其实你自己试试就。感觉上会觉得东西比较多，但是实际上它有规律啊，有规律如果什么呢？如果将两个外边距设置为凹凸，而宽度什么呢？宽度固定值啊，宽度固定值，宽度固定值则什么呢？则会将我们这个外边距设置为什么呢？设置为相同的纸，相同的纸什么意思？现在比如说我现在宽度是不是200啊，哎，宽度是200，然后呢，我把right也设置成凹凸，也就是什么意思，现在它是一个什么情况，我直接复制一下。

是是一什么情况，左边是凹凸，右边也是凹凸，中间是什么？中间是200，但是我们结果是不是应该是800啊，差多少，差了600，那这600怎么分，因为两个凹凸嘛，怎么分，哎很简单，它300，他300，所以在这凹凸就等于300，所以你看到的效果就是左边也是300，右边也是300，那我们这个元素是不是就在这个负元素当中居中了，哎在负元素当中居中了啊所以如果将两个边距设置为什么呢？设置要素宽度值固定，则会将外边距设置为相同的值，所以什么呢？所以我们经常诶利用这个特点哎来使一个元素在其，哎在其负元素中。

水平居中怎么样的水平居中非常简单，首先你要给它指定一个宽度，我们直接来一个视力，哎，直接来一个施力啊视力哎就是一个你要有一个YY是一个某某某PX啊有一个宽度啊，有一个宽度，然后呢，你再给它设置一个marin，哎，Marin Mar Mar j margin，我们来一个这什么呢？哎，来一个零，来一个凹凸，诶这是我们常用的代码，让它居中，给它指定一个宽度啊，指定一个宽度，一定注意要指定宽度，因为你不指定宽度，宽度默认就是凹凸，那这样的效果就是三个值都是凹凸，我们说三个值都是凹凸，那效果就是变成了全屏了，就是百分百了，对吧？所以一定要给我们的Y指定一个像素，只是一个宽度，然后设置一个marin，零凹凸，零凹凸什么意思？零表示上下的边距是零，凹凸表示什么呢？左右外边距式凹凸，这样写的一个效果就是我们元素在负元素当中水平。

好居中啊文居中，好，那这个是我们整个说的这么一个东西，东西会稍微有点多，你可能也会感觉有点乱，我们再稍微的捋一下啊，稍微捋一下，首先我们的子元素是在负元素的内容区中存在的啊，它是在负元素的内容区中存在的，当我们子元素在负元素的内容区存在的时候，它的大小必须满足什么呢？必须满足一个等式，什么等式就是这个等式，子元素的左外边距加上左边块，加上左内边距加上宽度，加上右内边距加上右边块加上右恶边距，它们的值应该等于的是它负元素内容区的宽度，这个等式是必须满足的，在我们的这个，在我们的这个CSS里必须满足等式没有那么多，但是这个是一个比较重要的，这个等式必须满足啊，这个等式必须满足，但是。

但像我的这种情况，他不满足，他不满足怎么办？不满足那就叫做过度约束，过度约束像这种情况，它里边没有一个有凹凸的，都是值，都是指定值，那这个时候它会调整什么呢？调整右外边距啊，调整右外边距，为什么调整右外边距？因为我们的书写习惯是从左往右，右是不是在后边啊，哎，所以它默认就调整最后一个啊，默认调整最后一个，如果你是从右往左写的，那就调整左问问距，但是你可能遇不到是吧，所以这种情况它就调整右问问距，调整完右问问距，然后使我们这个等式满足啊，使我们这个等式满足，所以这个等式必须满足，然后在这个等式当中有三个值，可以是凹凸，分别是左边距，宽度，还有右问距，它们的特点是，三个值当中，如果有一个值是凹凸，那么当等式不满足的时候，OK，就调整。

那个值如果有一个值不满足，就调整那个值，如果有两个值是凹凸，那看情况，两个值如果有一个是宽度，那么OK，那个外边距那就是零啊，就是零，如果三个值都是凹凸，那么OK，那两个外边距就是零，宽度最大，非常简单，如果是两个外边距设置成凹凸，那它会把两个外边距设置为相等的值，以使我们这个元素在它的负元素当中居中，是这么一个意思啊，设置一个相等的值，两个元距都是相等的，但是这里边可能有同学就哎有问题了，什么问题呢？哎，老师你说这个等式必须满足，那假如说我是一个什么情况呢？我是这种情况啊，我们直接在这演示什么情况呢？在这儿啊，我直接检查，我就不在那里边写了，我选中这个元素，现在我这个元素的margin是凹凸，Margin left也是凹凸啊，我不写你看啊，在我们这儿啊，你直接选中这个元素，你直接。

选中这个元素，你想看谁你就点谁，选中它以后，你能看到它当前的样式，你把这勾勾上，这样式就生效，把这勾取消，这样式就不生效，你可以在这儿直接去控制来调试来看。它的这个效果非常简单，那这里我们要说一个什么问题呢？现在我的宽度是200像素素，复元素的内容区是多少呢？复元素的内容区是800对吧？800好，我做这么一件事，我现在啊，Margin right left都没写，没写是不是就是零啊，没写是零，我把外呢，我设置成一个1000像素，1000像素，1000像素意味着什么？1000像素意味着是不是我的这个子元素已经超出了负元素大小，诶那这个时候你那些这等式变成什么了？就变成零，一堆零是吧？加上一个1000，然后再加上一堆零，应该等于800，这时候等式满，满足不满足，你怎么让他满足你这是1000，这是800，能满足，注意能不能满足，能满足这个时候他会把margin right设置成负200，负两百一设置完了，一减是不是正好等于800啊？所以哪是负200 margin left就是这段距离。

慢right啊，负200，所以这个元素是不是就从这个负元素里出去了，哎，所以注意啊，Margin可以是负值，也就是说无论怎么样啊，无论怎么样，它都会总会让我们这个等式是满足的啊，总会让我们这个等是满足。好这是我们水平方向的一个布局，呃，东西稍微的有点多，有点可能第一次看会有点乱，我希望你自己待会儿试一下，然后拿这个纸笔啊写一下，这个东西呢，你在电脑上写可能没那么清晰，拿纸笔画一下，稍微的理一理，看一下他们之间的一个关系啊好，关于这个水平方向的布局，我们先说这么多，停一下。