<!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属性妙用的更多相关文章

  1. 转：CSS Overflow 属性

    原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...

  2. 前端知识点--CSS overflow 属性

    问题:如何加滚动条? 给div 设置css 样式overflow:scroll div { width:150px; height:150px; overflow:scroll; } -------- ...

  3. CSS overflow 属性

     值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. ...

  4. 了解CSS overflow属性 标签： htmlcss属性 2016-12-31 14:38 75人阅读 评论(1)

    overflow属性规定当内容溢出元素框时如何显示. 例:div { width:150px; height:150px; overflow:scroll; } 可能的值有: 值           ...

  5. CSS Overflow 属性清除浮动

    清除浮动 设置overflow的一个更流行的用处是,说也奇怪,清除浮动.设置overflow并不会在该元素上清除浮动,它将清除自己(self-clear).意思就是,应用了overflow(auto或 ...

  6. overflow属性-摘自网友

    关于我们 版权声明 网站地图 前端观察 专注于网站前端设计与前端开发 用IE6抢不到火车票的!!! Home 首页 CSS样式之美 Front News前端资讯 JavascriptAjax与JS技术 ...

  7. 教你玩转CSS Overflow

    CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. <style> #overflowTest { background: #4CAF5 ...

  8. CSS中的overflow属性

    导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...

  9. 【CSS学习】--- overflow属性

    一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...

随机推荐

  1. Go build constraints

    Go语言有一个不(奇)错(葩)的设计,就是build constraints(构建约束).可以在源码中通过注释的方式指定编译选项,比如只允许在linux下,或者在386的平台上编译啊之类的:还可以通过 ...

  2. 线程笔记：Future模式

    线程技术可以让我们的程序同时做多件事情,线程的工作模式有很多,常见的一种模式就是处理网站的并发,今天我来说说线程另一种很常见的模式,这个模式和前端里的ajax类似:浏览器一个主线程执行javascri ...

  3. CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能

    CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能 效果图 这是红宝书里的例子,在这个例子中,下述功能全部登场,因此这个例子可作为使用Compute Shader的典型 ...

  4. TODO：数据库优化之分页

    TODO:数据库优化之分页 本文的例子是以MongoDB数据库为准,其它数据库各位也可以举一反三进行优化. 在MongoDB中分页使用 a.skip(n)跳过前n个匹配的文档: b.limit(m)返 ...

  5. SiteMap 提交，并使用正确的方式提交给搜索引擎

    原创Sitemap收录介绍 对于网站中原创内容的网页url,站长可以将其制作成标准的Sitemap(站点地图)文件. 站长提交Sitemap文件后,好搜会使用Sitemap中的内容来了解网站结构等信息 ...

  6. salesforce 零基础学习（五十四）常见异常友好消息提示

    异常或者error code汇总:https://developer.salesforce.com/docs/atlas.en-us.api.meta/api/sforce_api_calls_con ...

  7. 【转】string.Format对C#字符串格式化

    转自:http://blog.csdn.net/samsone/article/details/7556781 1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) str ...

  8. Notes:SVG(3)---滤镜和渐变

    SVG滤镜使用filter标签来定义,该标签必须嵌套在defs元素里面,并且必须指定一个ID,以供引用. 在 SVG 中,可用的滤镜有: feBlend feColorMatrix feCompone ...

  9. Sass：初识Sass与Koala工具的使用

    一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...

  10. 应用层之E-mail服务及javaMail邮件发送的知识总结

    关于Email服务你需要知道的知识点: 概述: 今天来介绍一下应用层的电子邮件服务,我们每天几乎都在用,电子邮件(email)服务也是一种基于C/S模式的服务,它采用的是一种"存储-转发&q ...