关于overflow:hidden (转)
关于overflow:hidden
(本文只针对hidden这个值的用处进行阐述)
关于overflow:hidden;很多人都知道他是溢出隐藏的一个属性,但是并不是很多人知道它的一些神奇的地方!首先先讲一下众所周知的溢出隐藏吧!
溢出隐藏
一般会遇到的情况是内容超出了父级盒子,如下:
使用overflow:hidden;之后,显示就是这样的:
哪里超出就隐藏哪里!一般会用在一行文本超出固定宽度就隐藏超出的内容,但是这种情况一般会和省略号一起配合使用,超出位置显示省略号(是一行文本才有效哦):
1
2
3
4
5
6
7
8
9
|
.box { width : 200px ; height : 50px ; margin : 200px auto ; background : #ccc ; overflow : hidden ; text- overflow : ellipsis; white-space : nowrap ; } |
1
|
< div class="box"> 我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本 </ div > |
使用这种方式的话,盒子一定要是块级盒子,并且有宽度哦!
以上只是说了它本身溢出隐藏的功能,那么接下来说一下它奇特的一些功能!
overflow:hidden;清除浮动
布局的时候肯定会有一种情况,在一个父级盒子中,有左右浮动的两个子级盒子,也就是常见的左右布局,但是子级的内容不定,会多也会少,这个时候父级就不能给一定的高度,而是根据子级的内容的多少来改变,如果不给高度,那么页面就会有塌陷的问题,什么是父级塌陷的问题呢?我们先来了解一下!
首先下面这个是父级(红色的盒子)给了一定的高度,并且左右两个子级浮动,显示布局是没有问题的,
但是现在我们想的是,right里面的内容增加,那么父级盒子应该一起增高,并且将footer部分顶下去,那么就不给红色父级高度,让父级自适应,这个问题大家一般会想到删除高度,但是问题就来了:
相信很多人在写页面的时候都会遇到这个类似的问题,那这个问题就是父级塌陷了!我们可以看到红色的父级不再显示,然而footer部分跑到了红色盒子的两个子级的下面去了。可以这么通俗的去理解:两个子级因为浮动的关系,脱离了标准流,但是父级没有给高度,父级就认为它没有任何内容,所以高度就不会被内容撑开,相当于父级的高度是0px;那么跟他平级的盒子footer,就会按照标准流的排布,紧挨着平级的红色盒子排着下来,只是红色的盒子高为0而已。这个就造成了页面的塌陷!那么这个是时候就要靠overflow:hidden;发挥它的作用了!我们先加上它看看什么效果:
这种情况是完全没有给父级加高度,只是加了一个overflow:hidden;如果这个时候我们同样不给浮动的右盒子高度,让它靠自己的内容撑开,就想列表新闻一样,列表多了,盒子就大了,那么红色的父级也会跟着增高的
假设right内容有点少
现在增加right
现在可以看到父级随着子级的内容的多少而改变高度,对布局不造成任何影响!
如果你在ie比较低版本的浏览器中使用overflow:hidden;也不能达到这样的效果,那么就加上 zoom:1;
所以为了让兼容性更好的话,如果使用overflow:hidden;来清除浮动,解决父级塌陷这个问题的话,建议配合 zoom:1;来使用,即:overflow:hidden;zoom:1;
解决插入图片时的底部留白问题!
插入图片时,如果存放图片的父级盒子没有给高度,那么父级盒子根据图片高度撑开,并且会多出几像素,例如:
底部那个红色就是父级盒子box的背景色,那么处理办法有:
1、给父级加一个高度height,和图片一样高,并且添加overflow:hidden;这两个一起添加,兼容性会更好一些!
2、如果我们不需要给盒子添加高度,让其自适应图片高,那么我们可以给img添加display:block;
如果本文对你有帮助,记得推荐一下哦!
关于overflow:hidden (转)的更多相关文章
- overflow:hidden与margin:0 auto之间的冲突
相对于父容器水平居中的代码margin:0 auto与overflow:hidden之间存在冲突.当这两个属性同时应用在一个DIV上时,在chrome浏览器中将无法居中.至于为啥我也不明白.
- 移动端浏览器body的overflow:hidden并没有什么作用
今天突然遇到一个问题,使用li模拟select,但是碰到一个很尴尬的问题,给body加了overflow:hidden,但是body并没有禁止滚动条,滚动条依旧顺滑. <!DOCTYPE htm ...
- 解决overflow:hidden在安卓微信页面没有效果的办法
在做h5移动端时候,发现overflow: hidden;在安卓微信页面失效问题,经研究和实验,用第三种方法和第四种方法可以解决! 1.完全隐藏 在<boby>里加入scroll=&quo ...
- 在ie7中overflow:hidden失效问题及解决方案
css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
- overflow:hidden清楚浮动的影响
在网页布局中有时会遇到这种情况: 如果左边用<dt>,右边用<dd>,放在一行显示,<dt>要设置float:left,这个应该都知道,问题是,第一行这样做没有问题 ...
- 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]
深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...
- 父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;
父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;
- 为什么我们要给父级元素写overflow:hidden
有这样的一种情况,有的时候,我们的父级元素设置了高度,一般来说,父级元素的高度是根据子元素的高度来自适应撑开的,如果我们的父级元素也设置了高度,那么其高度就不会随着子元素的的大小而自适应,也许有的时候 ...
- inline-block元素overflow:hidden对齐问题
inline-block元素设置overflow:hidden后,其本身会上移 解决方法:在该元素或其父元素上设置vertical-align:bottom 原因解释:inline-block元素被设 ...
- IE6,IE7上设置body{overflow:hidden;}失效Bug
IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...
随机推荐
- Python:笔记(1)——基础语法
Python:笔记(1)——基础语法 我很抱歉有半年没有在博客园写过笔记了,客观因素有一些,但主观原因居多,再多的谴责和批判也都于事无补,我们能做的就是重振旗鼓,继续出发! ——写在Python之前 ...
- java 类中定义接口的调用方法
public class Human { public interface MyAction { public void getPower(); } } public class Test{ publ ...
- linux中添加PHP的mongoDB支持扩展
最近使用ThinkPHP连接mongoDB数据库进行增删改查,在使用之前,需要PHP本身支持对mongoDB的连接,下面是我安装PHP的mongoDB扩展的方法 wget -c http://pecl ...
- 手机端网页web开发要点
1.初始化 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- css判断iphoneX、iphoneXs、iphoneXs Max、iphone XR
//iphoneX.iphoneXs @media only screen and (device-width: 375px) and (device-height: 812px) and (-web ...
- DB2常见错误
+098 01568 动态SQL语句用分号结束+100 02000 没有找到满足SQL语句的行+110 01561 用DATA CAPTURE定义的表的更新操作不能发送到原来的子系统+111 0159 ...
- CentOS7 + Python3 + Django(rest_framework) + MySQL + nginx + uwsgi 部署 API 开发环境, 记坑篇
CentOS7 + Python3 + Django(rest_framework) + MySQL + nginx + uwsgi 部署 API 开发环境 CentOS7 + Python3 + D ...
- DELPHI-Delphi常用类型及定义单元
DELPHI-Delphi常用类型及定义单元 Type Unit Date SysUtils DeleteFile SysUtils or Windows (different versions) D ...
- Mysql: 强制走索引:mysql between 日期索引 索引问题-日期索引使用
Mysql: mysql between 日期索引 索引问题-日期索引使用 表结构: dep_date dep arr 联合索引: ind_coll_date_route (dep_date ,de ...
- JS中的forEach、$.each、map方法推荐
下面小编就为大家带来一篇JS中的forEach.$.each.map方法推荐.小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 orEach是ECMA5中Array新方法中最 ...