css的overflow属性
- >
- 话题 >
事事实上我挺长一段时间都没弄清楚overflow:scroll与overflow:auto的差异，今天测试了一下，总算是明了了。
语法
overflow：<overflow-style>;
ps:<overflow-style>= visible | hi...
事事实上我挺长一段时间都没弄清楚overflow:scroll与overflow:auto的差异，今天测试了一下，总算是明了了。
语法
overflow：<overflow-style>; ps:<overflow-style>= visible | hidden | scroll | auto
- visible： 不剪切内容。
- hidden： 将超出工具尺寸的内容举行裁剪，将不泛起滚动条。
- scroll： 将超出工具尺寸的内容举行裁剪，并以滚动条的方式显示超出的内容。
- auto： 在需要时剪切内容并添加滚动条，此为body工具和textarea的默认值。
差异
取值为auto时，当内容超出工具的尺寸时才会显示滚动条，而取值为scroll时，无论内容是否超出工具的尺寸，滚动条是一直存在的。
下面是图片形貌：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>overflow</title>
<style>
.test{overflow:auto;width:200px;white-space:nowrap;border:1px solid red;}
</style>
</head>
<body>
<div class="test">当123</div>
</body>
</html>
auto:内容未跨越尺寸，不显示滚动条
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>overflow</title>
<style>
.test{overflow:scroll;width:200px;white-space:nowrap;border:1px solid red;}
</style>
</head>
<body>
<div class="test">当123</div>
</body>
</html>
scroll：内容未跨越工具尺寸，依然有显示滚动条
作者：歇歇
链接：https://www.jianshu.com/p/67b536fc67c1
泉源：简书
思源资源网：分类流动
1.阿里云: 本站现在使用的是阿里云主机，平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入
2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动，优惠券领取点击进入
3.广告同盟: 整理了现在主流的广告同盟平台，若是你有流量，可以作为参考选择适合你的平台点击进入
链接: http://www.fly63.com/article/detial/2147
- 发表于 2021-02-11 16:48
- 阅读 ( 224 )
- 分类：互联网
0 条评论
请先 登录 后评论
