CSS3:overflow属性详解

article/2025/8/22 12:55:32

1.Overflow

overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来;

如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto;

overflow:auto 属性如果超出就出现滚动条,没有超出则不出现滚动条这样就可以出现滚动条,

滚动条也可以单独设置,例如overflow-x:hidden;overflow-y:auto;这样就只能看见垂直方向的滚动条了。如果单独定义x轴或者y轴的时候,两个属性都需设置属性值。

原始效果:

1.添加overflow:hidden;属性,效果:

可以看到,overflow:hidden会把超出盒子的部分隐藏,也可以理解为切断。

2.添加overflow-x:hidden;overflow-y:auto属性

属性设为overflow-x:auto;overflow-y:hidden;与上图效果正好相反,即滚动条侧边隐藏,会出现在底部。


2.overflow的常见属性值

Overflow属心常见的有四个:visible,hidden,auto和scroll;

visible为overflow 的默认值,为超出显示;

hidden为超出隐藏;

auto为自动,即超出会出现滚动条, 不超出就没有滚动条;

scroll为内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。


3.overflow的神奇用法

第一种用法:解决margin-top的传递问题

margin-top的传递问题:子元素的margin-top会把父元素一起带下来,给父元素加overflow:hidden即可解决

第二种用法:清除浮动带来的影响  --- 父元素高度塌陷

万能清除法

overflow:hidden

clear:both

第三种用法:显隐动画  --- 超出隐藏

第四种用法:单行文本超出省略

.sl{white-space:nowrap;/*不换行*/overflow:hidden;/*超出隐藏*/text-overflow:ellipsis;/*超出省略*/width:;}

注意要设置宽度


好啦,以上就是小谭今天要分享的内容啦,如果有什么写的不好的地方欢迎各位大佬指点一二,小谭不胜荣幸!啾咪~


http://chatgpt.dhexx.cn/article/ruSNLtlB.shtml

相关文章

组播基础(一)

一.为什么需要组播 IPV4包含三种数据传送方式:单播,广播和组播。其中单播在传送数据时,主机和客户端之间进行一对一的通信,如果有多台客户端请求相同的数据,主机需要逐一发送多次。在客户端数量较少时,这种重复是可以接受的,当客户端数量过多时,网络带宽将无法支撑。…

组播详解

组播协议允许将一台主机发送的数据通过网络路由器和交换机复制到多个加入此组播的主机,是一种一对多的通讯方式。 IP组播的好处、优势 组播协议与现在广泛使用的单播协议的不同之处在于,一个主机用单播协议向 n 个主机发送相同的数据时,发送主…

组播原理

组播原理 1.概述 想对于单播,广播方式减少了发送源的处理,降低发送源的负荷.但是采用广播方式,网络中所有主机都会收到广播数据,而不管是否需要接收.这样不仅数据的安全性得不到保证&#xff…

华为 组播之IGMPv1

我是艺博东 ,一个正在努力学IT的码农;好了,话不多说,我们直接进入正文。 文章目录 一、拓扑二、基本配置与分析三、小结四、通用组查询报文 一、拓扑 二、基本配置与分析 AR-1 [Huawei]sysname AR-1 [AR-1] [AR-1]int g0/0/0 […

组播是什么

组播是什么 IPV4:单播 组播 广播 IPV6:单播 组播 任播 单播:一对一,随着接收用户的增多,增加服务器和链路带宽的压力。 单播的优点:保证流量只发送给有需要的接收者 广播:一对ALL&#xff…

IP组播的基本概念

IP组播的基本概念 原理概述: IANA(Internet Assigned Numbers Authority)将IP地址分成了A、B、C、D、E5类,其中的D类为组播IP地址,范围是224.0.0.0-239.255.255.255。 一个IP报文,其目的地址如果是单播IP地址,则被称为…

组播技术

1 概述 1.1 产生背景 传统的IP通信有两种方式:一种是在源主机与目的主机之间点对点的通信,即单播;另一种是在源主机与同一网段中所有其它主机之间点对多点的通信,即广播。如果要将信息发送给多个主机而非所有主机,…

组播协议详解

组播详解 1.组播基础(1)组播简介(2)组播的地址(3)组播的MAC地址(4)组播的MAC地址(5)反向转发路径—RPF 2.IGMP(1)简介(2&a…

组播基本概念讲解

目录 单播、广播、组播的区别 组播网络 组播网络设备 组播网络架构 组播IP地址 组播模型——2种模型 组播IP报文 组播IP与MAC映射规则 组播MAC与单播MAC区分 单播、广播、组播的区别 单播:一对一。 源发送一份单播报文,只能被单个主机接收 广…

交换机组播协议-二层组播/三层组播总结

一、组播介绍: 组播技术解决的是以最小的网络开销实现单点发送,多点接收的问题。就实现点对多点数据传输问题,比广播/单播传输更高效,更能节省网络带宽,降低网络负载。 当ip网络中某Rx主机需要接收信息时,若…

广播、组播、点播的区别

今天学习的时候发现了广播、组播、点播这三个用来描述网络节点之间通讯方式的术语,那么这几种“播”到底有什么区别?于是乎百度总结了一下。 ----------------------------------点播 ---------------------------------- “点播”是一种形式的单播&…

IP组播介绍

IP组播通信指的是IP报文从一个源发出,被转发到一组特定的接收者。相对于单播和广播,IP组播可以有效地节约网络带宽、降低网络负载,避免广播堵塞带来的诸如摄像头花屏,视频马赛克等问题,所以被广泛应用于IPTV、实时数据…

广播和组播

概述 网络信息传输主要有4种方式:单播(unicast)、任播(anycast)、组播(multicast)和广播(broadcast)。广播和组播为应用程序提供了两种服务:数据分组交付至多…

华为 组播理论知识

如果一个人走在正确的道路上,有目标并努力着,且思想没有问题、态度端正,相信总有一天能达到成功的彼岸;因为人生就像一场马拉松长跑,,它并不在乎你比别人先跑一步,或者晚跑一步。 我是艺博东 ,一…

浅议组播(一文看懂组播)

今天简单的写一下组播的实现过程,主要是给0基础同学阅读。本文力图用最简单的语言描绘组播的大致实现过程。 一、背景 计算机网络中存在三种形式的报文——单播、广播和组播。顾名思义,单播就是发往指定的目的地址,广播就是发放广播域内所有…

什么是组播地址

组播地址 前言 “组播并不像单播,有一个明确的目的主机和IP地址,也不像广播,局域网内的所有主机都是目的主机,广播IP地址也明确(主机标识全部置为1)。组播不同,它并不知道要把信息发给谁&…

一文了解什么是组播

组播简介 前言 “数据源向特定的多个接收端发送相同的数据时,如果采用单播,数据源需要分多次发送。如果采用广播,广播域内所有主机都能收到。而如果采用组播,只需要发送一份数据给组播路由器,由组播路由器根据组播组…

组播详解及示例代码

写在前面 由于公司业务需要用到组播实现,这里就记录下学习过程。在学习组播之前,我们先来看看另外两种数据包传输方式:单播和广播。 单播:简单来说就是数据一对一发送,如果需要给多个主机发送数据时,就需…

组播的简单介绍

一、组播部署背景 1、广播方式部署点到多点应用 广播方式所存在的问题: ①地域范围限制 ②安全性无法保障 ③有偿性无法保障 2、单播方式部署点到多点应用 单播方式所存在的问题: ①重复流量过多 ②消耗设备和链路带宽资源 ③难以保证传输质量 3、组播方…

什么是组播-网工必会的组播基础概念详解

什么是组播-网工必会的组播基础概念详解 什么是组播?组播方式解决了单播情况下数据的重复拷贝及带宽的重复占用,也解决了广播方式下带宽资源的浪费,下面腾科教育小编给大家科普一些网工必会的组播基础概念详解。 单播一对多通信场景 1.在单播(Unicast)通信中每一个…