CSS：overflow溢出表现隐蔽

愛在花開的季節  论坛元老 | 2024-9-6 12:19:13 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1025|帖子 1025|积分 3075

overflow是对溢出的部分表现隐蔽，并不是对整个元素表现隐蔽。即overflow属性指定了假如内容溢出一个元素的框（超过其指定的高度、宽度）时，会发生什么。
属性值描述visible不剪切内容，也不添加滚动条hidden不表现超过对象尺寸的内容，超出的部分隐蔽掉scroll不管内容有没有溢出，总是表现滚动条auto溢出了主动表现滚动条，没有溢出就不表现滚动条 1）一般情况下，不想让溢出的内容表现出来，因为溢出的部分会影响布局。
2）针对有定位的盒子，想故意让它露出一块来，请慎用overflow: hidden; 因为它会隐蔽多余的部分。特别是故意超出的。
比方，下面的Hot图标是故意超出大盒子右边沿的，此时就不能用overflow: hidden;

示例：默认超出部分是表现的，等价于overflow: visible;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .box {
  10.       width: 200px;
  11.       height: 200px;
  12.       border: 3px solid pink;
  13.       margin: 100px auto;
  14.     }
  15.   </style>
  16. </head>
  18. <body>
  19.   <div class="box">
  20.     奥林匹克运动会起源于古希腊，因举办地点在奥林匹克而得名。传说古代奥运会是由众神之王宙斯所创始的。第1届古代奥运会于公元前776年举行，到公元394年共举行了293届。运动会每隔1417天即4年举行一届。后来人们将这一周期称为奥林匹克周期。随着近代体育的兴起，希腊人民希望恢复古代奥运会。在1859――1889年，希腊曾举办过4届奥运会，做了初步尝试。自1883年开始，法国人顾拜旦致力于古代奥运会的复兴。经他与若干代人的努力，国际奥林匹克委员会于1894年6月23日成立。顾拜旦制订的第一部奥林匹克宪章强调了奥林匹克运动的业余性，规定在奥运会上只授予优胜者荣誉奖，不得以任何形式发给运动员金钱或其他物质奖励。1896年4月6――15日，第一届奥林匹克运动会在雅典举行。
  21.   </div>
  22. </body>
  24. </html>
复制代码

示例：溢出部分隐蔽：overflow: hidden;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .box {
  10.       overflow: hidden;
  11.       width: 200px;
  12.       height: 200px;
  13.       border: 3px solid pink;
  14.       margin: 100px auto;
  15.     }
  16.   </style>
  17. </head>
  19. <body>
  20.   <div class="box">
  21.     奥林匹克运动会起源于古希腊，因举办地点在奥林匹克而得名。传说古代奥运会是由众神之王宙斯所创始的。第1届古代奥运会于公元前776年举行，到公元394年共举行了293届。运动会每隔1417天即4年举行一届。后来人们将这一周期称为奥林匹克周期。随着近代体育的兴起，希腊人民希望恢复古代奥运会。在1859――1889年，希腊曾举办过4届奥运会，做了初步尝试。自1883年开始，法国人顾拜旦致力于古代奥运会的复兴。经他与若干代人的努力，国际奥林匹克委员会于1894年6月23日成立。顾拜旦制订的第一部奥林匹克宪章强调了奥林匹克运动的业余性，规定在奥运会上只授予优胜者荣誉奖，不得以任何形式发给运动员金钱或其他物质奖励。1896年4月6――15日，第一届奥林匹克运动会在雅典举行。
  22.   </div>
  23. </body>
  25. </html>
复制代码

只是隐蔽溢出的部分，并没有删掉，通过查抄可以发现：

示例： overflow: scroll;不管有没有溢出，都表现滚动条

溢出了表现滚动条

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .box {
  10.       overflow: scroll;
  11.       width: 200px;
  12.       height: 200px;
  13.       border: 3px solid pink;
  14.       margin: 100px auto;
  15.     }
  16.   </style>
  17. </head>
  19. <body>
  20.   <div class="box">
  21.     奥林匹克运动会起源于古希腊，因举办地点在奥林匹克而得名。传说古代奥运会是由众神之王宙斯所创始的。第1届古代奥运会于公元前776年举行，到公元394年共举行了293届。运动会每隔1417天即4年举行一届。后来人们将这一周期称为奥林匹克周期。随着近代体育的兴起，希腊人民希望恢复古代奥运会。在1859――1889年，希腊曾举办过4届奥运会，做了初步尝试。自1883年开始，法国人顾拜旦致力于古代奥运会的复兴。经他与若干代人的努力，国际奥林匹克委员会于1894年6月23日成立。顾拜旦制订的第一部奥林匹克宪章强调了奥林匹克运动的业余性，规定在奥运会上只授予优胜者荣誉奖，不得以任何形式发给运动员金钱或其他物质奖励。1896年4月6――15日，第一届奥林匹克运动会在雅典举行。
  22.   </div>
  23. </body>
  25. </html>
复制代码

没有溢出，也表现滚动条

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .box {
  10.       overflow: scroll;
  11.       width: 200px;
  12.       height: 200px;
  13.       border: 3px solid pink;
  14.       margin: 100px auto;
  15.     }
  16.   </style>
  17. </head>
  19. <body>
  20.   <div class="box">
  21.     奥林匹克运动会起源于古希腊，因举办地点在奥林匹克而得名。
  22.   </div>
  23. </body>
  25. </html>
复制代码

示例：overflow: auto;溢出的时候才表现滚动条，不溢出就不表现滚动条

溢出了，表现滚动条

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .box {
  10.       overflow: auto;
  11.       width: 200px;
  12.       height: 200px;
  13.       border: 3px solid pink;
  14.       margin: 100px auto;
  15.     }
  16.   </style>
  17. </head>
  19. <body>
  20.   <div class="box">
  21.     奥林匹克运动会起源于古希腊，因举办地点在奥林匹克而得名。传说古代奥运会是由众神之王宙斯所创始的。第1届古代奥运会于公元前776年举行，到公元394年共举行了293届。运动会每隔1417天即4年举行一届。后来人们将这一周期称为奥林匹克周期。随着近代体育的兴起，希腊人民希望恢复古代奥运会。在1859――1889年，希腊曾举办过4届奥运会，做了初步尝试。自1883年开始，法国人顾拜旦致力于古代奥运会的复兴。经他与若干代人的努力，国际奥林匹克委员会于1894年6月23日成立。顾拜旦制订的第一部奥林匹克宪章强调了奥林匹克运动的业余性，规定在奥运会上只授予优胜者荣誉奖，不得以任何形式发给运动员金钱或其他物质奖励。1896年4月6――15日，第一届奥林匹克运动会在雅典举行。
  22.   </div>
  23. </body>
  25. </html>
复制代码

没有溢出，不表现滚动条

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .box {
  10.       overflow: auto;
  11.       width: 200px;
  12.       height: 200px;
  13.       border: 3px solid pink;
  14.       margin: 100px auto;
  15.     }
  16.   </style>
  17. </head>
  19. <body>
  20.   <div class="box">
  21.     奥林匹克运动会起源于古希腊，因举办地点在奥林匹克而得名。
  22.   </div>
  23. </body>
  25. </html>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

愛在花開的季節

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表