07.垂直方向的布局
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
background-color: #bfa;
/*
默认情况下父元素的高度被内容(子元素)撑开
*/
}
.inner{
width:100px;
background-color: yellow;
height:200px;
margin-bottom: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:200px;
height:200px;
background-color: #bfa;
/*
子元素是在父元素的内容区中排列的，
如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素
可选值：
visible 默认值 子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出的内容会被裁减，不会显示
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条,比起scroll更加灵活
overflow-x:
overflow-y:
*/
overflow:auto;
}
</style>
</head>
<body>
<div class="box1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione modi dolore vero veritatis ut nisi ipsum quidem deserunt fugit iste, ipsa dolorum aspernatur explicabo nam distinctio cumque voluptatibus, natus alias?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione modi dolore vero veritatis ut nisi ipsum quidem deserunt fugit iste, ipsa dolorum aspernatur explicabo nam distinctio cumque voluptatibus, natus alias?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione modi dolore vero veritatis ut nisi ipsum quidem deserunt fugit iste, ipsa dolorum aspernatur explicabo nam distinctio cumque voluptatibus, natus alias?
</div>
</body>
</html>
标签：ipsum,布局,07,consectetur,元素,垂直,dolore,滚动条,overflow 来源： https://www.cnblogs.com/sherryyuan/p/16367652.html