overflow:hidden作用能治住塌陷_html溢出隐藏代码

overflow:hidden作用能治住塌陷_html溢出隐藏代码一.overflow:hidden溢出隐藏给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。/*css样式*/<styletype=”text/css”>div{width:150px;height:60px;background:skyblue; overflo…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

一. overflow:hidden  溢出隐藏

给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。

/*css样式*/
<style type="text/css">
    div{ width: 150px; height: 60px; background: skyblue;
	 overflow: hidden;  /*溢出隐藏*/
       }
</style>

/*html*/
<div style="">
    今天天气很好!<br>今天天气很好!<br>
    今天天气很好!<br>今天天气很好!<br>
</div>

Jetbrains全家桶1年46,售后保障稳定

效果如下:

overflow:hidden作用能治住塌陷_html溢出隐藏代码

一般情况下,在页面中,一般溢出后会显示省略号,比如,当一行文本超出固定宽度就隐藏超出的内容显示省略号。

/*只适用于单行文本*/
div{ 
    width: 150px;
    background: skyblue;
    overflow: hidden;      /*溢出隐藏*/
    white-space: nowrap;	/*规定文本不进行换行*/
    text-overflow: ellipsis;	/*当对象内文本溢出时显示省略标记(...)*/
}

效果如下:

overflow:hidden作用能治住塌陷_html溢出隐藏代码

二. overflow:hidden  清除浮动

一般而言,父级元素不设置高度时,高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0。那么问题来了,如下:

/*css样式*/
<style type="text/css">
    .box{ background:skyblue; }
    .kid{ width: 100px;height: 100px; float:left;}
    .kid1{ background: yellow; }
    .kid2{ background: orange; }
    .wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>

/*html*/
<body>
    <div class="box">
        <div class="kid kid1">子元素1</div>
	<div class="kid kid2">子元素2</div>
    </div>
    <div class="wrap">其他部分</div>
</body>

overflow:hidden作用能治住塌陷_html溢出隐藏代码

如上,由于父级元素没有高度,下面的元素会顶上去,造成页面的塌陷。因此,需要给父级加个overflow:hidden属性,这样父级的高度就随子级容器及子级内容的高度而自适应。如下:

由于在IE比较低版本的浏览器中使用overflow:hidden;是不能达到这样的效果,因此需要加上 zoom:1;

所以为了让兼容性更好的话,如果需要使用overflow:hidden来清除浮动,那么最好加上zoom:1;

/*css样式*/
<style type="text/css">
    .box{ background:skyblue; 
	  overflow: hidden;  /*清除浮动*/
	  zoom:1;
        }
    .kid{ width: 100px;height: 100px; float:left;}
    .kid1{ background: yellow; }
    .kid2{ background: orange; }
    .wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>

/*html*/
<body>
    <div class="box">
        <div class="kid kid1">子元素1</div>
	<div class="kid kid2">子元素2</div>
    </div>
    <div class="wrap">其他部分</div>
</body>

 overflow:hidden作用能治住塌陷_html溢出隐藏代码

三. overflow:hidden  解决外边距塌陷

父级元素内部有子元素,如果给子元素添加margin-top样式,那么父级元素也会跟着下来,造成外边距塌陷,如下:

/*css样式*/
<style type="text/css">
    .box{ background:skyblue;}
    .kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
</style>

/*html*/
<body>
    <div class="box">
	<div class="kid">子元素1</div>
    </div>
</body>

overflow:hidden作用能治住塌陷_html溢出隐藏代码

因此,给父级元素添加overflow:hidden,就可以解决这个问题了。

/*css样式*/
<style type="text/css">
    .box{ background:skyblue;
          overflow: hidden; /*解决外边距塌陷*/   
        }
    .kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
</style>

/*html*/
<body>
    <div class="box">
	<div class="kid">子元素1</div>
    </div>
</body>

overflow:hidden作用能治住塌陷_html溢出隐藏代码

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:http://www.javaforall.cn/234718.html原文链接:http://www.javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 如何制作一个简单的HTML登录页面(附代码)

    如何制作一个简单的HTML登录页面(附代码)几乎每个网站都会有登录页面,那你知道如何写HTML登录页面吗?这篇文章就和大家分享一个HTML简单登录界面的代码,有一定的参考价值,感兴趣的朋友可以看看。实例:制作一个HTML登录页面,包含邮箱,登录密码,立即注册,忘记密码等,代码如下:HTML部分:<divclass=”dowebok”><divclass=”logo”></div><divclass=”form-item”><inputid=”username”t

  • UHF与VHF_美官员承认乌克兰有美军事人员

    UHF与VHF_美官员承认乌克兰有美军事人员Veryhighfrequency(VHF)(甚高频)是指频带由30MHz到300MHz的无线电电波。VHF多数是用作电台及电视台广播,同时又是航空和航海的沟通频道。特高频UltraHighFrequency(UHF)是指频率为300~3000MHz,波长在1m~1dm的无线电波。这个频段的无线电波常用于广播电视领域。我国广播电视在这个频段使用470到806MHz。

  • java.lang.String cannot be cast to com.alibaba.fastjson.JSONObject解决办法

    java.lang.String cannot be cast to com.alibaba.fastjson.JSONObject解决办法java.lang.ClassCastException:java.lang.Stringcannotbecasttocom.alibaba.fastjson.JSONObjectatcom.alibaba.fastjson.JSONObject.getJSONObject(JSONObject.java:109)ResultModel>rs=

  • LRC格式转换

    LRC格式转换[code="java"]importjava.io.BufferedReader;importjava.io.FileInputStream;importjava.io.FileNotFoundException;importjava.io.IOException;importjava.io.InputStreamReader;importjava.util.Co…

    2022年10月22日
  • 关于父进程和子进程的关系(UAC 绕过思路)

    关于父进程和子进程的关系(UAC 绕过思路)

  • 网络通信中 TCP 产生 RST 的三个条件分析

    网络通信中 TCP 产生 RST 的三个条件分析RST是TCP发生错误时发送的一种TCP分节(segment:传输层的PDU),可用来异常的关闭一个连接,此时客户端会返回一个ECONNREFUSED错误。它会在以下三种情况下产生:目的地为某个端口的SYN到达服务器,但并没有服务器在该端口监听。TCP想取消一个已有连接,即异常地关闭连接。TCP接收到一个根本不存在的连接上的分节。第一种情况可能有如下…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号