当前位置： 首页 > news >正文

verflow属性的常用值详解

news 2025/9/9 18:11:08

什么是overflow

在CSS中，overflow是“溢出”的意思，该属性规定当内容溢出元素框时发生的事情，设置内容是否会被修剪，溢出部分是否会被隐藏；例如当属性值设置为“visible”则内容不会被修剪，为“hidden”则内容会被修剪并且其余内容是不可见的。当一个元素的内容太大而无法容纳时，我们可以对其进行控制。该元素的属性是overflow，它是overflow-x和overflow-y属性的简写形式。

overflow的属性

overflow：属性支持4个属性，可设置当内容溢出元素框时的4种处理方式：

visible：默认值。内容不会被修剪，会呈现在元素框之外。

hidden：内容会被修剪，并且其余内容是不可见的。

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

auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。与scroll没啥区别

.element{ height: 200px; overflow: [overflow-x] [overflow-y]; 
}

由于overflow是一种简写属性，因此它可以接受一个或两个值。第一个值用于水平轴，第二个值用于垂直轴。
visible，hidden，scroll，auto可以分别设置overflow-x，overflow-y，需要注意的是：当单独设置了overflow-x或者overflow-y为非visible时，另一个属性值默认为auto。

注意: overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。

演示代码：


<!DOCTYPE html>
<html lang="en"><head><style>* {margin: 0;padding: 0;}.wrapper {position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;border: 1px solid #333;border-radius: 10px;color: #424242;overflow: visible;}.content {width: 250px;height: 250px;padding: 20px;border: 1px solid #33f;border-radius: 10px;background-color: rgba(200, 255, 200, 0.5);}</style>
</head><body><div class="wrapper"><div class="content"><p>我们在之前的一本著作中研究群体观念对各国发展的影响时已经指出，每一种文明都是少数几个基本观念的产物，这些观念很少能够得到革新。我们指出，这些观念在群体的心中是多么稳固，要想对这一过程产生影响是多么困难，以及这些观念一旦实现之后所拥有的力量。最后我们又说，历史的波动就是这些基本观念的改变所引发的结果。</p></div></div>
</body></html>

1. visible

效果
在这里插入图片描述

2. hidden：将属性值设置为hidden

效果
在这里插入图片描述

3. scroll：将属性值设置为scroll

效果
在这里插入图片描述

4. auto：将属性值设置为auto

效果
在这里插入图片描述

  1. 设置overflow-x：hidden，不设置overflow-y；

效果

在这里插入图片描述

结果分析：

1：scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。显示 上下的滚动条

2：hidden 超出部分被修剪 不显示

3：auto 自动 超出部分修剪 浏览器会显示滚动条以便查看其余的内容。

4：visible 默认值。内容不会被修剪，超出部分会呈现在元素框之外。

相关文章：

verflow属性的常用值详解

什么是overflow 在CSS中&#xff0c;overflow是“溢出”的意思&#xff0c;该属性规定当内容溢出元素框时发生的事情&#xff0c;设置内容是否会被修剪&#xff0c;溢出部分是否会被隐藏&#xff1b;例如当属性值设置为“visible”则内容不会被修剪&#xff0c;为“hidden”则内…...

编程日记 2023/5/16 23:29:29

算法怎么算：贪心算法

总有人在小白面前说&#xff1a;我是搞算法的&#xff0c;不是码农。又或者在想要进阶的时候&#xff0c;有人问你&#xff1a;你懂算法吗&#xff1f; 所有&#xff0c;算法到底是什么&#xff1f; 从目的性来说&#xff1a;它是计算方法&#xff0c;用来达到自己目的的方式…...

编程日记 2023/5/16 23:24:28

【UDS】ISO15765-2之网络时间参数

文章目录 简介分类1. N_As2. N_Ar3. N_Bs4. N_Br5. N_Cs5. N_Cr 总结 ->返回总目录<- 简介 网络层定时参数定义了N_As、N_Ar、N_Bs、N_Br、N_Cs、N_Cr六个参数。 这些时间参数在多帧传输中可以定义在下图的过程中 分类 1. N_As 方向&#xff1a; 发送方->接收方 …...

编程日记 2023/5/16 23:19:27

Mybatis 动态SQL

注解作用SelectProvider动态查询SQLInsertProvider动态新增SQLUpdateProvider动态更新SQLDeleteProvider动态删除SQL Select 与 SelectProvider 只是在定义注解的方式上有所不同, 一个是静态SQL, 一个是动态SQL 。 SelectProvider 是 MyBatis 中的一个注解&#xff0c;用于指定…...

编程日记 2023/5/16 23:14:26

普通二本院校计算机专业应届生，我来分享java后端开发的自学java经历

当我找到实习的时候&#xff0c;就决定要把自己的经验分享给大家。我会分享一下自己的真实经验。当然了&#xff0c;以下内容仅代表我的个人看法&#xff0c;如有不完善的地方还请见谅。接下来我就以下几个方面进行讲解。下面是兴哥的一位粉丝朋友的经历。 1.自我介绍 首先呢…...

编程日记 2023/5/16 23:09:24

windows系统常见的操作命令及用法

来源&#xff1a;用ChatGPT搜索出来的 目录操作命令&#xff1a; dir&#xff1a;查看当前目录下的文件列表。 用法&#xff1a;dir [路径] [/w] [/p] [/a] [/o] cd&#xff1a;切换当前目录到指定路径。 用法&#xff1a;cd [路径] md/mkdir&#xff1a;创建新的目录。 用法…...

编程日记 2023/5/16 23:04:23

【计算机网络】网络命令的使用

文章目录 一、实验目的二、实验工具三、实验要求四、实验过程01 ping 命令的使用应用1&#xff1a;验证本地计算机上是否正确安装了 TCP/IP 协议应用2&#xff1a;测试某个目的主机可达性应用3&#xff1a;键入 ping&#xff0c;查看 ping 的其他参数含义 02 netstat 命令的典型…...

编程日记 2023/5/16 22:59:22

​当互联网与产业的融合成为一种必然，​平台化和商业化不再是必然

当互联网与产业的融合成为一种必然&#xff0c;我们在互联网时代司空见惯的平台化、中心化的发展模式便开始被瓦解。更为确切地说&#xff0c;经典意义上的平台化和中心化的商业模式不再有存在的必要。因为供求两端的对接不再是依靠平台和中心的撮合和中介来实现的&#xff0c;…...

编程日记 2023/5/16 22:54:16

【linux】冯诺依曼体系+操作系统

我们使用的计算机都是由一个个硬件所组成的&#xff0c;那么如何有条不紊的运行呢&#xff1f;那是因为有冯诺依曼体系约束着硬件&#xff0c;而操作系统来管理着他们&#xff0c;从而使得计算机的硬件和软件完美结合。 一、冯诺依曼体系 首先我们得了解什么是冯诺依曼体系结构…...

编程日记 2023/5/16 22:49:10

从0开始 莫比乌斯函数和反演 学习笔记

莫比乌斯 0 前言 建议先看这篇比较简略的文章&#xff08;有大概了解&#xff09; 莫比乌斯函数_为最后的荣光的博客-CSDN博客 再根据个人情况食用本篇博客 1 莫比乌斯函数 1 1 定义 首先对 n n n 唯一分解&#xff1a; 唯一分解&#xff1a; 唯一分解定理一篇就够了_求…...

编程日记 2023/5/16 22:44:09

IntersectionObserver“替代”滚动条监听

概要 IntersectionObserver 接口提供了一种异步观察目标元素与其祖先元素或顶级文档视口&#xff08;viewport&#xff09;交叉状态的方法。其祖先元素或视口被称为根&#xff08;root&#xff09;。 当一个 IntersectionObserver 对象被创建时&#xff0c;其被配置为监听根中…...

编程日记 2023/5/16 22:39:08

Maven下载安装及IDEA配置Maven的超详细教程

Maven下载安装及IDEA配置Maven的超详细教程 1、IntelliJ IDEA 下载、安装及配置过程2、maven下载、安装、配置过程2.1 mavan下载2.2 安装2.3 配置 3、在IDEA中配置Maven3.1 进入设置界面3.2 maven配置 4、IDEAmaven创建工程示例 Maven是一个能使我们的java程序开发节省时间和精…...

编程日记 2023/5/16 22:34:06

【JAVAEE】线程池基础知识⭐

目录 1.什么是线程池 2.为什么要使用线程池 3.怎么使用线程池 4.自定义一个线程池 5.为什么不推荐使用系统自带的线程池 5.1线程池构造方法的参数和含义 5.1.1拒绝策略 5.2线程池的工作原理 5.3为什么不适用系统自带的线程池 补充&#xff1a;工厂模式 1.什么是线程池…...

编程日记 2023/5/16 22:29:05

【源码解析】@ControllerAdvice实现异常捕获与响应增强处理的原理解析

全局异常处理 demo展示 Slf4j RestControllerAdvice public class GlobalExceptionAdvice {ExceptionHandler(RuntimeException.class)public R<Void> handleNotPermissionException(RuntimeException e, HttpServletRequest request) {String requestURI request.get…...

编程日记 2023/5/16 22:24:03

Visual Studio Code 插件的开发、调试及发布完整详细教程

本篇文章主要讲解：Vscode的拓展插件，从环境安装到生成项目文件再到调试及部署发布的完整开发教程。 日期：2023年5月10日 vscode 1.78.1 一、准备node环境及安装yo 项目初始化，优先安装yo、再通过yo创建code及插件项目。 基础条件 需要先安装node，且node环境已经正确安装…...

编程日记 2023/5/16 22:19:02

Qt音视频开发38-ffmpeg视频暂停录制的设计

一、前言 基本上各种播放器提供的录制视频接口，都是只有开始录制和结束录制两个，当然一般用的最多的也是这两个接口，但是实际使用过程中，还有一种可能需要中途暂停录制，暂停以后再次继续录制，将中间部分视频不需要录制，跳过这部分不需要的视频，而且录制的视频文件必须…...

编程日记 2023/5/16 22:14:01

bat脚本、dos命令

bat脚本 bat脚本就是DOS批处理脚本&#xff0c;就是将一系列DOS命令按照一定顺序排列而形成的集合&#xff0c;运行在windows命令行环境上。这个文件的每一行都是一条DOS命令 在命令提示下键入批处理文件的名称&#xff0c;或者双击该批处理文件&#xff0c;系统就会调用Cmd.…...

编程日记 2023/5/16 22:09:00

【星戈瑞】Sulfo-Cyanine5 mal红色荧光Cy5-maleimide

Sulfo-Cyanine5 mal是一种具有强荧光信号的染料&#xff0c;主要应用于生物荧光成像领域。它的化学式为C38H43KN4O9S2&#xff0c;分子量为803.00。这种染料具有良好的水溶性&#xff0c;可在水溶液中稳定存在。它的光学特性包括吸收峰位于646 nm和发射峰位于662 nm&#xff0c…...

编程日记 2023/5/16 22:03:59

Dcip的学习1-计算器

文章目录 前言一、配置安装环境1.1 网址1.2 再次打开需要进行的操作1.3 NodeJS控制台的操作1.4 出现的页面 二、Dcip生成计算器2.1 软件的基本单位 - Unitform中添加内容 2.2 OnleftChange(); 前言 只是为方便学习&#xff0c;不做其他用途&#xff0c; 一、配置安装环境 1.1 …...

编程日记 2023/5/16 21:58:58

ChatGPT使用9大技巧详解

目录 技巧1：To Do and Not To Do 技巧2：增加示例 技巧3：使用引导词，引导模型输出特定内容...

编程日记 2023/5/16 21:53:58

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/9/7 8:53:14

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/9/7 2:01:34

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/8/10 2:34:22

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/9/8 21:10:29

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/8/22 5:05:23

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2025/9/6 0:09:27

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/8/24 10:40:54

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/7/12 9:05:51

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2025/9/9 15:31:38

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20