css的overflow属性
原文：https://www.jianshu.com/p/67b536fc67c1
-------------------------------------------
事实上我挺长一段时间都没弄清楚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>
如果我没有说清楚，你也可以自行测试。
作者：歇歇
链接：https://www.jianshu.com/p/67b536fc67c1
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
css的overflow属性的更多相关文章
- 眼见为实 — CSS的overflow属性
1. overflow属性 CSS的overflow属性指定当内容溢出一个元素的框,会发生什么.举个栗子: <!DOCTYPE html> <html> <head> ...
- CSS display overflow 属性 cursor光标类型
display属性 功能:规则网页元素如何显示的问题. 取值:none(隐藏).block(以块元素显示).inline(以行内元素显示) block:可以实现将行内元素转成块元素. ...
- CSS中的overflow属性
导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...
- 转：CSS Overflow 属性
原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...
- overflow属性-摘自网友
关于我们 版权声明 网站地图 前端观察 专注于网站前端设计与前端开发 用IE6抢不到火车票的!!! Home 首页 CSS样式之美 Front News前端资讯 JavascriptAjax与JS技术 ...
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- CSS position overflow float 属性 详解
position overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...
- 【CSS学习】--- overflow属性
一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...
- CSS：overflow 内容溢出属性
overflow 属性规定当内容溢出元素框时发生的事情 值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容 ...
随机推荐
- Asp.net core中的依赖注入
使用服务 在Asp.net core的Controller中,可以通过如下两种方式获取系统注入的服务: 构造函数 可以直接在构造函数中传入所依赖的服务,这是非常常见的DI注入方式. public Va ...
- 关于ConcurrentDictionary的线程安全
ConcurrentDictionary是.net BCL的一个线程安全的字典类,由于其方法的线程安全性,使用时无需手动加锁,被广泛应用于多线程编程中.然而,有的时候他们并不是如我们预期的那样工作. ...
- drp错误集锦---“Cannot return from outside a function or method”
好久都不动的项目,今天打开项目突然是红色感叹号.详细错误表现为: 也就是说,如今MyEclipse已经不识别在JSP页面中使用的return方法了(并且不止一处这种警告),那怎么办?????顿时闹钟一 ...
- GetKeyState(vk_control)
GetKeyState(vk_control) 返回负数 , 说明按键被按下了
- dos下 和 批处理中的 for 语句的基本用法
for 语句的基本用法 : 最复杂的for 语句,也有其基本形态,它的模样是这样的: 在cmd 窗口中:for %I in (command1) do command2 在批处理文件中:for % ...
- Delphi 获取命令行输出的函数
function GetDosOutput(CommandLine: string; Work: string = 'C:\'): string; var SA: TSecurityAttribute ...
- C#编程（三十九）----------比较对象的相等性
比较对象的相等性 需要理解对象相等的机制对逻辑表达式的编程很重要,另外,对实现运算符重载和类型强制转换也很重要. 对象相等的机制有所不同,这取决于比较的是引用类型还是值类型. 比较引用类型的相等性 S ...
- Linux 用户和用户操作
1,创建组 groupadd test 增加一个test组 2,修改组 groupmod -n test2 test 将test组的名子改成test2 3,删除组 groupdel test2 删除 ...
- Unity5中新的Shader体系简析
一.Unity5中新的Shader体系简析 Unity5和之前的书写模式有了一定的改变.Unity5时代的Shader Reference官方文档也进一步地变得丰满. 主要需要了解到的是,在原来的Un ...
- 将win7电脑无线网变身WiFi热点，让手机、笔记本共享上网
1.以管理员身份运行命令提示符:快捷键win+R→输入cmd→回车 2.启用并设定虚拟WiFi网卡:运行命令:netsh wlan set hostednetwork mode=allow ssid= ...