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元素,所以我们应当合理使用 ...
随机推荐
- 细说SSO单点登录
什么是SSO? 如果你已知道,请略过本节! SSO核心意义就一句话:一处登录,处处登录:一处注销,处处注销.即:在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. 很多人容易把SS ...
- Go语言实战
作者:Jack47 转载请保留作者和原文出处 欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 本文通过从无到有创建一个利用Go语言实现的非常简单的HttpServe ...
- js中几种实用的跨域方法原理详解（转）
今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...
- Entity Framework 6 Recipes 2nd Edition（13-5）译 -> 使POCO的修改追踪更高
问题 你正在使用POCO,你想提高修改跟踪的性能,同时使内存消耗更少.另外,你想通过EF的CodeFirst方式来实现. 解决方案 假设你有一个关于Account(帐户)和相关的Payments(支付 ...
- Alcatraz 的安装和删除
Xcode 所有的插件都安装在目录: ~/Library/Application Support/Developer/Shared/Xcode/Plug-ins/ 你也可以手工切换到这个目录来删除插件 ...
- js文章列表的树形结构输出
文章表设计成这样了 后端直接给了无任何处理的json数据,现在要前端实现树形结构的输出,其实后端处理更简单写,不过既然来了就码出来 var doclist = [{ "id": 1 ...
- 用php生成一个excel文件（原理）
1.我们用php来生成一个excel文档来讲述其原理: excel2007里面的文档目录组成部分为: 2.我们使用ZipArchive()方法来生成一个简易的excel文件. 使用方法: 3.代码如下 ...
- jquery.fn.extend与jquery.extend--（初体验二）
1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ a ...
- ASP.NET Core管道深度剖析（4）：管道是如何建立起来的？
在<管道是如何处理HTTP请求的?>中,我们对ASP.NET Core的请求处理管道的构成以及它对请求的处理流程进行了详细介绍,接下来我们需要了解的是这样一个管道是如何被构建起来的.这样一 ...
- DDD 领域驱动设计－谈谈 Repository、IUnitOfWork 和 IDbContext 的实践（2）
上一篇:<DDD 领域驱动设计-谈谈 Repository.IUnitOfWork 和 IDbContext 的实践(1)> 阅读目录: 抽离 IRepository 并改造 Reposi ...