盒模型之overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>voerflow</title>
<!-- 显示区域只能由父级大小决定 -->
<style type="text/css">
/*子级区域大于父级*/
.sup {
width: 100px;
height: 100px;
/*默认值*/
/*border: 3px none black;*/
/*清除边框*/
/*border: 0;*/
/*border: none;*/
/*最简单的设置*/
border: solid;
}
.sub {
width: 200px;
height: 200px;
background-color: red
}
/*对父级进行overflow设置*/
.sup {
/*以滚动的方式允许子级所有内容显示*/
overflow: auto;
/*overflow: scroll;*/
/*只运行子级在父级所在区域的部分显示,超出的部分影藏*/
/*overflow: hidden;*/
}
</style>
</head>
<body>
<!-- display: block大环境下 -->
<!-- <div class="sup">
<div class="sub"></div>
</div> -->
<div class="sup">
呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿
</div>
</body>
</html>
