之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给你们, 现在看到感觉还挺有意思 。
好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。
一. 定义和用法:
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
v-1-2.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 属性效果
- 设置 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
v-4-2.gif
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>
图片示例
v-5-1.png
v-5-2.gif
v-5-3.gif
网友评论