56.尚硅谷_HTML&CSS基础_overflow.avi原创

好，刚才说了一个display，接下来我们再来说一个这个属性淋巴叫做一个overflow啊overflow说这个overflow之前呢，我们先说这么一个需求啊，来写这么一个div div我们来一个class，咱们叫一个BOX1，然后这里边div class点一个BOX2，一共是两个盒子，那这里边我们来写一个style，设置一个样式，来一个什么呢？来一个这个点一个BOX1，这来一个这个WISE100个像素，来一个这个hat也来一个100个像素，然后background color，我们来一个井号，一个BFA，保存一下CTRL运行，诶是不是出来这么一个小加号，小玩意啊，有点太小了，咱们来一个这个200吧，保存这一刷新走，你是不是这么大个啊，对，这么大个，那这种东西呢，我们说嗯，写完了是写完了，那我们说了，这是不是有一个子元素啊，子元素还没有没有，还没有设置，那我们给子元素设置一个box。

呃，二这来一什么呢？来一个white，一个100个像素，Hat一个什么呀，100个像素，然后来个什么呢？Back color，来一个这个red红色的，那我们会发现一个大的绿色里边应该放了一个什么呀，红色的，那么说了，我们这个子元素默认是在什么呀？是在负元素的这个内容区里边吧，诶是默认在这个内容区里边的，也就是说内容区多大，我们这个子元素是不是就就能最大的能能设置多大呀？诶那也就是说现在我们内容区多大呀，内容区是200乘以200，那我子元素也是200乘以200，有没有问题，没有问题，我这个东西和我这个箱子一边大是没有问题啊，哎，可以装下，我一保存，咱们一刷新走，你是不是一边大呀？诶但是有一种情况，什么情况呀，我们先让它窄一点吧，来一个一百一百二百的保存，现在是不是我们那个东西比我们那个箱子要小啊，好，我来干嘛呢？修改一它的高度，高度我改成什么呢？改成500，高度改成500，你注意了我不元素的内容去。

的总高度是多少200，可是我子元素的高度是多少500，也就是说我子元素的高度已经超过了什么呀，负元素的高度，诶，那这一块会什么情况？有什么情况，哎，那我们想想，我有一个大，我有我这个什么呀，他们举个例子是吧，我一个死人死人多少呢？死人身高一米七，拿拿来的举例子是吧，不太好是吧，那咱们说吧，是吧，死人身高一米七，我以为棺材呢，长度一米五，那怎么办呀，我这死尸扔进去什么情况呀，腿是不是蹬出来了呀？哎，腿蹬出来了，那同理，我们这个子元素比我们这个负元素是不是要长了呀，那同理，它是不是也也出来一块啊，哎，这这看着有点深腾了是吧，就哎哎，反正就这么一个意思啊，这么一个意思，我们来说它是不是多，是不是多余的部分就超出负元素了，哎，超出负元素了啊，所以这里边我们来说一下这个问题在哪说呢？在这儿来说，我们说子元素默认是存在于我们这什么呀，哎，负元素的这个内容区中的。

哎，内容驱中，哎我们说叫什么呢？诶理论上讲什么呢？我们这个子元素的这个最大，诶哎组元素的大小可以是最大，可以什么呢？可以等于我们什么呀？哎内容区的什么呀？哎，大小诶可以等于我们这个负元素内容区的大小。但是我们说有一个问题叫什么呀，如果什么呢？如果我们这个子元素的这个大小干嘛呢？超过了这个负元素的什么呀？诶内容区诶超过了负元素内容区则什么呢？则诶超过的超过的这个诶大小会什么呢？呃会在我们这个负元素以外的什么呀位置显示啊会在负元素以外的位置显示，所以你看我现在负元素的高度是200，而子元素高度是什么呀？500是不是多出来300啊，多出来300跑哪去了？跑到我们这个负元素什么呀，外边了啊外边了，那我们说超出负元素的内容呢，我们称为叫做什么呀？哎溢出的什么呀，诶出的这个内容啊，我们称为叫做一个溢出的内容，诶诶移除去了是吧？不叫移出叫什么呀？溢出啊溢出，什么叫溢。

哇，水满了，是不是从那个盆里出来了呀？诶这叫一个溢出，诶那好了，那溢出的内容，那我们怎么办呀？那我们先说这样好不好啊，你让在外边漏着是不是不太好啊，咱们最好是不是还给它装里边去，诶也就说我们需要对这东西进行一个处理，那我们说了负元素默认是干嘛去，哎负元素副元素默认是什么呢？将我们这个溢出内容，哎在什么呀？哎在我们这个副元素外边干嘛呢？外边显示啊，外边显示但是什么呢？有的时候我们是不是不需要这样，哎有的时候相干嘛呀，如果它溢出了，你干脆干嘛呀，就不要了，这一段我给他干嘛呀，切掉，哎我只要这个正好这部分多余这部分我就我就不要了，对吧，要有的时候镶什么呀。

我希望这你给我出来一什么呀。滚动条，诶我通过滚动条是不是来查看这个内容啊，诶那这个东西我要怎么去设置呢？诶那就说到了我们这个属性这个样式叫什么呀？叫做overflow啊overflow，那我们说什么呢？哎，通过我们这个overflow overflow什么意思呀？就是溢出的意思啊，就是溢出的意思，通过overflow可以来干嘛呢？可以设置我们这个副元素如何干嘛呢？如何处理我们这个溢出的什么呀？哎，内容啊，如何处理这个溢出的内容，来那我们来说一下它的这个可选值，还是来看一下文档，其实值不多啊，直接往回看，找到哪呢？就跟这儿呢，这一值叫什么呀？叫over flow叫什么呀？规定当内容溢出元素框时发生的什么呀事情，说白了就是来规定我们复元素如何处理溢出内容，来点开这个样式看它的默认值教什么呀？Visible vis什么意思呀，显示啊可见的说白了就什么呀，你溢出了我就让你玩呀，诶在外边显示啊VI可见的其实就是基本等于什么呀，基本等于没处理是吧呀哎，出就出去了啊，这叫做一个viible，然后它的继承性是一个什么呀？No啊，No不会继承，然后我们来说一下这几个值，第一个值我们叫做一个visible with叫VI visible叫什么呀？哎。

默认值，呃，叫什么呀？呃，元素会在叫什么呀？不会对我们这个溢出内容做任何处理，哎，元素什么呢？元素会在我们这个副元素以外的什么呀？哎，位置显示说白了就是什么也没干啊，什么也没干，所以我这来一个overflow，来一个这个visiblew，我一保存，咱们来看刷新没有任何变化，诶它的默认值就是它啊，默认值就是它，然后往下走，有一个叫什么呀，Hidden，诶hidden叫什么呀？是不是跟刚才我们那个VI visibility hidden是一样的呀？诶hidden内容会被修剪，并且其余内容是不可不可见的，什么意思呀？这叫什么呀，这叫一剪梅是吧？一剪梅什么叫一剪梅啊，叫做溢出的内容，哎，不会什么呀，哎，会被修剪。

哎，不会什么呀，不会显示哎就特别的残忍了，来，我粘过来保存，那什么效果呀，这是不是多出一块来呀，多出一块干嘛了？咔咔你就看不见了啊，一刷新走你是不是就没了呀？诶多出一块就隐藏掉了啊就一个overflow黑得一出内容会被隐藏，然后后再往下，这个比较残忍，还有一个叫什么呢？叫做死客，死客什么意思呀？诶滚是吧？哎死客是一个滚叫什么呀？内容会被修剪，但是浏览器会什么呀？会显示滚动条，以便查看其余的什么呀内容来此刻我写上，咱们先看效果，然后再写，诶overlow扣，我们来这一刷新走你诶发现内容是不是没有出来啊，但是我发现我这副元素多了一什么，是不是多了一个滚动条啊？诶当我这拖滚动条，你看是不是可以去滚动了呀，哎，滚动以查看这个完整的这个内容，这个呢，你可能感觉不明显啊，感觉不明显。

这里边啊，咱们最简单的方式干嘛呢？诶看字啊看字把我们这个鲁迅交过来，来，咱们把这报个字啊，先给它去掉保存，咱们一刷新走你诶你看我这文字是不是也比我的元素大呀，诶它出来一什么呀，滚动条，然后通过拖动滚动条是不是可以去查看呀？哎查看啊其实问用的是文字也会比较多一点啊对文字用这个东西比较多一点，叫做overflow SK，它会什么呢？诶诶会什么呢？会哎为我们这个复元素添加什么呀，滚动条，诶是通过什么呢？通过拖动滚动条还有什么呢？诶来查看我们这个什么呀？哎，完整内容啊，查看我们这个完整内容，诶那我们说叫一个死扣，但是注意了，这死扣有什么特点，它其实挺不好的，哪不好呢，你看我横着溢没溢出啊，没溢出我是不是只是垂直。

太依托了呀，但是你发现什么了，水平方向滚动条是不是也出来了呀？哎，也出来了，甚至最可气的什么呢？我去了，有没有内容？内容都没有，会不会溢出，不会吧，我这一刷新干嘛了，滚动条是不是还在呀，诶还在，所以这个东西呢，它很不智能，怎么不智能呢，我们说诶该属性。

哎，该属性不论什么呀，诶内容是否溢出，都会什么呀，都会添加什么呀，诶水平和这个诶垂直诶双哎方向的什么呀，哎滚动条也就是说它不管你要不要都给你干嘛了，都给你加上了啊都给你加上了啊还有最后一个值也是一个最方便一个值叫做什么呢？叫做一个凹凸啊这一个凹凸凹凸什么意思呀？哎自动啊自动我们来看效果的一个凹凸叫什么呢？会哎根据我们这个需求叫什么呀，自动添加什么呀，滚动条什么叫自动添加滚条，如果什么呀，需要水平就什么呀，就添加水平，需要什么呢？需要这个垂直，这就是废话了是吧？诶需要垂直，哎就添加垂直，哎不需要呢，哎都不需要，哎就什么呀，就都。

不加，那换句话说都需要是不是就都加呀，哎，都需要都加，这是一个比较智能一个方式，来我们来看这个凹凸，我先写上，写上凹拓，我把这个鲁迅先生这个字先给它去掉，去掉了以后需不需要补丁条，不需要，我这一刷新走你是不是没有啊，哎，没有，然后我这粘过来保存，咱们再看一刷新走，你只有什么呀，只有垂直方向，水平方向干嘛呀，没有，因为水平方向是是不需要啊，哎，不需要呀，所以比较智能，需要就给你加上，不需要干嘛呀，哎就不写啊，不需要就不写好，这也是我们说overflow的这么一个用法，它在干嘛呢？可以用来设置我们这个复元素如何处理溢出的内容可选值，这么几个VI是我们这个默认值，就什么呀，溢出了以后就在外边显示，我不做任何处理啊，然后he呢，溢出内容会被什么呀，修剪就是什么呀，不显示啊，SC什么呢，会为复元素默认添加水平和垂直双方向滚动条，然后通过滚动条是不是来调查看这个完整内容啊，还有最后一个叫什么呀，凹凸诶叫什么呀，根据需求添加滚动条需要呢。

哪个叫加载个不需要，我就一个刀不加啊，一共是这四个值啊overflow好，这里边我们来停一下啊overflow。