我要投稿
投诉建议
首页
传统文化
武术天地
编程技术
好听音乐
养生中医
智慧人生
常用工具
写作园地
影视娱乐
php专栏
道德经专栏
您当前的位置:
首页
>
编程技术
overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等等)
时间:2021-07-26 10:38:44 来源:网络 编辑:本站 点击:
一. overflow:hidden 溢出隐藏
给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。
/*css样式*/
<style type="text/css">
div{ width: 150px; height: 60px; background: skyblue;
overflow: hidden; /*溢出隐藏*/
}
</style>
/*html*/
<div style="">
今天天气很好!<br>今天天气很好!<br>
今天天气很好!<br>今天天气很好!<br>
</div>
效果如下:
一般情况下,在页面中,一般溢出后会显示省略号,比如,当一行文本超出固定宽度就隐藏超出的内容显示省略号。
/*只适用于单行文本*/
div{
width: 150px;
background: skyblue;
overflow: hidden; /*溢出隐藏*/
white-space: nowrap; /*规定文本不进行换行*/
text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记(...)*/
}
效果如下:
二. overflow:hidden 清除浮动
一般而言,父级元素不设置高度时,高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0。那么问题来了,如下:
/*css样式*/
<style type="text/css">
.box{ background:skyblue; }
.kid{ width: 100px;height: 100px; float:left;}
.kid1{ background: yellow; }
.kid2{ background: orange; }
.wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>
/*html*/
<body>
<div class="box">
<div class="kid kid1">子元素1</div>
<div class="kid kid2">子元素2</div>
</div>
<div class="wrap">其他部分</div>
</body>
如上,由于父级元素没有高度,下面的元素会顶上去,造成页面的塌陷。因此,需要给父级加个overflow:hidden属性,这样父级的高度就随子级容器及子级内容的高度而自适应。如下:
由于在IE比较低版本的浏览器中使用overflow:hidden;是不能达到这样的效果,因此需要加上 zoom:1;
所以为了让兼容性更好的话,如果需要使用overflow:hidden来清除浮动,那么最好加上zoom:1;
/*css样式*/
<style type="text/css">
.box{ background:skyblue;
overflow: hidden; /*清除浮动*/
zoom:1;
}
.kid{ width: 100px;height: 100px; float:left;}
.kid1{ background: yellow; }
.kid2{ background: orange; }
.wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>
/*html*/
<body>
<div class="box">
<div class="kid kid1">子元素1</div>
<div class="kid kid2">子元素2</div>
</div>
<div class="wrap">其他部分</div>
</body>
三. overflow:hidden 解决外边距塌陷
父级元素内部有子元素,如果给子元素添加margin-top样式,那么父级元素也会跟着下来,造成外边距塌陷,如下:
/*css样式*/
<style type="text/css">
.box{ background:skyblue;}
.kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
</style>
/*html*/
<body>
<div class="box">
<div class="kid">子元素1</div>
</div>
</body>
因此,给父级元素添加overflow:hidden,就可以解决这个问题了。
/*css样式*/
<style type="text/css">
.box{ background:skyblue;
overflow: hidden; /*解决外边距塌陷*/
}
.kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
</style>
/*html*/
<body>
<div class="box">
<div class="kid">子元素1</div>
</div>
</body>
点赞 57
————————————————
版权声明:本文为CSDN博主「星星之火M」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文https://blog.csdn.net/qq_41638795/article/details/83304388
点赞
返回
发表评论
共有
条评论
用户名:
密码:
验证码:
匿名发表
栏目导航
●
|
传统文化
|
武术天地
|
编程技术
|
好听音乐
|
养生中医
|
智慧人生
|
常用工具
|
写作园地
|
影视娱乐
|
php专栏
|
道德经专栏
|
最新推荐
python内建函数大…
点击按钮(button)…
帝国cms网络视频引…
相关文章
栏目更新
栏目热门
友情链接
帝国CMS
b站视频解析
哔哩哔哩
5sing音乐
劝学网
易文言
php中文网
喜马拉雅
引用视频
代码段生成
道医书库
墨鱼部落格
妍婷姝专辑
中华武术
周易全文
星座123
好看视频
汉程测试
桃花仙人
b站解析(91666)
菜鸟教程
小甲鱼学习计划
太极剑视频
零基础学Python
零基础学Web
零基础学汇编
数据结构和算法
网易云课堂
小甲鱼答案
Python 标准库
360图书馆
天涯知识库
emmet
传智播客
21世纪视频
超星视频
我爱自学网
51cto学院
极客学院
外唐教程网
CSDN
千字文
小不点
emmet文档
emmet手册
HTML中文网
U钙网LOGO
w3cschool
博客园
找盘网
前沿视频
百度技术
百度智能
腾讯课堂
慕课网
邢帅教育
网易公开课
大学生自学网
千锋教育视频
教程之家
北风网
渡一教育腾讯课堂
渡一教育
小甲鱼python新视频
鱼C工作室
小甲鱼系列视频
摄图网
爱拍剪辑
爱剪辑
傲软压缩宝
Arctime字幕软件
字幕在线转换器
喜马拉雅音频提取
U盘安装盘制作
我爱卡
汉字五行
五行查询
卜易居
片库网
学堂在线
易通cms
太极拳师师
中医世家
抖音视频解析
快手视频解析
微博视频解析
斗鱼视频解析
虎牙视频解析
左岸抖音歌曲
北京深度矩阵网络
海南息垚
北京深度矩阵
腾牛网
96开发网
创金游戏库
逗游
逗游网
007游戏网
逗游红包游戏
TapTap
网站首页
|
关于我们
|
服务条款
|
广告服务
|
联系我们
|
网站地图
|
免责声明
|
代码运行
|
手机版
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Powered by
家园网www.jy.wang
© 2021-2029