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

CSS 中调整元素大小的全面指南

article 2026/5/10 0:28:39

CSS 中调整元素大小的全面指南

    • 1. 原始尺寸（固有尺寸）
      • 示例代码：图像的固有尺寸
    • 2. 设置具体的尺寸
      • 示例代码：设置固定宽度和高度
    • 3. 使用百分比
      • 示例代码：使用百分比设置宽度
    • 4. 使用百分比作为外边距和内边距
      • 示例代码：使用百分比设置外边距和内边距
    • 5. 使用 `min-` 和 `max-` 尺寸
      • 示例代码：使用 `min-height` 和 `max-width`
    • 6. 视口单位
      • 示例代码：使用视口单位设置尺寸
    • 7. 响应式图像
      • 示例代码：响应式图像
    • 8. 总结
      • 完整示例代码

在网页设计中，调整元素的大小是一个常见的需求。CSS 提供了多种方法来控制元素的尺寸，包括使用固定尺寸、百分比、视口单位以及最小/最大尺寸等。本文将详细介绍这些方法，并通过示例代码帮助你更好地理解如何在 CSS 中调整元素的大小。

1. 原始尺寸（固有尺寸）

在 CSS 设置生效之前，HTML 元素有其固有的尺寸。例如，图像的尺寸由其文件本身决定。如果你没有为图像设置尺寸，它将以其固有尺寸显示。

示例代码：图像的固有尺寸

<img src="example.jpg" alt="示例图像">

在这个例子中，图像将以其原始尺寸显示。如果你为图像添加边框，可以看到其固有尺寸。

2. 设置具体的尺寸

我们可以为元素指定具体的尺寸。当元素的尺寸由其外部决定时，我们称之为外部尺寸。

示例代码：设置固定宽度和高度

.box {width: 200px;height: 150px;border: 2px solid black;
}

在这个例子中，.box 元素的宽度和高度被固定为 200px 和 150px。如果内容超出这个尺寸，将会发生溢出。

3. 使用百分比

百分比是相对于父元素的尺寸来计算的。例如，设置宽度为 50% 表示元素宽度为父元素宽度的一半。

示例代码：使用百分比设置宽度

.container {width: 400px;border: 2px solid black;
}.box {width: 50%; /* 父元素宽度的 50% */height: 100px;background-color: lightblue;
}

在这个例子中，.box 的宽度为 .container 宽度的 50%。

4. 使用百分比作为外边距和内边距

当使用百分比作为外边距（margin）或内边距（padding）时，值是以包含块的内联尺寸（通常是宽度）来计算的。

示例代码：使用百分比设置外边距和内边距

.box {width: 200px;height: 100px;margin: 10%; /* 相对于包含块的宽度 */padding: 10%; /* 相对于包含块的宽度 */background-color: lightblue;
}

在这个例子中，外边距和内边距都是相对于包含块的宽度来计算的。

5. 使用 min- 和 max- 尺寸

我们可以为元素设置最小和最大尺寸，以确保元素在不同情况下都能保持合适的尺寸。

示例代码：使用 min-height 和 max-width

.box {min-height: 100px; /* 最小高度 */max-width: 300px; /* 最大宽度 */background-color: lightblue;border: 2px solid black;
}

在这个例子中，.box 的高度至少为 100px，宽度最大为 300px。

6. 视口单位

视口单位（vw 和 vh）是相对于视口尺寸的单位。1vh 等于视口高度的 1%，1vw 等于视口宽度的 1%。

示例代码：使用视口单位设置尺寸

.box {width: 50vw; /* 视口宽度的 50% */height: 50vh; /* 视口高度的 50% */background-color: lightblue;border: 2px solid black;
}

在这个例子中，.box 的宽度和高度分别为视口宽度和高度的 50%。

7. 响应式图像

使用 max-width: 100% 可以确保图像在容器内按比例缩放，而不会超出其原始尺寸。

示例代码：响应式图像

img {max-width: 100%; /* 图像最大宽度为容器的 100% */height: auto; /* 高度自动调整以保持比例 */
}

在这个例子中，图像将根据容器的大小进行缩放，但不会超过其原始尺寸。

8. 总结

在 CSS 中调整元素的大小有多种方法，包括使用固定尺寸、百分比、视口单位以及最小/最大尺寸等。理解这些方法之间的差异，并根据具体需求选择合适的方式，是掌握 CSS 布局的关键。

完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 调整元素大小示例</title><style>.container {width: 400px;border: 2px solid black;margin-bottom: 20px;}.box {width: 50%;height: 100px;background-color: lightblue;border: 2px solid black;margin: 10%;padding: 10%;}.min-max-box {min-height: 100px;max-width: 300px;background-color: lightblue;border: 2px solid black;margin-bottom: 20px;}.viewport-box {width: 50vw;height: 50vh;background-color: lightblue;border: 2px solid black;margin-bottom: 20px;}img {max-width: 100%;height: auto;}</style>
</head>
<body><div class="container"><div class="box">百分比尺寸示例</div></div><div class="min-max-box">最小/最大尺寸示例</div><div class="viewport-box">视口单位示例</div><img src="example.jpg" alt="响应式图像示例">
</body>
</html>

通过本文的学习，你应该对如何在 CSS 中调整元素的大小有了更深入的理解。

相关文章：

CSS 中调整元素大小的全面指南

CSS 中调整元素大小的全面指南 1. 原始尺寸&#xff08;固有尺寸&#xff09;示例代码&#xff1a;图像的固有尺寸 2. 设置具体的尺寸示例代码&#xff1a;设置固定宽度和高度 3. 使用百分比示例代码&#xff1a;使用百分比设置宽度 4. 使用百分比作为外边距和内边距示例代码&a…...

编程日记 2026/5/5 6:20:43

Hive存储系统全面测试报告

引言 在大数据时代&#xff0c;数据存储和处理技术的重要性日益凸显。Apache Hive作为一个基于Hadoop的数据仓库工具&#xff0c;因其能够提供类SQL查询功能&#xff08;HiveQL&#xff09;而广受欢迎。Hive的设计初衷是为了简化大数据集的查询和管理&#xff0c;它允许用户通…...

编程日记 2026/5/9 19:43:42

minimind - 从零开始训练小型语言模型

大语言模型&#xff08;LLM&#xff09;领域&#xff0c;如 GPT、LLaMA、GLM 等&#xff0c;虽然它们效果惊艳&#xff0c; 但动辄10 Bilion庞大的模型参数个人设备显存远不够训练&#xff0c;甚至推理困难。 几乎所有人都不会只满足于用Lora等方案fine-tuing大模型学会一些新的…...

编程日记 2026/5/8 19:01:17

前端知识速记—JS篇：箭头函数

前端知识速记—JS篇&#xff1a;箭头函数 什么是箭头函数&#xff1f; 箭头函数是 ES6 引入的一种新的函数书写方式&#xff0c;其语法更为简洁&#xff0c;常用于替代传统的函数表达式。箭头函数的基本语法如下&#xff1a; const functionName (parameters) > {// 函数…...

编程日记 2026/4/3 10:02:34

小程序的协同工作与发布

1.小程序API的三大分类 2.小程序管理的概念&#xff0c;以及成员管理两个方面 3.开发者权限说明以及如何维护项目成员 4.小程序版本...

编程日记 2026/5/9 7:17:20

计算机网络 笔记 网络层 3

IPv6 IPv6 是互联网协议第 6 版&#xff08;Internet Protocol Version 6&#xff09;的缩写&#xff0c;它是下一代互联网协议&#xff0c;旨在解决 IPv4 面临的一些问题&#xff0c;以下是关于 IPv6 的详细介绍&#xff1a; 产生背景&#xff1a; 随着互联网的迅速发展&…...

编程日记 2026/5/9 8:47:16

python 语音识别

目录 一、语音识别 二、代码实践 2.1 使用vosk三方库 2.2 使用SpeechRecognition 2.3 使用Whisper 一、语音识别 今天识别了别人做的这个app，觉得虽然是个日记app 但是用来学英语也挺好的，能进行语音识别，然后矫正语法，自己说的时候 ，实在不知道怎么说可以先乱说，然…...

编程日记 2026/5/9 20:59:22

事务02之锁机制

锁机制 文章目录 锁机制一&#xff1a;MySQL锁的由来与分类1&#xff1a;锁机制的分类 二&#xff1a;共享锁与排他锁1&#xff1a;共享锁(S锁)2&#xff1a;排他锁(X锁)3&#xff1a;锁的释放 二&#xff1a;表级别锁1&#xff1a;元数据锁(了解)2&#xff1a;意向锁3&#xf…...

编程日记 2026/5/9 22:59:53

Python NumPy（10）：NumPy 统计函数

1 NumPy 统计函数 NumPy 提供了很多统计函数&#xff0c;用于从数组中查找最小元素&#xff0c;最大元素&#xff0c;百分位标准差和方差等。 1.1 numpy.amin() 和 numpy.amax() numpy.amin() 用于计算数组中的元素沿指定轴的最小值。 numpy.amin(a, axisNone, outNone, keep…...

编程日记 2026/5/9 8:45:35

[Spring] Gateway详解

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…...

编程日记 2026/5/9 9:40:55

TCP三次握手和四次挥手面试题

TCP标志位TCP序列号、确认号三次握手 三次握手过程为什么不是两次握手&#xff1f;为什么不是四次握手&#xff1f; 为什么超时重传&#xff1f;如何处理丢包 为什么需要超时重传?如何处理丢包&#xff1f; 四次挥手 四次挥手过程为什么需要四次挥手为什么四次挥手&#xff0c…...

编程日记 2026/5/9 9:21:53

使用openAI与Deepseek的感受

今天简单介绍下使用OpenAI和DeepSeek的感觉&#xff0c;有些地方可能存在不准确的地方&#xff0c;望指正&#xff1a; 从2023年的秋冬到现在2025年的1月间&#xff0c;OpenAI和DeepSeek我都用它们来帮我&#xff0c;当然更多的是OpenAI&#xff0c;但整体感受如下&#xff1a;…...

编程日记 2026/5/8 22:13:18

FFmpeg(7.1版本)在Ubuntu18.04上的编译

一、从官网上下载FFmpeg源码 官网地址&#xff1a;Download FFmpeg 点击Download Source Code 下载源码到本地电脑上 二、解压包 tar -xvf ffmpeg-7.1.tar.xz 三、配置configure 1.准备工作 安装编译支持的软件 ① sudo apt-get install nasm //常用的汇编器&#xff0c;…...

编程日记 2026/5/9 1:10:48

为AI聊天工具添加一个知识系统 之80 详细设计之21 符号逻辑 之1

本文要点 要点 前面我们讨论了本项目中的正则表达式。现在我们将前面讨论的正则表达式视为狭义的符号文本及其符号规则rule&#xff08;认识的原则--认识上认识对象的约束&#xff09;&#xff0c;进而在更广泛的视角下将其视为符号逻辑及其符号原则principle&#xff08;知识…...

编程日记 2026/5/9 11:44:41

【C++】类和对象（5）

目录 一、构造函数补充1、初始化列表 二、类型转换三、static成员四、友元1、友元函数2、友元类 五、内部类六、匿名对象 一、构造函数补充 对于之前讲解的构造函数&#xff0c;还有一些更深层次的内容要进行补充&#xff0c;接下来进行补充内容的讲解。 1、初始化列表 在我…...

编程日记 2026/4/24 22:02:59

FPGA|使用quartus II通过AS下载POF固件

1、将开发板设置到AS下载挡位&#xff0c;或者把下载线插入到AS端口 2、打开quartus II&#xff0c;选择Tools→Programmer→ Mode选择Active Serial Programming 3、点击左侧Add file…&#xff0c;选择 .pof 文件 →start 4、勾选program和verify&#xff08;可选&#xff0…...

编程日记 2026/5/9 11:53:02

H. Mad City

题目链接&#xff1a;Problem - H - Codeforces 题目大意&#xff1a;给定一个带环的图&#xff0c; 以及a, b两点 判断再图上不断的移动&#xff0c; b想不与a相遇&#xff0c; a想捉到b, 并且二者只能移动一步。 若b跑不掉 NO 否则YES. 具体题目看链接 输入&#xff1a; …...

编程日记 2026/4/29 3:15:10

Nginx前端后端共用一个域名如何配置

在 Nginx 中配置前端和后端共用一个域名的情况&#xff0c;通常是通过路径或子路径将请求转发到不同的服务。以下是一个示例配置&#xff0c;假设&#xff1a; 前端静态文件在 /var/www/frontend/。 后端 API 服务运行在 http://127.0.0.1:5000。 域名是 example.com&#xff…...

编程日记 2025/10/18 20:27:20

27.Word：财务软件应用的书稿【10】

目录 NO1.2 NO3 NO5.6​ NO7.8​ NO9​ 存在页码链接关系&#xff0c;只是页码格式不同 NO1.2 另存为/F12&#xff1a;考生文件夹布局→页面设置对话框→页边距&#xff1a;上下内外/装订线→纸张大小→布局&#xff1a;页眉页脚 NO3 样式的应用&#xff1a;超快速❗ 开…...

编程日记 2026/5/9 23:00:16

AI编程：如何编写提示词

这是小卷对AI编程工具学习的第2篇文章&#xff0c;今天讲讲如何编写AI编程的提示词&#xff0c;并结合实际功能需求案例来进行开发 1.编写提示词的技巧 好的提示词应该是&#xff1a;目标清晰明确&#xff0c;具有针对性&#xff0c;能引导模型理解问题 下面是两条提示词的对…...

编程日记 2026/5/9 7:25:40

记一次STM32编译生成BIN文件过大的问题（基于STM32CubeIDE）

文章目录 问题描述解决方法更多拓展 问题描述 最近在一个项目中使用了 STM32H743 单片机&#xff08;基于 STM32CubeIDE GCC 开发&#xff09;&#xff0c;它的内存分为了 DTCMRAM RAM_D1 RAM_D2 …等很多部分。其中 DTCM 的速度是比通常的内存要快的&#xff0c;缺点是不支持…...

编程日记 2026/5/9 7:13:20

【OpenGL】OpenGL游戏案例(二)

文章目录 特殊效果数据结构生成逻辑更新逻辑 文本渲染类结构构造函数加载函数渲染函数 特殊效果 为提高游戏的趣味性&#xff0c;在游戏中提供了六种特殊效果。 数据结构 PowerUp 类只存储存活数据&#xff0c;实际逻辑在游戏代码中通过Type字段来区分执行 class PowerUp …...

编程日记 2026/2/17 2:38:38

DeepSeek大模型技术深度解析：揭开Transformer架构的神秘面纱

摘要 DeepSeek大模型由北京深度求索人工智能基础技术研究有限公司开发&#xff0c;基于Transformer架构&#xff0c;具备卓越的自然语言理解和生成能力。该模型能够高效处理智能对话、文本生成和语义理解等复杂任务&#xff0c;标志着人工智能在自然语言处理领域的重大进展。 关…...

编程日记 2026/2/17 22:38:08

DeepSeek本地版安装简易教程(windows)

第一步&#xff1a;下载 第二步&#xff1a;安装 先安装ollama&#xff0c;安装完毕保持ollama运行&#xff0c;设置ollama通过防火墙&#xff0c;再安装deepseek&#xff0c;7b代表下载的r1版本&#xff0c;版本越高消耗资源越大 第三步&#xff1a;开放windows防火墙 第四步…...

编程日记 2026/5/9 18:20:11

RK3568使用QT搭建TCP服务器和客户端

文章目录 一、让RK3568开发板先连接上wifi二、客户端代码1. `widget.h` 文件2. `widget.cpp` 文件**详细讲解**1. **`Widget` 类构造函数 (`Widget::Widget`)**2. **UI 布局 (`setupUI`)**3. **连接按钮的槽函数 (`onConnectClicked`)**4. **发送消息按钮的槽函数 (`onSendMess…...

编程日记 2026/5/9 21:09:37

Python爬虫之——Cookie存储器

目录 专栏导读1、背景介绍2、库的安装3、核心代码4、完整代码总结 专栏导读 &#x1f338; 欢迎来到Python办公自动化专栏—Python处理办公问题&#xff0c;解放您的双手 &#x1f3f3;️‍&#x1f308; 博客主页&#xff1a;请点击——> 一晌小贪欢的博客主页求关注 &…...

编程日记 2026/5/9 23:09:52

理解动手学深度学习的自编包d2l

跟着李沐的《动手学深度学习-PyTorch版》入门Python编程和Pytorch框架&#xff0c;以前是重度Matlab用户&#xff0c;对于Python里的各种包很不习惯。特别是&#xff0c;本书还自己做了一个名为d2l包&#xff0c;有几个问题很是困惑。今天终于弄明白了&#xff0c;写在这里&…...

编程日记 2026/2/16 16:57:17

大语言模型（LLM）模拟金融市场参与者行为

大语言模型（LLM）模拟金融市场参与者行为 研究背景 传统深度学习模型通过识别市场数据历史模式预测市场，但未捕捉个体决策过程。LLM 虽能学习人类对不同提示的反应，但在模拟金融市场参与者时面临挑战：个体投资者不总是理性决策，LLM 可能无法捕捉；LLM 数值和金融知识可靠…...

编程日记 2026/3/31 19:29:06

蓝桥杯刷题DAY1：前缀和

所谓刷题&#xff0c;讲究的就是细心 帕鲁服务器崩坏【算法赛】 “那个帕鲁我已经观察你很久了&#xff0c;我对你是有些失望的&#xff0c;进了这个营地&#xff0c;不是把事情做好就可以的&#xff0c;你需要有体系化思考的能力。” 《幻兽帕鲁》火遍全网&#xff0c;成为…...

编程日记 2026/5/9 8:22:18

Hive:窗口函数(1)

窗口函数 窗口函数OVER()用于定义一个窗口&#xff0c;该窗口指定了函数应用的数据范围 对窗口数据进行分区 partition by 必须和over () 一起使用, distribute by经常和sort by 一起使用,可以不和over() 一起使用.DISTRIBUTE BY决定了数据如何分布到不同的Reducer上&#xf…...

编程日记 2026/5/9 22:52:28