原文: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属性的更多相关文章

  1. 眼见为实 — CSS的overflow属性

    1. overflow属性 CSS的overflow属性指定当内容溢出一个元素的框,会发生什么.举个栗子: <!DOCTYPE html> <html> <head> ...

  2. CSS display overflow 属性 cursor光标类型

    display属性   功能:规则网页元素如何显示的问题.   取值:none(隐藏).block(以块元素显示).inline(以行内元素显示)   block:可以实现将行内元素转成块元素.   ...

  3. CSS中的overflow属性

    导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...

  4. 转:CSS Overflow 属性

    原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...

  5. overflow属性-摘自网友

    关于我们 版权声明 网站地图 前端观察 专注于网站前端设计与前端开发 用IE6抢不到火车票的!!! Home 首页 CSS样式之美 Front News前端资讯 JavascriptAjax与JS技术 ...

  6. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  7. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

  8. 【CSS学习】--- overflow属性

    一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...

  9. CSS:overflow 内容溢出属性

    overflow 属性规定当内容溢出元素框时发生的事情 值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容 ...

随机推荐

  1. 2016 Multi-University Training Contest 6 题解

    我只能说: A Boring Question 下面公式重复了一行 \[ \sum\_{0\leq k\_{1},k\_{2},\cdots k\_{m}\leq n}\prod\_{1\leq j& ...

  2. hdu 5774 Where Amazing Happens 水题

    Where Amazing Happens 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5774 Description As the premie ...

  3. 从PHP客户端看MongoDB通信协议(转)

    MongoDB 的 PHP 客户端有一个 MongoCursor 类,它是用于获取一次查询结果集的句柄(或者叫游标),这个简单的取数据操作,内部实现其实不是那么简单.本文就通过对 MongoCurso ...

  4. LightOJ 1366 - Pair of Touching Circles (统计矩形内外切圆对)

    1366 - Pair of Touching Circles   PDF (English) Statistics Forum Time Limit: 3 second(s) Memory Limi ...

  5. Windows 2008 R2防火墙设置运行被ping通

    参考文献: http://huobumingbai.blog.51cto.com/1196746/323896/

  6. DOM对象之document对象

    DOM对象:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. 打开网页后,首先看到的是浏览器窗口,即顶层的win ...

  7. ArcEngine设置有牵引线的标注

    来自:https://blog.csdn.net/u011609113/article/details/51372827/ 在ArcGIs中很容易就能设置带有牵引线的标注.   在ArcEngine中 ...

  8. Java/JSP获得客户端网卡MAC地址的三种方法解析

    java/jsp获得客户端(IE)网卡MAC地址的方法大概有三种. 1.通过命令方式,在客户端执行Ipconfig 等等.(java/jsp) 2.通过ActiveX的方法.(jsp) 3.通过向13 ...

  9. 从Oracle迁移到MySQL的各种坑及自救方案

    当企业内部使用的数据库种类繁杂时,或者有需求更换数据库种类时,都可能会做很多数据迁移的工作.有些迁移很简单,有些迁移可能就会很复杂,大家有没有考虑过为了顺利完成复杂的数据库迁移任务,都需要考虑并解决哪 ...

  10. linux dig命令 转

    dig 命令主要用来从 DNS 域名服务器查询主机地址信息. 查询单个域名的 DNS 信息 dig 命令最典型的用法就是查询单个主机的信息. $ dig baidu.com dig 命令默认的输出信息 ...