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 内容 ...
随机推荐
- 区别ES3ES5和ES6this的指向问题。区分普通函数和箭头函数中this的指向问题
ES3 ES5this的指向问题 this指的是该函数被调用的对象 var foo = function () { this.a = 'a', this.b = 'b', this.c = { a: ...
- Renesas M16C/6X -- Simple PWM Signal Generation Using DMA
1. Requirements To generate a PWM output, we need to create a train of pulses with constant period a ...
- IAR EWAR 内联汇编 调用外部函数 Error[Og005], Error[Og006]
How do I call a C function in another module from inline assembler in IAR EWARM? I have a bit of ass ...
- SATA工作模式咋选？揭秘AHCI和IDE区别（全文）
第1页:AHCI模式与Win7.SSD的不解之缘 AHCI这个注定和SATA接口结下不解之缘的接口模式,它担负着淘汰IDE模式的重任,从诞生开始就充满争议,它经历了整整7年时间.它伴随着SSD ...
- 娓娓道来c指针 (7)指针运算
(7)指针运算 在前几篇文章中,我们已经见过指针运算的使用场景,并多次使用指针运算来进行验证. 这里我们来特别地总结下.指针运算的本质含义. 在c语言中.如果p.pa.pb都是某种类型的指针,这种运算 ...
- AngularJS自定义Directive不一定返回对象
AngularJS中,当需要自定义Directive时,通常返回一个对象,就像如下的写法: angular.module('modulename') .directive('myDirective', ...
- 在ASP.NET MVC中实现登录后回到原先的界面
有这样的一个需求:提交表单,如果用户没有登录,就跳转到登录页,登录后,跳转到原先表单提交这个页面,而且需要保持提交表单界面的数据. 提交表单的页面是一个强类型视图页,如果不考虑需要保持提交表单界面的数 ...
- CentOS RabbitMQ 高可用(Mirrored)
原文:https://www.sunjianhua.cn/archives/centos-rabbitmq.html 一.RabbitMQ 单节点 1.1.Windows 版安装配置 1.1.1 安装 ...
- css 滚动条样式
1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...
- 使用VMWare虚拟机创建CentOS版本号的Linux学习环境(每一步都有截图与说明)
学习Android开发.假设不学习Linux的基本使用,总感觉心里过意不去,由于毕竟Android还是搭载在Linux的基础之上的. 因此.学习一种Linux系统的基本操作.对我们以后的学习还是非常有 ...