CSS的overflow属性介绍
overflow 属性规定如何处理如何处理不符合元素框的内容。用法如下：Object.style.overflow=visible|hidden|scroll|auto。
参数介绍：
- visible：内容不会被修剪，会呈现在元素框之外。
- hidden：内容会被修剪，但是浏览器不会显示供查看内容的滚动条。
- scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto：由浏览器决定如何显示。如果需要，则显示滚动条。
本例使用 overflow 来显示溢出元素框的内容：
01 |
<html> |
02 |
<head> |
03 |
<style type="text/css"> |
04 |
div { border:thin solid green; width:100px; height:100px; } |
05 |
</style> |
06 |
<script type="text/javascript"> |
07 |
function hideOverflow() |
08 |
{ |
09 |
document.getElementById("div1").style.overflow="hidden"; |
10 |
} |
11 |
</script> |
12 |
</head> |
13 |
<body> |
14 |
<div id="div1"> |
15 |
This is some text. This is some text. This is some text. |
16 |
This is some text. This is some text. This is some text. |
17 |
This is some text. This is some text. This is some text. |
18 |
</div> |
19 |
<br /> |
20 |
<input type="button" onclick="hideOverflow()" |
21 |
value="Hide overflow" /> |
22 |
</body> |
23 |
</html> |
相信大家都碰到过一种情况：没有给父级div指定高度。希望他通过子级div的高度变化而自动适应。看似很简单，但日常应用中往往对子级div有更多要求，比如多重子级div、子级div左（右）浮动等等。这时就会碰到一种比较郁闷的情况：父级div无法随着子级div的高度增加而增加，发生”脱层”的现象。这种时候就需要用到”overflow: hidden;”这个属性了。表面意思来看他的作用是隐藏div层，而当我们给父级div应用这个属性的时候会发现它神奇的变得自适应了。
对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
overflow:hidden---这样超出部分会自动隐藏，这样做不好的地方是就是这部分的信息显示不完全，比如图片只显示了一部分，但是页面布局不会乱。要注意的是，使用overflow的时候，一定要定义width，百分比或者具体值都可以。（在用ul和li做图片列表排列的时候，也可以用这个，这样避免一些大尺寸图搞乱布局，也可以解决浏览器窗口缩小时，li元素自动回行排列出错的问题）。用overflow:auto，还可以在页面里模仿出IFRAME的效果。
CSS的overflow属性介绍的更多相关文章
- css 溢出overflow
css 溢出overflow 当一个元素被设置为固定大小,在这个元素中的内容如果超出元素的界限,就会出现溢出的现象. 通常情况下我们可以通过overflow来控制这个属性. overflow语法定义 ...
- 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]
深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...
- css之overflow
也说css之overflow:细探之下有意想不到的结果 2016-11-5 滴滴出行·DDFE 作者:dolymood overflow 是一个非常常用的 CSS 属性,一般来说会认为很简单,其实细究 ...
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- 转：css中overflow:hidden 不起作用了吗？
css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...
- CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...
- 对CSS了解-overflow:hidden
overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css"> .wrap {;backgro ...
- CSS 布局 - Overflow
CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. 这里的文本内容是可以滚动的,滚动条方向是垂直方向.dd马达价格 这里的文本内容是可以滚动的,滚动 ...
- 眼见为实 — CSS的overflow属性
1. overflow属性 CSS的overflow属性指定当内容溢出一个元素的框,会发生什么.举个栗子: <!DOCTYPE html> <html> <head> ...
随机推荐
- JavaScript设计模式-----模板方法模式
模板方法模式是一种只需要使用继承就可以实现的非常简单点的模式. 模板方法模式有两部分组成,第一部分是抽象父类,第二部分是具体的实现子类.通常在抽象父类中封装了子类的算法框架,包括实现 一些公共方法以及 ...
- Hadoop Streaming框架使用（二）
上一篇文章介绍了Streaming的各种参数,本文具体介绍使用方法. 提交hadoop任务示例: $HADOOP_HOME/bin/hadoop streaming \ -input /user/te ...
- 第三次作业---excel导入数据库及显示（2）
发现第一次做的功能有点复杂,不能理解.而且第一次的想法是在页面上上传文件,连接并导入到数据库,并在页面上显示.后来才看到要求是直接在本地将数据导入数据库就行了,然后显示.所以才出现了一堆看不懂也解决不 ...
- 31_网络编程（Socket套接字编程）_讲义
今日内容介绍 1.网络三要素及传输协议 2.实现UDP协议的发送端和接收端 3.实现TCP协议的客户端和服务器 4.TCP上传文件案例 01网络模型 *A:网络模型 TCP/IP协议中的四层分别是应用 ...
- 旧文备份:CANopen协议中SDO服务
SDO是服务数据对象接口(Service Data Obiect)的缩写,顾名思义提供服务数据的访问接口,服务数据就是一些实时性要求不高的数据,一般是指节点配置参数,因此,SDO一般用来配置和获得节点 ...
- 转 彻底理解js中的&&和||
javascript中,&&和||的用法比较神奇,经常用在对象上,例如a || b,如果a不存在,则返回b.a && b,如果a存在,则返回b,否则返回a. 光这样看, ...
- TCP连接 三次握手 四次挥手
前言: TCP协议是面向连接.安全可靠.基于字节流的传输层协议,在进行http协议访问时就用到了tcp连接.在建立TCP连接时需要经历三次握手,断开连接时需要经历四次挥手.在此进行记录. 内容: TC ...
- appium启动sdk的android模拟器
(1)启动sdk安装目录下的AVD Manager.exe (2)如下图,点击[create]按钮 (3)如下图,设置虚拟机的配置,至于Target中的:Android 4.4.2是在安装sdk的时候 ...
- redis哨兵机制二（转）
概述 Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Master-slave的高可用方案时,假如 master宕机了,Redis本身(包括它的很多客户端) ...
- 小程序 上啦下拉刷新window配置
"enablePullDownRefresh": "true" /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefres ...