css:overflow属性妙用
2016-07-05 16:08
330 查看
<!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>
<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>
相关文章推荐
- html+css课堂笔记
- css选择器
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题
- transform(变形)和transform-origin(变形原点)-Css3演示
- css常用的简写
- CSS实现单行、多行文本溢出显示省略号(…)
- getComputedStyle与currentStyle获取样式(style/class)
- css定位中position:absolute与float的区别
- CSS 高端进阶 - LESS
- css 块状元素和行内元素
- CSS选择器总结
- CSS改变placeholder的颜色
- CSS-overflow溢出
- CSS设置文字字体
- CSS动画硬件加速
- CSS设置文字大小
- CSS的注释与继承
- css-float,clear
- CSS选择器的声明与嵌套
- transform知识【学习总结】