CSS溢出——WEB开发系列20

在网页设计中,“溢出”是一个常见且重要的概念。它涉及到如何处理那些超出预定范围的内容,以确保网页的布局和视觉效果达到预期。


一、什么是溢出?

在 CSS 中,“溢出”(overflow)指的是内容超出其包含块的边界时的处理方式。当一个元素的内容超出其设定的宽度或高度时,我们需要采取措施来管理这些超出部分的内容。溢出可能会导致内容被遮挡、布局混乱或视觉效果不佳。


二、CSS 的 ​​overflow​​ 属性

CSS 提供了 ​​overflow​​ 属性来控制如何处理溢出的内容。该属性适用于块级元素,并允许你指定内容超出其容器边界时的显示方式。​​overflow​​ 属性有四个主要值:

  • visible​:默认值。溢出的内容会显示在容器之外,不进行裁剪。
  • hidden​:溢出的内容会被裁剪,不会显示在容器之外。
  • scroll​:溢出的内容会显示滚动条,允许用户滚动查看超出部分的内容。
  • auto​​:根据需要自动添加滚动条。如果内容超出容器,则显示滚动条;否则,不显示滚动条。

示例 1: ​​visible​

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Overflow Visible Example</title><style>.container {width: 200px;height: 100px;border: 2px solid black;overflow: visible; /* 默认值 */}.content {width: 300px;height: 150px;background-color: lightblue;}</style>
</head>
<body><div class="container"><div class="content">这是一个超出容器边界的内容示例。</div></div>
</body>
</html>

​.content​​ 元素的宽度和高度超出了 ​​.container​​ 元素的边界。由于 ​​overflow​​ 属性设置为 ​​visible​​​,超出的内容会在容器之外显示。


示例 2: ​​hidden​

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Overflow Hidden Example</title><style>.container {width: 200px;height: 100px;border: 2px solid black;overflow: hidden; /* 裁剪溢出内容 */}.content {width: 300px;height: 150px;background-color: lightgreen;}</style>
</head>
<body><div class="container"><div class="content">这是一个超出容器边界的内容示例。</div></div>
</body>
</html>

由于 ​​overflow​​ 属性设置为 ​​hidden​​​,溢出的内容被裁剪,不会显示在容器之外。


示例 3: ​​scroll​

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Overflow Scroll Example</title><style>.container {width: 200px;height: 100px;border: 2px solid black;overflow: scroll; /* 显示滚动条 */}.content {width: 300px;height: 150px;background-color: lightcoral;}</style>
</head>
<body><div class="container"><div class="content">这是一个超出容器边界的内容示例。</div></div>
</body>
</html>

​.container​​ 元素的 ​​overflow​​ 属性设置为 ​​scroll​​​,因此即使内容超出了容器边界,用户也可以通过滚动条查看所有内容。


示例 4: ​​auto​

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Overflow Auto Example</title><style>.container {width: 200px;height: 100px;border: 2px solid black;overflow: auto; /* 自动添加滚动条 */}.content {width: 300px;height: 150px;background-color: lightgoldenrodyellow;}</style>
</head>
<body><div class="container"><div class="content">这是一个超出容器边界的内容示例。</div></div>
</body>
</html>

​.container​​ 元素的 ​​overflow​​ 属性设置为 ​​auto​​​,在内容超出容器边界时,自动显示滚动条。


三、溢出建立区块格式化上下文

区块格式化上下文(Block Formatting Context, BFC)是一个用于布局的概念,它帮助我们控制元素如何在页面上布局。在处理溢出时,理解 BFC 对于解决一些布局问题非常重要。

什么是 BFC?

BFC 是一个独立的布局区域,元素在 BFC 内部的布局不会影响外部的布局。BFC 的建立通常会影响到溢出处理。以下是一些建立 BFC 的常见方法:

  • 设置 overflow 属性:当 ​​overflow​​ 属性值为 ​​hidden​​、​​scroll​​ 或 ​​auto​​ 时,元素会创建一个新的 BFC。
  • 设置 display 属性为 flow-root​:元素的 ​​display​​ 属性设置为 ​​flow-root​​ 也会创建一个新的 BFC。
  • 设置 float 属性为 left 或 right​:浮动元素也会创建一个新的 BFC。
  • 设置 position 属性为 absolute 或 fixed​:这些定位属性也会创建一个新的 BFC。

创建 BFC

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>BFC Example</title><style>.container {width: 200px;height: 100px;border: 2px solid black;overflow: hidden; /* 创建 BFC */}.content {width: 300px;height: 150px;background-color: lightpink;}.float-box {float: left; /* 创建 BFC */width: 100px;height: 100px;background-color: lightblue;}</style>
</head>
<body><div class="container"><div class="float-box"></div><div class="content">这是一个创建了 BFC 的容器。内容超出了容器边界,但由于创建了 BFC,浮动的 `.float-box` 不会影响到 `.content` 的布局。</div></div>
</body>
</html>

在这个例子中,​​.container​​ 元素和 ​​.float-box​​​ 元素创建了各自的 BFC,使得它们的布局相互独立,避免了浮动元素对溢出内容的影响。

四、网页设计中的溢出处理

在实际的网页设计中,处理溢出不仅仅是为了防止布局破坏,还涉及到用户体验和内容可读性。以下是一些常见的场景和最佳实践:

场景 1: 响应式设计

在响应式设计中,确保内容在不同屏幕尺寸下都能正确显示是至关重要的。使用 ​​overflow​​​ 属性可以帮助你控制在屏幕尺寸变化时的内容显示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Responsive Overflow Example</title><style>.container {width: 100%;max-width: 600px;height: 200px;border: 2px solid black;overflow: auto; /* 自动显示滚动条 */}.content {width: 120%;height: 100%;background-color: lightgray;}</style>
</head>
<body><div class="container"><div class="content">这是一个响应式设计的示例。当容器的宽度小于内容的宽度时,会显示滚动条。</div></div>
</body>
</html>

​.container​​ 元素设置了 ​​overflow: auto​​​,确保当内容超出容器宽度时,用户可以通过滚动条查看所有内容。


场景 2: 图片和视频

处理图片和视频等多媒体内容时,确保它们在容器中适当显示是非常重要的。使用 ​​overflow​​​ 属性可以帮助你控制这些元素的显示方式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Media Overflow Example</title><style>.container {width: 400px;height: 300px;border: 2px solid black;overflow: hidden; /* 裁剪超出内容 */position: relative;}.media {width: 100%;height: auto;}</style>
</head>
<body><div class="container"><img src="https://via.placeholder.com/600x400" alt="Example Image" class="media"></div>
</body>
</html>

​.container​​ 元素设置了 ​​overflow: hidden​​​,确保超出容器边界的图片部分不会显示。


场景 3: 表单和交互式元素

在表单和交互式元素中,处理溢出可以提高用户体验。例如,在长列表或表单字段中使用滚动条,可以避免页面变得过于冗长。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Form Overflow Example</title><style>.form-container {width: 300px;height: 200px;border: 2px solid black;overflow-y: scroll; /* 垂直方向显示滚动条 */padding: 10px;}.form-element {margin-bottom: 10px;}</style>
</head>
<body><div class="form-container"><form><div class="form-element"><label for="input1">输入框 1:</label><input type="text" id="input1"></div><div class="form-element"><label for="input2">输入框 2:</label><input type="text" id="input2"></div><div class="form-element"><label for="input3">输入框 3:</label><input type="text" id="input3"></div><div class="form-element"><label for="input4">输入框 4:</label><input type="text" id="input4"></div><div class="form-element"><label for="input5">输入框 5:</label><input type="text" id="input5"></div><div class="form-element"><label for="input6">输入框 6:</label><input type="text" id="input6"></div><!-- 更多输入框 --></form></div>
</body>
</html>

​.form-container​​ 元素设置了 ​​overflow-y: scroll​​​,允许在表单内容超出容器时显示垂直滚动条。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/412327.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python-pptx - Python 操作 PPT 幻灯片

文章目录 一、关于 python-pptx设计哲学功能支持 二、安装三、入门1、你好世界&#xff01;例子2、Bullet 幻灯片示例3、add_textbox()示例4、add_picture()示例5、add_shape()示例6、add_table()示例7、从演示文稿中的幻灯片中提取所有文本 四、使用演示文稿1、打开演示文稿2、…

Marscode:程序员的智能伙伴,2024 活动震撼来袭

在程序员的世界里&#xff0c;高效的开发工具如同手中的利器&#xff0c;能让我们在代码的海洋中披荆斩棘。今天&#xff0c;我要向大家隆重介绍一款强大的智能开发工具——Marscode&#xff0c;以及它带来的精彩 2024 活动。 一、Marscode&#xff1a;智能开发的新势力 Mars…

SQLite的安装和使用

一、官网链接下载安装包 点击跳转 步骤&#xff1a;点击安装这个红框的dll以及红框下面的tools &#xff08;如果有navicat可以免上面这个安装步骤&#xff0c;安装上面这个是为了能在命令行敲SQL而已&#xff09; 二、SQLite的特点 嵌入的&#xff08;无服务器的&#x…

【机器学习】 7. 梯度下降法,随机梯度下降法SGD,Mini-batch SGD

梯度下降法,随机梯度下降法SGD,Mini-batch SGD 梯度下降法凸函数(convex)和非凸函数梯度更新方向选择步长的选择 随机梯度下降SGD(Stochastic Gradient Descent)梯度下降法&#xff1a;SGD: Mini-batch SGD 梯度下降法 从一个随机点开始决定下降方向&#xff08;重要&#xff…

基于PHP+MySQL组合开发的微信投票小程序 带完整的安装代码包以及搭建教程

系统概述 这款基于 PHPMySQL 组合开发的微信投票小程序是一款专门为满足各类投票需求而设计的应用程序。它利用 PHP 强大的服务器端编程能力和 MySQL 高效的数据存储和管理能力&#xff0c;为用户提供了一个稳定、可靠、功能丰富的投票平台。 该小程序支持多种投票类型&#…

centos安装docker并配置加速器

docker安装与卸载&#xff1a; 1、检查当前是否安装docker yum list installed | grep docker2、卸载docker 根据yum list installed | grep docker查询出来的内容&#xff0c;逐个进行删除 yum remove docker.x86 64 -y3、启动与关闭docker 4、删除/etc/docker文件夹 如果…

jmeter 响应乱码

Jmeter在做接口测试的时候的&#xff0c;如果接口响应的内容中有中文&#xff0c;jmeter的响应内容很可能显示乱码&#xff0c;为了规避这种出现乱码的问题&#xff0c;就要对jmeter的响应结果进行编码处理。 打开jmeter进行接口、压力、性能等测试&#xff0c;出现以下乱码问…

Java短剧系统新生态智能系统打造个性化影视体验小程序源码

短剧新生态&#xff0c;智能系统打造个性化影视体验✨&#x1f3ac; &#x1f389; 开篇&#xff1a;短剧新纪元&#xff0c;个性化体验来袭 在这个快节奏的时代&#xff0c;短剧以其精炼的剧情和高效的传播力&#xff0c;正逐渐成为影视娱乐的新宠儿&#xff01;&#x1f38…

如何恢复删除的微信好友?不留遗憾,这5招教你找回

在社交生活中&#xff0c;微信成为了我们日常沟通的重要工具之一。然而&#xff0c;偶尔因一时冲动或误操作删除了重要好友&#xff0c;当我们想找回好友时是否也在懊悔呢&#xff1f;如何恢复删除的微信好友就成为了我们必须学会的技能。那么&#xff0c;今天我们就来分享5种高…

10、ollama启动LLama_Factory微调大模型(llama.cpp)

在前面章节中介绍了如何使用LLama_Factory微调大模型&#xff0c;并将微调后的模型文件合并导出&#xff0c;本节我们我们看下如何使用ollama进行调用。 1、llama.cpp LLama_Factory训练好的模型&#xff0c;ollama不能直接使用&#xff0c;需要转换一下格式&#xff0c;我们…

STM32G474之TIM1更新中断

STM32G474之TIM1能产生如下的中断&#xff1a; 1、捕获比较1个事件&#xff08;Capture compare 1 event&#xff09; 用来获取“捕获输入脉冲的时间”&#xff0c;其次用来输出“比较输出波形”&#xff1b; 2、捕获比较2个事件&#xff08;Capture compare 2 event&#x…

【HTML源码】上传即可使用的在线叫号系统源码

这个叫号系统的过程是这样的 接了一个任务&#xff0c;某学校要对学生进行逐个面试&#xff0c;希望能有类似医院门诊那种叫号系统。 条件&#xff1a;首先说硬件&#xff0c;就是教室里边一台笔记本电脑&#xff0c;同屏到教室外面的电视机。 需求&#xff1a;软件需求是可…

如何解决U盘无法压缩卷或删除卷的问题

U盘在日常使用中&#xff0c;偶尔会遇到无法压缩卷或删除卷的情况。出现这些问题通常与U盘的磁盘状态或文件系统有关。本文将介绍一种有效的解决方法&#xff0c;通过使用Windows自带的磁盘管理工具diskpart来解决这些问题。 一、问题原因 U盘无法压缩卷或删除卷的常见原因包…

扩博智能× Milvus:图像检索助力零售商品图像高效标注

大家好&#xff0c;我是上海扩博智能技术有限公司的Frank&#xff0c;负责算法工程相关的工作。很高兴能在 Milvus 社区和大家分享我们在图像检索方面的经验。 01 扩博智能公司简介 扩博智能 Clobotics 成立于 2016 年&#xff0c;总部位于上海长宁。我们聚焦计算机视觉和机器学…

el-table 合并单元格后 hover错乱

hover后的效果图&#xff1a; 1&#xff1a;在el-table上加入这三个属性 :row-class-name"rowClassName" cell-mouse-enter"handleMouseEnter" cell-mouse-leave"handleMouseLeave" 2&#xff1a;data里声明一个变量 hoverRowLike:-1 3:copy到…

自动化测试:Monkey工具实践应用~

在移动应用的自动化测试中&#xff0c;意外的用户操作和各种不可预见的场景往往是导致应用崩溃的主要原因。如何有效地模拟这些复杂场景&#xff0c;成为了测试工程师的一大挑战。而在这一过程中&#xff0c;Monkey工具凭借其随机化测试的独特优势&#xff0c;成为了许多团队的…

29 猜丁壳游戏

猜丁壳游戏 猜丁壳游戏是一个简单的石头、剪刀、布游戏&#xff0c;玩家与计算机进行对战。以下是游戏的详细说明和使用指南。 游戏界面 游戏界面分为几个部分&#xff1a; 标题栏&#xff1a;显示游戏名称“猜丁壳”。选择区域&#xff1a;玩家可以选择石头、剪刀或布。控制…

Python简易IDE工作界面制作

、 休闲一下&#xff0c;学习编程还是要学习一些界面编程&#xff0c;能够根据需要制作图形操作界面&#xff0c;这样我们开发的程序才能方便操作和使用&#xff0c;同时获得更友好的人机交互体验。下面是一个用PyQt5制作的简易界面&#xff0c;供大学参考。如下图所示&a…

【vscode】vscode+cmake+llvm+ninja开发环境的搭建(draft)

文章目录 前言1 软件、工具和插件安装1.1 vscode安装1.2 cmake安装1.3 安装LLVM1.4 安装Ninja1.5 vscode插件安装 2 工具链和CMakeLists2.1 工具链&#xff08;toolchain.cmake&#xff09;2.2 CMakeLists.txt2.3 基本语法注释 前言 本文是一个使用vscode的小白扫盲贴。 所谓工…

一个php快速项目搭建框架源码,带一键CURD等功能

介绍&#xff1a; 框架易于功能扩展&#xff0c;代码维护&#xff0c;方便二次开发&#xff0c;帮助开发者简单高效降低二次开发成本&#xff0c;满足专注业务深度开发的需求。 百度网盘下载 图片&#xff1a;