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>