码迷,mamicode.com
首页 > 其他好文 > 详细

overflow:hidden的使用

时间:2020-01-04 20:11:27      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:com   width   没有   style   背景   图片   自动隐藏   flow   问题   

(1)overflow:hidden可以用来隐藏溢出的文本内容

给定内容的大小(宽高)超出后自动隐藏

<body>
    <div class="box">
        今天天气好晴朗!处处好风光!<br>
        今天天气好晴朗!处处好风光!<br>
        今天天气好晴朗!处处好风光!<br>
        今天天气好晴朗!处处好风光!<br>
</div>
</body>
<style type="text/css">
    .box{
        background-color: lightblue;
        width: 400px;
        height: 60px;
        margin: 0 auto;
        text-align: center;
    }
</style>
技术图片

 

 加上overflow:hidden后

技术图片

 

 (2)清除浮动:

当父元素没有设置高度时,且父元素内部的子元素全部设置浮动float之后,子元素会全部脱落标准流不展位,所以此时父元素的高度为0,例如:

<style type="text/css">
    .father{
        background-color: black;
    }
    .box{
        width: 50px;
        height: 50px;
            float: left;
    }
    .a{background-color: red;}
    .b{background-color: pink;}
    .c{background-color: blue;}
</style>
 
<body>
<div class="father">
    <div class="box a">1</div>
    <div class="box b">2</div>
    <div class="box c">3</div>
</div>
技术图片

 

 此时父元素背景色设置为black但是并没有显示出来

 加上overflow:hidden之后

技术图片

 

 (3)解决外边距塌陷问题:

<style type="text/css">

.father{
    background-color: black;
}
.box{
    width: 50px;
    height: 50px;
    background-color: red;
    margin-top: 10px;

</style>
<body>
<div class="father">
    <div class="box">1</div>
</div>
</body>
技术图片

 

 此时已经给子元素设置上了外边距 但是并没有效果

给父元素设置overflow:hidden

技术图片

 

 

overflow:hidden的使用

标签:com   width   没有   style   背景   图片   自动隐藏   flow   问题   

原文地址:https://www.cnblogs.com/lcdg/p/12100150.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!