1 <!-- CSS元素溢出：当子元素的尺寸超过父元素时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overfl属性来设置的。 2 overflow的设置项： 3 1、visible默认值：内容不会被修剪，会呈现在元素框之外 4 2、hidden：内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动，margin-top塌陷的功能 5 3、scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容，不管会不会溢出都会有滚动条显示。 6 4、auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容。 7 5、inherit：规定应该从父元素继承overflow属性的值。 --> 8 <!DOCTYPE html> 9 <html lang="en"> 10 <style type="text/css"> 11 12 .box{ 13 width: 300px; 14 height: 200px; 15 border: 1px solid #000; 16 background-color: gold; 17 line-height: 30px; 18 margin: 50px auto 0; /* 这时候会产生元素溢出 */ 19 overflow: hidden; /* 将多余的直接剪除 */ 20 overflow: scroll; /* 将多余的内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 */ 21 overflow: auto 22 } 23 </style> 24 <head> 25 <meta charset="UTF-8"> 26 <title>Document</title> 27 </head> 28 <body> 29 <div class="box">CSS元素溢出：当子元素的尺寸超过父元素时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overfl属性来设置的。 30 overflow的设置项： 31 1、visible默认值：内容不会被修剪，会呈现在元素框之外 32 2、hidden：内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动，margin-top塌陷的功能 33 3、scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。 34 4、auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容。 35 5、inherit：规定应该从父元素继承overflow属性的值。</div> 36 </body> 37 </html>