盒子的垂直布局:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子的垂直布局</title>
<style>
.outer{
background-color: #BBFFAA;
/*
默认情况下父元素的高度会被内容撑开
*/
}
.inner{
width: 100px;
height:200px;
background-color: yellow;
margin-bottom: 100px;
}
.box1{
width: 200px;
height: 200px;
background-color: #BBFFAA;
/*
子元素是在父元素的内容区中排列的,
如果子元素的大小超过了父元素,则子元素会从父元素中溢出
使用 overflow属性来设置父元素如何处置溢出的子元素
可选值:
visible, 默认值, 子元素会从父元素中溢出
hidden 隐藏,溢出的内容会将内容裁剪,不会显示(一剪梅)
scroll 滚动,生成两个滚动条, 来通过滚动条来查看完整的内容
auto 根据需要生成滚动条
overflow-x:;
overflow-y:;
*/
overflow: auto;
}
.box2{
width: 100px;
height: 300px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
<br /><br />
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>