css的overflow属性
事事实上我挺长一段时间都没弄清楚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>
<!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>
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!