写给自己：
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置方法是通过overflow属性来设置.
元素溢出现象
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS---元素溢出</title>
<style type="text/css">
.box{
width: 300px;
height: 200px;
border: 1px solid cyan;
margin: 50px auto 0;
background-color: gold;
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
子元素的方式，设置方法是通过overflow属性来设置.
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
子元素的方式，设置方法是通过overflow属性来设置.
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
子元素的方式，设置方法是通过overflow属性来设置.
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
子元素的方式，设置方法是通过overflow属性来设置.
</div>
</body>
</html>
解决办法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS---元素溢出</title>
<style type="text/css">
.box{
width: 300px;
height: 200px;
border: 1px solid cyan;
margin: 50px auto 0;
background-color: gold;
line-height: 30px;
/* overflow: hidden; 裁剪，溢出内容不可见 */
/* overflow: visible; 缺省值，内容呈现不变 */
/* overflow: scroll; 内容会被修剪，但是浏览器会以滚动条的形式以便查看其余的内容 */
overflow: auto; /* 如果内容被修剪，但是浏览器会以滚动条的形式以便查看其余的内容 */
/* overflow: inherit; 一般不用 */
}
</style>
</head>
<body>
<div class="box">
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
子元素的方式，设置方法是通过overflow属性来设置.
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
子元素的方式，设置方法是通过overflow属性来设置.
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
子元素的方式，设置方法是通过overflow属性来设置.
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的
子元素的方式，设置方法是通过overflow属性来设置.
</div>
</body>
</html>
