第二十五节 overflow元素溢出 

 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>

 

posted @ 2020-03-05 15:48  kog_maw  阅读(604)  评论(0)    收藏  举报