<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>盒子模型的垂直布局</title>
<style>
.outer {
background-color: #bfa;
height: 600px;
/*
默认情况下父元素的高度被内容撑开
*/
}
.inner {
width: 100px;
background-color: yellow;
height: 100px;
margin-bottom: 100px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/*
子元素是在父元素的内容区中排列的
如果子元素的大小超过了父元素,则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素
可选值:
visible 默认值 子元素会从父元素中溢出,在父元素外部的位置显示
hidden 溢出内容将会被裁剪不会显示
scroll 生成两个滚动条,通过滚动条来查看完整的内容
auto 根据需要生成滚动条
overflow-x:
overflow-y:
*/
overflow-y: auto;
}
.box2 {
width: 100px;
height: 400px;
background-color: orange;
}
</style>
</head>
<body>
<!-- <div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div> -->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
032-盒子模型的垂直布局
最新推荐文章于 2021-11-15 10:32:37 发布