码迷,mamicode.com
首页 > Web开发 > 详细

css的overflow属性

时间:2019-02-27 20:29:48      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:ogr   ble   doc   href   har   utf-8   htm   --   -o   

原文:https://www.jianshu.com/p/67b536fc67c1

-------------------------------------------

事实上我挺长一段时间都没弄清楚overflow:scrolloverflow: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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

css的overflow属性

标签:ogr   ble   doc   href   har   utf-8   htm   --   -o   

原文地址:https://www.cnblogs.com/oxspirt/p/10446338.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!