范仁义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>