css元素溢出:
当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。
overflow的设置项:
(1)visible 默认值 内容不会被修剪,会呈现在元素框之外
(2)hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能。
(3)scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。(不管有没有溢出都会有滚动条)
(4)auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。(只有溢出时有滚动条,不溢出时没有滚动条)
(5)inherit 规定应该从父元素继承overflow属性的值。(很少用)
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素溢出</title> <style type="text/css"> .box{ width: 300px; height: 150px; border:1px solid black; margin:50px auto 0px; background-color: gold; line-height:30px; /*overflow:visible; /* 默认 会溢出 */ /*overflow:hidden; /* 不会溢出,把多余的清除 */ /*overflow:scroll; /* 显示滚动条来查看其余的部分(不好看),不管是否溢出都显示滚动条 */ overflow:auto; /* 溢出有滚动条,不溢出没有滚动条 */ /*overflow:inherit; 不常用 */ } </style> </head> <body> <div class="box">当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。 overflow的设置项: (1)visible 默认值 内容不会被修剪,会呈现在元素框之外 (2)Hidden 内容会被修剪,并且其余内容是不可见的, 此属性还有清除浮动、清除margin-top塌陷的功能。</div> </body> </html>
页面显示效果: