范仁义css3课程---18、overflow

一、总结

一句话总结：

子元素默认是存在于父元素的内容区中，如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，我们通过overflow可以设置父元素如何处理溢出内容

1、overflow属性有哪些属性值？

-visible，默认值，不会对溢出内容做处理，溢出的内容会在父元素以外的位置显示

-hidden，溢出的内容，会被修剪，不会显示

-scroll，会为父元素添加滚动条，通过拖动滚动条来查看完整内容

-auto，会根据需求自动添加滚动条

二、overflow

博客对应课程的视频位置：18、overflow
https://www.fanrenyi.com/video/10/53

子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容

父元素默认是将溢出内容，在父元素外边显示，通过overflow可以设置父元素如何处理溢出内容：
可选值：
-visible，默认值，不会对溢出内容做处理，溢出的内容会在父元素以外的位置显示
-hidden，溢出的内容，会被修剪，不会显示
-scroll，会为父元素添加滚动条，通过拖动滚动条来查看完整内容
　　该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
-auto，会根据需求自动添加滚动条了
　　需要水平就添加水平
　　需要垂直就添加垂直
　　都不需要就都不加

三、课程代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>18、overflow</title>
 6     <style>
 7         .box1{
 8             width: 200px;
 9             height: 200px;
10             background-color: #ff4f81;
11             overflow: auto;
12         }
13         .box2{
14             width: 100px;
15             height: 500px;
16             background-color: orange;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="box1">
22 <!--        <div class="box2"></div>-->
23         子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小
24         如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容
25 
26 
27     </div>
28 </body>
29 </html>