<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #008000;
/*
子元素默认是存在于父元素的内容区中
理论上讲子元素的最大可以等于父元素内容区大小
如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示
超出父元素的内容,我们称为溢出的内容
父元素默认将溢出内容,在父元素外边显示
通过overflow可以设置父元素如何处理溢出
可选值:
visible: 默认值 不会对溢出内容处理,会被显示
hidden: 溢出的内容,会被修剪,不会显示
scroll: 会为父元素添加滚动条,通过滚动条来查看子元素内容
该属性不论内容是佛溢出,都会添加水平和垂直方向的滚动条
auto: 会根据需求自动添加滚动条
需要水平就添加水平
需要垂直就添加垂直
不需要的时候就不添加
*/
overflow: auto;
}
.box2{
width: 100px;
height: 500px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>