CSS中:overflow:hidden的作用
功能1、隐藏溢出
在IE6下,当子容器的宽高超出父容器时,父容器就会被撑开来。 要想解决这个问题,在父容器中除定义宽和高的值以外,还必须写overflow:hidden,这样就能把子容器的其它内容隐藏。 但是在火狐或者其他浏览器里面,我们发现问题并非如此简单。我们发现,当子容器这个div的宽度和高度都大于父容器这个div的时候,父容器并没有被内撑开而是依旧显示为我们指定的宽高。 例如:结构如下: css代码: #wai{ width:200px; background:#000; height:200px; border:2px blue solid; } #nei { float:left; width:300px; height:300px; background:red;} 在IE6中显示如下图:
在IE7、IE8、FF中显示如下图:
但是如果我们在#wai中加上overflow:hidden; 显示就会变化了,nei的宽高自动的被隐藏掉了。 总之,当我们没有给wai这个div设置高度的时候,nei这个div的高度,就会撑开wai这个div,而在另一个方面,我们要注意到的是,当我们 给wai这个div加上一个高度值,那么无论nei这个div的高度是多少,wai这个高度都是我们设定的值。而当nei的高度超过wai的高度的时候, 超出的部分就会被隐藏。这就是隐藏溢出的含义! 功能2、消除浮动 当nei这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了wai这个div,也就是说,此时的nei的宽高是多少, 对于已经脱离了的wai来说,都是不起作用的。当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给wai这个div加上overflow:hidden这个属性的时候,其中的nei等等带浮动属性的div的在这个立体的浮动已经被清除了。
|
CSS中:overflow:hidden的作用的更多相关文章
- 转:css中overflow:hidden 不起作用了吗?
css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- CSS中overflow:hidden
CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...
- css 中 overflow: hidden清楚浮动的真正原因
1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动 <!DOCTYPE html> <html> < ...
- 关于css中overflow:hidden的使用
overflow:hidden有两个用处经常用到: 1.通过设定自身的高度,加上overflow:hidden可以隐藏超过容器本身的内容: 但是,小编在以往的使用中,发现了一个问题,只要父级容 ...
- CSS中zoom:1的作用 ,小标签大作用
CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...
- CSS中zoom:1的作用
兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题.比如,本站使用DIV做一行 ...
- (转载)CSS中zoom:1的作用
CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...
- CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...
- 对CSS了解-overflow:hidden
overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css"> .wrap {;backgro ...
随机推荐
- oracle数字返回为字符串时小时点前面的0缺失的问题
SELECT 0.001||'' from dual UNION SELECT TO_CHAR(0.001||'','fm999990.99999') from dual;
- 12. KEY_COLUMN_USAGE
12. KEY_COLUMN_USAGE KEY_COLUMN_USAGE表描述哪些键列具有约束. KEY_COLUMN_USAGE表有以下列: CONSTRAINT_CATALOG :约束所属目录的 ...
- 一个关于vue+mysql+express的全栈项目(四)------ sequelize中部分解释
一.模型的引入 引入db.js const sequelize = require('./db') sequelize本身就是一个对象,他提供了众多的方法, const account = seque ...
- centos7 ftp 500 OOPS: cannot change directory:/var/ftp/xutong/
在设置多用户登录的时候 该指定的用户xutong对于上级目录/var/ftp 没有访问权限 修改一下上级目录的权限 chmod /var/ftp 对于ftp多用户访问的配置修改也做一个记录 以是设置F ...
- Python数据结构--搜索树
''' 二叉搜索树(BST)是一棵树,其所有节点都遵循下述属性 - 节点的左子树的键小于或等于其父节点的键. 节点的右子树的键大于其父节点的键. 因此,BST将其所有子树分成两部分; 左边的子树和右边 ...
- NOIP2009T3最优贸易(Dfs + spfa)
洛谷传送门 看到这个题,原本想先从后往前dfs,求出能到终点的点,再在这些点里从前往后spfa,用一条边上的两个城市的商品价格的差来作边权,实施过后,发现图中既有负边权,又有回路,以及各种奇奇怪怪的东 ...
- 对于2-sat问题的求解
一.O(n+m) 暴力不多说 二.O(m) 1.构图 2.求图的极大强连通子图 3.把每个子图收缩成单个节点,根据原图关系构造一个有向无环图 4.判断是否有解,无解则输出(退出) 5.对新图进行拓扑排 ...
- 【思维+贪心】codeforces Game of the Rows
http://codeforces.com/contest/839/problem/B [题意] 给定n组人,告诉每组人的人数,这些人要在飞机上坐座位 飞机上座位的分布看图可以知道,12 3456 ...
- UML的关联(Association), 聚合(Aggregation), 组合(Composition)区别
转载:http://blog.csdn.net/ocean181/article/details/6117369 UML的关联(Association), 聚合(Aggregation), 组合(Co ...
- poj3648,2-sat求解
关键是题意的理解,英语,有时候明明每个字都认识,但是还是理解错误!哎!!悲剧啊!题意啊! 这是关键!开始误理解为n对新娘郞,非也!是只有一对,其他是夫妇,理解后就好做了,建立图 是关键,怎么转化关系, ...