尚硅谷前端基础 (50)

好，那么刚才呢，我们说了一个这个盒子的一个水平方向的布局，那接下来呢，我们来开始说我们这个垂直方向布局，呃，垂直方向布局呢，其实本身并没有什么好说的啊，我们来写一下零七，我们这个垂直方向的一个布局，垂直方向的一个布呢，它为什么没什么好说的，因为首先本身的话，我们垂直方向的布局本身是比较的简单的啊，比较简单的，因为我们一般情况下，我们做一个网页，一个网页它的宽度往往是固定的啊，宽度往往是固定的，也就是说我的宽度一般不会出现水平滚动条，就是说你想一下你上网页你有没有横横向拖过，很少啊，很少，除非网页里边一小块可能有横向拖，没有说整个网页就横向拖的，整个网页横向拖肯定会它设计是有问题的，所以网页一般我们横向是固定。

的，那横向是固定的话，那就会产生一个问题，因为我们屏幕大小不一样，所以水平布局就稍微的麻烦一点，但是纵向的话，由于我们大小没有限制，为什么说纵向大小没有限制呢？哎，因为你纵向你说我这东西长了，我这内容多了，内容多了大不了我就出现纵滚动条就行了，我直接往下滚就行了，所以垂直布局往往是比较的比较简单的，没有那么没有那么麻烦啊，没有那么麻烦，那这里面我们还是创建一个div，我们直接点一个这个al o u t，然后下边我们来一个点一个这个inner啊inner我们创建这两个div，然后在这儿我们来写一个样式啊，Style标签，Style标签呢，这里边啊，我们来给aler设置一个样式，第二一个aler aler，我们这来一个这个我不给它设置宽高了，我直接给它设置一个background color背景颜色，我们叫一个号一个B，当然你这样设置完了以后，你在你的页面里，你是你是看不见它。

看了，因为它里边没东西这个in，那我们也没设置大小，对吧，但我现在我给in呢，设置一个大小，哎哎呀in那的话我们直接啊，我们看垂直方向的水平，我们就不看了啊，我们看垂直方向的，我们这来一个headde headde我来一个100个像素，这个时候你就发现我们就看到这al是不是就就就有了，哎就有了，我再来一个200像素，哎，这al就变成了一个什么呀，200，所以这里边我们要说的是我们默认情况下，哎，默认情况下我们这个元素啊，我们副元素的一个高度，它会什么呢？诶，它被我们这个内容撑开啊，默认情况下副元素高度被我们这个内容撑开，我来给它设置一个宽度啊，给这个inner设置一个宽度，来一个100，然后呢，Background color background color，我们来一个yellow，我要看一下它在哪，诶这个是不是我们这个inner啊，哎，你看inner多高，它的负元素就多高啊，Inner多高负元素就多高，我如果给。

In，那设置一个margin bottom，我们来个100像素，你看诶，这里边这个marin bottom在这儿我们体现不出来，对吧？体现不出来，那为什么体验不出来，因为这个margin bottom实际上现在跑到了它的外边去了啊，跑到外边去了，如果下边有元素我们能看出来了，那这样我们给它设置一个这个设置一个下边我再整一个inner啊，我直接给它再复制一个inner，这一保存现在两个inner了，然后在这儿我们来设置一个margin bottom，我们来一个这个100个像素啊，这一保存你来看这段距离是不是就能瞅出来，哎，因为margin在那它看不见，就是你在最后的话，它这体现不出来，只能在中间这我们能体现出来，也就是说当你设置margin以后，我们来看一下现在我的这个高度是多少，现在我这高度多少，现在是不是就是它的高度是一个这个是一个200，这儿也是一个200，再加上这儿有一个这个100的一个margin bottom，现在整个高度是不是变成500了，哎，也就是说要说明一个什么问题，我们的这个元素。

它的默认情况下，它是被我们这个负元素，你要不设置高度，它是被子元素撑开的，那你设置高度，比如说我们这儿来一个这个height，来一个这个600 600，那就是你设置高度是多少，它就是多少，就没有什么别的事儿了啊，就是你设置多少是多少，你这东西再矮啊，我这东西调成100。调成100，它负元素还是这么高，所以这个布局就比较的简单了，它不像是我们那个水平方向，它有那么一个等式，要求那个等式必须满足，在垂直方向没有这个等式，它不需要满足啊，不需要去刻意去满足这个等式，所以你要知道垂直方向的布局没有什么特殊的，比较简单啊，比较简单，那这里我们再演示一个，一个这个小的问题啊，一个小的问题，那在这里呢，我们把这个先给它注掉，我们这来写一个东西啊，写一个东西啊，所以注意啊，垂直方向布局没有什么特殊的啊，没有什么特殊的，你就知道负元素的高度不写，就被子元素被内容撑开写上，那就是该是多少就是多少就完事了啊，然后在这啊，我们来说一下，我这给它来一个这个class class呢，这我直接来一个BOX1，然后呢，这我们来一个点一个这个BOX2啊两个元素在这里面，我们给BOX1设置一个大小，我们直接点一个BOX1。

点一个BOX1，我们来一个是一个200 hi的是一个500像素，然后background color background color，哎，Background color，我们来一个井号，一个BFA，设置一个背景颜色，当然有点高啊，我们是改成200，还得改成二啊，改成200，这是我们BOXS1是负元素，然后在这我再写一个点一个BOX2 box2呢，我让他来一个100像素，哎，然后呢，He也是一个100，那我们都知道我们这个BOX2是子元素，它是在我们这个它的负元素的，这个叫做诶内容区当中的，所以现在它等于是在它这个左上角对吧，正好是它的一个1/4啊，这分数也错了，正好是它这个左上角是他1/4，那我现在如果把高度调整成200，那这时候发现什么情况了，现在我子元素BOX2的高度和它负元素的高度是不是就就一样了，哎，就一样了，好，我现在把高度调成400的话。

那你想一下，我这如果换成了四，那这时候会出现什么现象，我换成了四以后，那么我子元素的高度是不是就是超过了负元素内容区的高度了，哎，超过负元素内容区的高度了，这个时候它会出现什么情况？诶我们来看一下效果，我们直接改成一个四，哎，这时候你发现什么了？我的子元素已经超过了负元素当中内容区的高度，那这个时候是不是子元素就从我们负元素里出来了，哎，就像什么呀，我有一个十厘米的盒子，你要往这个盒子里装一个20厘米的东西，你就硬装，你就硬装，那结果就是这个东西把这个盒子撑破，然后东西是不是从那个盒子里就出来了，所以这块也是一样，现在这是子元素，这是负元素，子元素的大小等于超过了负元素，所以出现一种情况就是子元素从负元素当中溢出了啊，所以这个东西我们叫做溢出这个。

那我们来说一下啊，我们说了子元素是在我们这个负元素的这个内容区中排列的啊，在内容区中排列的如果什么呢？如果子元素的大小超过了什么呢？超过了负元素，则我们这个子元素会什么呢？会从我们这个负元素中溢出啊溢出什么叫溢出？诶溢出就是我们这个水杯子是吧？往那个水杯子里下去，去倒水啊，倒水我都已经倒满了，还接着倒，那多出的水是不是从这个杯子里就流出来了？哎，这个就叫做一个溢出啊，如果子元素超过了负元素，则子元素会从负元素溢出，就像水从杯子里溢出一样，水从杯子里溢出就没了，那我们这个元素子元素从负元素里溢出来，这样好不好呢？实际上大部分情况下，我们是不希望这种情况出现的，它可能不一定会影响布局，但是这个东西你没有这种设计，它很难看啊，所以我们也不需要去这么设。

这么一个东西，所以这个东西我们必须要处理啊，我们必须要处理，那怎么处理呢？啊，怎么处理呢？那这里边我们来说一个csi的样式，我们使用什么呢？OV亚overflow这个属性来设置我们这个元素的一个什么呀？诶溢出来设我们这个负元素，如何处理溢出的一个子元素，所以这个属性是给谁的，是负元素的属性，所以你要在哪设置，在我们这个BOX1上设置overflo有多个值，我们先说第一个值，第一个值我们叫做一个viible，哎，Viible这是它的一个默认值啊，默认值我们来看效果有没有变化，哎，没有变化，我们来说一下啊，它这几个可选值，可选值第一个值我们叫做一个whio，它叫做默认值，说白了，这个东西你不写它就是这个值，也就是说，哎，我们这个子。

元素会什么呢？会从我们这个负元素中溢出，在负元素外部的这个位置显示，也就是说就从复元素溢出了，你像这就直接显示了，就不管你了啊不管你了，叫做一个visible啊做一个visible，那接下来下边第二一个你说我不想溢出怎么办呢？我们还有第二个值叫做一个hidden啊hidden你看效果还有没有了，就没了hidden什么效果hid hidden叫什么呢？叫隐藏啊叫隐藏，所以叫什么呢？溢出的内容将会被什么呢？将会被我们这个裁剪啊裁剪不会什么呢？不会显示什么意思，这个玩意儿就叫一剪酶，什么叫一剪酶呢？诶你这子元素是不是超出负元素了，怎么办呢？超出负元素的部分，我这咔嚓一剪的给你剪了，你就直接就看不见了啊，直接就看不见了，所以这个是我们说的一个黑，它是处理我们这个。

溢出内容呢，就是不让你溢出了，我直接给你显示没了，但是有的时候这个方式它也也不太好啊，也不太好，比较典型的像什么呢？哎，比如说我这里边不是放的这个这这玩意儿，我放的是什么呢？我放的是字CTRLC，然后呢，我把这字啊，我就粘过来，那现在是什么呢？现在不是box字溢出了，现在是我们的这个文字溢出，你看我用一个黑的，本来它是什么效果，本来这个字是不是从这溢出来了，我用一个黑的，我就把这字给干嘛了，直接给它裁了，也就是说下边这部分溢出的剩下的内容我们还能不能显示了，就看不见了啊，就看不见了，所以这个时候它有的时候有的时候需要用它，但是这个时候有的时候用它呢，它又不太友好，所以我们还有别的值，还有一个值叫什么呢？叫s c score叫什么呢？叫滚啊叫滚什么意思，磁扣看效果，这是不是出现了一个滚动条啊，哎，滚动条我们直接就可以通过拖动这个滚。

动条来完整的查看这个内容了，所以死扣就是什么呢？诶就是生成我们这个两个滚动条，诶通过什么呢？哎，通过我们这个滚动条，哎来查看我们这个完整的一个内容，哎完整的一个内容啊，就是滚动条啊，SC就是生成滚动条，但是SC呢有一个问题，SC呢，它是生成的是什么？垂直还有水平双方向滚动滚动条啊垂直还有水平双方向滚动条，也就是说它这一出来就两个滚动条，但是你看看我们这儿水平方向滚动条我用不用，哎不用，我这实际上是不是只用的是垂直方向的，哎只用垂直方向的，我不需要水平方向的，所以在这块这个水平方向滚动条，我这是不是没有什么，没有什么意义啊，哎没有什么意义，所以我们还有一个值叫做A。

叫做一个凹凸，我直接把这换成凹凸看效果，你看水平方向滚条就没了，凹凸是干嘛呢？是根据我们这个需要生成滚动条啊，根据需要生成滚动条，你需要水平方向的就生成水平方向的，需要垂直方向的就生成垂直方向的，都不需要，那就都不生成，所以凹凸是一个更加灵活的方式，它不会生成一些这种多余的滚动条啊，这个叫做一个overfflow啊，Overflow它是用来处理我们这个溢出的内容的啊，用来处理我们这个溢出内容的，除了overflow的话，我们还有两个值，一个叫做overflow X，哎，Overflow X值都是一样的啊，值都是一样的，还有一个我们叫做overflow overflow待会你可以自己试试，我我这课上我就不再去说它了啊overflow还有一个overflow，这两个。

人家提一嘴o flow X是单独处理水平方向的X嘛，横轴是吧，单独处理水平方向的o flow y单独处理垂直方向的，这个就是两个方向都处理，这个是把我们这个溢出分成了两种，一个是水平的，一个是垂直的，可以自己去试一下啊，可以自己试一下，好这个是我们说垂直方向布局，然后我们又提到一个溢出这个东西，那这个垂直方向布局，总之就没有什么太大的问题啊，没有什么太大，但是待会儿我们要说一个注意事项，但是整体布局来说，它没有水平方向那么多的问题啊，就是写完了就那样，它没有什么公式，没有什么等式需要你去满足，好这个是我们说的一个，哎，我们的一个垂直方向布局，我们还是先停一下。