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 内容 ...
随机推荐
- 通过本地Git部署网站到WebSite
玩过Azure WebSite(WebApp)的同学应该知道部署网站的方式非常多,今天我要讲的是如果通过本地Git部署网站到WebSite. 1.新建WebSite 创建WebSite非常简单,我这里 ...
- svn 迁移到 git 仓库并保留 commit 历史记录
1.svn 转换为 git(会提示,让你输入先前 svn 的账号与密码) # 切换至 本地项目目录 cd /Users/jianbao/PhpStormProjects/fiisoo/ # 克隆 sv ...
- hdu1242 Rescue(BFS +优先队列 or BFS )
http://acm.hdu.edu.cn/showproblem.php?pid=1242 题意: Angel被传说中神秘的邪恶的Moligpy人抓住了!他被关在一个迷宫中.迷宫的长.宽不超 ...
- VC设置代理方法
参考文章: VC 设置代理 Setting and Retrieving Internet Options Change Internet Proxy settings http://suppor ...
- [DLX反复覆盖] hdu 3656 Fire station
题意: N个点.再点上建M个消防站. 问消防站到每一个点的最大距离的最小是多少. 思路: DLX直接二分推断TLE了. 这时候一个非常巧妙的思路 我们求的距离一定是两个点之间的距离 因此我们把距离都求 ...
- 关于Maven项目build时出现No compiler is provided in this environment的处理(转)
本文转自https://blog.csdn.net/lslk9898/article/details/73836745 近日有同事遇到在编译Maven项目时出现[ERROR] No compiler ...
- springboot—spring aop 实现系统操作日志记录存储到数据库
原文:https://www.jianshu.com/p/d0bbdf1974bd 采用方案: 使用spring 的 aop 技术切到自定义注解上,针对不同注解标志进行参数解析,记录日志 缺点是要针对 ...
- Java Calendar,Date,DateFormat,TimeZone,Locale等时间相关内容的认知和使用(1) Calendar
Java 操作日期/时间,往往会涉及到Calendar,Date,DateFormat这些类. 最近决定把这些内容系统的整理一下,这样以后使用的时候,会更得心应手.本章的内容是主要讲解“Java时间框 ...
- ios7下UISearchBar UITextField 光标不出现的问题
app支持ios7,在UINavBar 里面加入搜索框,结果光标一直出现不了.在overstackflow网站搜索了一下,竟然有人遇到相同的问题.... 解决办法如下: searchBar.tintC ...
- .NET：如何并行的从集合中返还元素？
实现代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sys ...