overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bbaaff;
/*
子元素默认是存在于父元素的内容区中，
理论上讲子元素的最大可以等于父元素内容区大小
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示
超出父元素的内容，我们称为溢出的内容
父元素默认是将溢出的内容，在父元素外部显示
通过overflow可以设置父元素如何处理溢出的内容
可选值：
visible,默认值，不会对溢出内容做处理，元素会在父元素以外显示
hidden，溢出的内容，会被修剪，不会显示
scroll,会为父元素添加滚动条，通过拖动滚动条来查看完整的内容
该属性不论内容是否溢出，都会添加水平和垂直双滚动条
auto,会根据需求自动添加滚动条
需要水平就添加水平
需要垂直就添加垂直
都不需要就不加
*/
/* overflow: hidden; */
/* overflow: scroll; */
overflow: auto;
}
.box2{
width: 100px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<!-- <div class="box2"></div> -->
1、勇者愤怒，抽刃向更强者；怯者愤怒，却抽刃向更弱者。不可救药的民族中，一定有许多英雄，专向孩子们瞪眼。这些孱头们。
2、从来如此，便对吗？
3、小的时候，不把他当人，大了以后也做不了人。
4、时间就像海绵里的水，只要愿挤，总还是有的。
5、我好象是一只牛，吃的是草，挤出的是牛奶。
6、我们目下的当务之急是：一要生存，二要温饱，三要发展。
7、凡是总须研究，才会明白。
8、愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。
9、中国一向就少有失败的英雄，少有韧性的反抗，少有敢单身鏖战的武人，少有敢抚哭叛徒的吊客；见胜兆则纷纷聚集，见败兆则纷纷逃亡。
10、哪里有天才，我是把别人喝咖啡的工夫都用在了工作上了。
11、倘只看书，便变成书橱。
12、其实地上本没有路，走的人多了，也便成了路。
13、横眉冷对千夫指，俯首甘为孺子牛。
14、愈艰难，就愈要做。改革，是向来没有一帆风顺的。
15、必须敢于正视，这才可望敢想敢说敢做敢当。
16、贪安稳就没有*，要*就要历些危险。只有这两条路。
17、无情未必真豪杰，怜子如何不丈夫。
</div>
</body>
</html>
文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
文档相当于网页，每个网页都是一个文档
文档流
文档流处在网页的最底层，他表示的是一个网页中的位置
我们所创建的元素默认都处在文档流中
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行，块元素会自上而下排列
2.块元素在文档流中的默认宽度是父元素的100%（auto）
3.块元素在文档流中的默认高度默认被内容撑开(可以指定宽度和高度)
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列
如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右
2.在文档流中，内联元素的宽度和高度默认都会被内容撑开
-->
<!-- 当元素的高度或宽度的值为auto时，此时指定内边距不会影响可见框的大小
而是自动修改宽度和高度，以适应内边距
-->
<div style="width: 100px; height: 100px; background-color: red;"></div>
<div style="width: 100px; height: 100px; background-color: yellow;"></div>
<span style="background-color: yellowgreen;">我是一个span我是一个span我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span我是一个span我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span我是一个span我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span我是一个span我是一个span</span>
<div style="background-color: violet;">
<div style="height: 500px;"></div>
</div>
</body>
</html>
CSS2