ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS overflow 属性(琐碎知识点整理)

2021-07-04 16:33:28  阅读:199  来源: 互联网

标签:知识点 color height background overflow scroll CSS 属性


本文详细的介绍了 CSS overflow 属性的 ‘定义和用法’ + ‘属性效果’

废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

一. overflow 定义和用法:

1. overflow 属性规定当内容溢出元素框时发生的事情 。

2. 这个属性定义溢出元素内容区的内容会如何处理 。 如果值为 scroll, 不论是否需要, 用户代理都会提供一种滚动机制 。 因此, 有可能即使元素框中可以放下所有内容也会出现滚动条 。

二. overflow (overflow-x)–(overflow-x) 可能的值:

1. visible	默认值 。 内容不会被修剪, 会呈现在元素框之外 。

2. hidden	内容会被修剪, 并且其余内容是不可见的 。

3. scroll	内容会被修剪, 但是浏览器会显示滚动条以便查看其余的内容 。

4. auto	如果内容被修剪, 则浏览器会显示滚动条以便查看其余的内容 。

5. inherit	规定应该从父元素继承 overflow 属性的值 。

1. overflow: visible 属性效果

<!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;
}


/* visible */
.w_visible-outer {
  /* width: 700px; */
  width: 400px;
  height: 80px;
  background-color: darkgreen;
  overflow: visible;
}
</style>

<body>
<div class="w_overflow-shel">
  visible
  <div class="w_visible-outer w_over-flow">
    <p>123</p>
    <p>qwe</p>
    <p>123123</p>
    <p>asdasd</p>
    <p>12321312</p>
    <p>asdasdasd</p>
    <p>123qweqwe</p>
    <p>123234235gdfgdfgdfg11111111111111111111111123234235gdfgdfgdfg11111111111111111111111</p>
  </div>
</div>
</body>
</html>

图片示例
v-1-1.png
在这里插入图片描述

2. overflow: hidden 属性效果

<!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;
}


/* hidden */
.w_hidden-outer {
  height: 78px;
  width: 300px;
  /* 可以将下面代码注释查看对比效果 */
  overflow: hidden;
}
</style>

<body>
<div class="w_overflow-shel">
  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>

图片示例
v-2-1.png
v-2-2.png

3. overflow: scroll 属性效果

  1. 设置 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>

图片示例
v-3-1.png
v-3-2.gif

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>

图片示例
v-4-1.png
在这里插入图片描述

5. overflow: inherit 属性效果

  1. 这里的继承效果使用 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>

图片示例
在这里插入图片描述

v-5-2.gif
在这里插入图片描述

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “前端CSS” 的相关专栏; 不积跬步,无以至千里, 戒焦戒躁 。

如果对你有所帮助,喜欢的可以点个关注, 必然回访; 文章会一直持续打磨 。

有什么想要了解的前端知识吗? 可以评论留言, 会及时跟进分享所提内容 。

整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教,本人会及时更改 (本文原创, 如需转载,请注明出处) 。

标签:知识点,color,height,background,overflow,scroll,CSS,属性
来源: https://blog.csdn.net/wuzhiyue2/article/details/118150975

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有