css:overflow属性妙用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.d1{
background-color: red;
overflow: hidden;
/*ie比较低版本的浏览器中,加上 zoom:1;*/
zoom:1;
}
.d1_1{
background-color: red;
}
.left{
background-color: yellow;
width: 100px;
height: 50px;
float: left;
}
.right{
float: right;
width: 100px;
height: 80px;
background-color: green;
}
.d2{
background-color: black;
width: 100%;
height: 10px;
}
</style>
</head>
<body>
<div style="width:200px;height:20px;margin-top:0px;">问题重现：</div>
<div class="d1_1">
<div class="left"></div>
<div class="right">
</div>
</div>
<div class="d2"></div>
<div style="width:200px;height:20px;margin-top:100px;">问题解决：</div>
<div class="d1">
<div class="left"></div>
<div class="right">
</div>
</div>
<div class="d2"></div>
<div style="width:100px;height:100px;border:1px solid black;margin-top:10px;overflow:hidden">问题所在：问题所在：问题所在：问题所在：问题所在：问题所在：问题所在：问题所在：问题所在：</div>
<div style="
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:100px;
border:1px solid black;
margin-top:10px;">
用法2：隐藏文字
</div>
<div style="margin-top:10px;">问题所在：div的高度比图片高出一点点</div>
<div style="background-color:red;overflow:hidden;">
<img src="6.png" alt="">
</div>
<div style="margin-top:10px;">问题解决1：设置div高宽与图片一样，添加：overflow:hidden</div>
<div style="background-color:red;overflow:hidden;height:150px;width:200px;margin-top:10px;">
<img src="6.png" alt="">
</div>
<div style="margin-top:10px;">问题解决2：图片添加样式：display:block</div>
<div style="background-color:red;margin-top:10px;">
<img src="6.png" style="display:block">
</div>
</body>
</html>
css:overflow属性妙用的更多相关文章
- 转：CSS Overflow 属性
原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...
- 前端知识点--CSS overflow 属性
问题:如何加滚动条? 给div 设置css 样式overflow:scroll div { width:150px; height:150px; overflow:scroll; } -------- ...
- CSS overflow 属性
值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. ...
- 了解CSS overflow属性 标签： htmlcss属性 2016-12-31 14:38 75人阅读 评论(1)
overflow属性规定当内容溢出元素框时如何显示. 例:div { width:150px; height:150px; overflow:scroll; } 可能的值有: 值 ...
- CSS Overflow 属性清除浮动
清除浮动 设置overflow的一个更流行的用处是,说也奇怪,清除浮动.设置overflow并不会在该元素上清除浮动,它将清除自己(self-clear).意思就是,应用了overflow(auto或 ...
- overflow属性-摘自网友
关于我们 版权声明 网站地图 前端观察 专注于网站前端设计与前端开发 用IE6抢不到火车票的!!! Home 首页 CSS样式之美 Front News前端资讯 JavascriptAjax与JS技术 ...
- 教你玩转CSS Overflow
CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. <style> #overflowTest { background: #4CAF5 ...
- CSS中的overflow属性
导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...
- 【CSS学习】--- overflow属性
一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...
随机推荐
- iOS开发系列--App扩展开发
概述 从iOS 8 开始Apple引入了扩展(Extension)用于增强系统应用服务和应用之间的交互.它的出现让自定义键盘.系统分享集成等这些依靠系统服务的开发变成了可能.WWDC 2016上众多更 ...
- 阿里云 SDK python3支持
最近的一个项目需要操作阿里云的RDS,项目使用python3,让人惊讶的是官方的SDK竟然只支持python2 在阿里云现有SDK上改了改,文件的修改只涉及aliyun/api/base.py,详见h ...
- C#设计模式-中介者模式
在现实生活中,有很多中介者模式的身影,例如QQ游戏平台,聊天室.QQ群和短信平台,这些都是中介者模式在现实生活中的应用,下面就具体分享下我对中介者模式的理解. 一. 中介者(Mediator)模式 从 ...
- WCF学习之旅—WCF服务的批量寄宿（十三）
上接 WCF学习之旅—WCF服务部署到IIS7.5(九) WCF学习之旅—WCF服务部署到应用程序(十) WCF学习之旅—WCF服务的Windows 服务程序寄宿(十一) WCF学习之旅—WCF ...
- Spring学习记录(十二)---AOP理解和基于注解配置
Spring核心之二:AOP(Aspect Oriented Programming) --- 面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软 ...
- Microsoft Build 2016 Day 1 记录
去年今日:Microsoft Build 2015 汇总 今年的 Bulid 时间是 3.30-4.1,第一天的主角主要是 Windows 10.人工智能.HoloLens.小娜等,详细介绍:3 分钟 ...
- OCP考点实战演练02-日常维护篇
本系列宗旨:真正掌握OCP考试中所考察的技能,坚决不做Paper OCP! 实验环境:RHEL 6.4 + Oracle 11.2.0.4 OCP考点实战演练02-日常维护篇 1.数据库体系结构和AS ...
- 设计模式--观察者模式初探和java Observable模式
初步认识观察者模式 观察者模式又称为发布/订阅(Publish/Subscribe)模式,因此我们可以用报纸期刊的订阅来形象的说明: 报社方负责出版报纸. 你订阅了该报社的报纸,那么只要报社发布了新报 ...
- web开发调试神器——fiddler的使用
好累 以后再写 http://docs.telerik.com/fiddler/knowledgebase/autoresponder
- 【十大经典数据挖掘算法】SVM
[十大经典数据挖掘算法]系列 C4.5 K-Means SVM Apriori EM PageRank AdaBoost kNN Naïve Bayes CART SVM(Support Vector ...