本文详细介绍了CSS overflow属性的“定义和使用”“属性效果”。 直接访问代码和图例。 为了便于阅读，我们共享了自己验证过程的图像。
一. overflow定义和用法： 1. overflow属性规定当内容溢出元素框时发生。 2 .此属性定义了如何处理溢出元素内容区域的内容。 如果值为scroll，则无论是否需要用户代理，都提供滚动机制。 因此，即使可以将所有内容放置在元素框中，也可能会显示滚动条。 2 .溢出(溢出- x )-(溢出- x )的可能值是：1.可见性的默认值。 内容不会被裁剪，而是显示在元素框之外。 2 .隐藏内容已修剪，其余内容不可见。 3 .虽然会裁剪3. scroll内容，但会在浏览器中显示滚动条，以便您可以查看其馀内容。 4 .修剪自动内容后，浏览器中将显示滚动条，您可以在其中查看其馀内容。 5. inherit规定从父元素继承overflow属性的值。 1.Overflow :可视属性效果！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' initial-scale=1.0 ' title overflow (overflow-x ) )、overflow-x )属性详细解/title/head style.w _ overflow-shel paddind }.w _ over-flowp { font-size 336014 px； line-height: 16px； 背景色：暗灰色； margin: 4px 0； }/* visible *.w _ visible-outer {/* width :700 px； */width: 400px； 高： 80px； 背景色：暗绿色； 板载：可视； }/stylebodydivclass=' w _ overflow-shel ' visibledivclass=' w _ visible-outer w _ over-flow ' p123/PP qwe/p12223 p 123234235 gdfgdfgdfg 111111111111111111111111111123235 gdfgdfg 111111111111111/p/div/body/body
2.overflow :隐藏属性效果！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' initial-scale=1.0 ' title overflow (overflow-x ) )、overflow-x )属性详细解/title/head style.w _ overflow-shel paddind }.w _ over-flowp { font-size 336014 px； line-height: 16px； 背景色：暗灰色； margin: 4px 0； (/) hidden(/.w_hidden-outer ) height:78px； width: 300px； /*可以在以下代码注释中看到比较效果*/overflow: hidden； }/stylebodydivclass=' w _ overflow-sh
el"> hidden <div class="w_hidden-outer w_over-flow"> <p>aaaaaaaaaaaaaaaaaaaaa</p> <p>bbbbbbbbbbbbbbbbbbbbbbbbbb</p> <p>ccccccccccccccccccccccccccc</p> <p>11111111111111111111111</p> <p>ddddddddddddddd</p> <p>2222222222222222222222222222</p> <p>333333333333333333333333333333333333333333333</p> <p>eeeeeeeeeeeeeeeeeeeeeee4444444444444444</p> </div></div></body></html>
图片示例
3. overflow: scroll 属性效果 设置 overflow: scroll; 有可能即使元素框中可以放下所有内容也会出现滚动条; 这个现象我这里一直没有复现这个这个现象, 找到这个现象我再与大家分享。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>overflow (overflow-x)--(overflow-x) 属性详解</title></head><style>.w_overflow-shel { background-color: aqua; padding: 40px 20px;}.w_over-flow p { font-size: 14px; line-height: 16px; background-color: darkgray; margin: 4px 0;}/* scroll */.w_scroll-outer { height: 140px; width: 300px; overflow: scroll;}</style><body><div class="w_overflow-shel"> scroll <div class="w_scroll-outer w_over-flow"> <p>11111111111111111111111111111</p> <p>2222222222222222222222222222222</p> <p>333333333333333333333333333</p> <p>44444444444444444444444444444444444</p> <p>5555555555555555555555555555555555555555</p> <p>6666666666666666666666666666666666666666666666</p> <p>77777777777777777777777777777777777777777</p> <p>888888888888888888888888888888888888888</p> </div></div></body></html>
图片示例
4. overflow: auto 属性效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>overflow (overflow-x)--(overflow-x) 属性详解</title></head><style>.w_overflow-shel { background-color: aqua; padding: 40px 20px;}.w_over-flow p { font-size: 14px; line-height: 16px; background-color: darkgray; margin: 4px 0;}/* auto */.w_auto-outer { overflow: auto; height: 100px; width: 320px;}</style><body><div class="w_overflow-shel"> auto <div class="w_auto-outer w_over-flow"> <p>aaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>bbbbbbbbbbbbbbbbb</p> <p>ccccccccccccccc</p> <p>dddddddddddddddddddddddddddddd</p> <p>eeeeeeeeeeeeeeeeeeeeeeeeeeee</p> <p>ffffffffffffffffffffffffffffffffff</p> <p>gggggggggggggggggggggggg</p> <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p> </div></div></body></html>
图片示例
5. overflow: inherit 属性效果 这里的继承效果使用 scroll 设置对比效果最为强烈, 有兴趣的同学可以尝试其他属性设置的效果 。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>overflow (overflow-x)--(overflow-x) 属性详解</title></head><style>.w_overflow-shel { background-color: aqua; padding: 40px 20px;}.w_over-flow p { font-size: 14px; line-height: 16px; background-color: darkgray; margin: 4px 0;}/* inherit */.w_inherit-outer { /* 如果想要使用 其他属性可以将 overflow: hidden; 注释去除; 将 overflow: scroll; 属性设置注释 */ /* overflow: hidden; */ overflow: scroll; height: 200px; width: 500px; background-color: cadetblue;}.w_inherit-son-outer { overflow: inherit; height: 120px; width: 222px; background-color: crimson; padding: 12px;}</style><body><div class="w_overflow-shel"> inherit <div class="w_inherit-outer w_over-flow"> <div class="w_inherit-son-outer"> <p>111111111111111aaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>2222222222222bbbbbbbbbbbbbbbbb</p> <p>ccccccccccccccc333333333333333</p> <p>444444444444444dddddddddddddddddddddddddddddd</p> <p>5555555555555eeeeeeeeeeeeeeeeeeeeeeeeeeee</p> <p>666666666666666fffffffffffffffffffffffffffffffff</p> <p>77777777777777gggggggggggggggggggggggg</p> <p>8888888888888888888hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p> </div> </div></div></body></html>
图片示例
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “前端CSS” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。
如果对你有所帮助，喜欢的可以点个关注, 必然回访; 文章会一直持续打磨 。 有什么想要了解的前端知识吗? 可以评论留言, 会及时跟进分享所提内容 。 整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。