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

html5cssjs代码 039 元素尺寸

news 2026/2/8 20:39:54

html5&css&js代码 039 元素尺寸

  • 一、代码
  • 二、解释

使用CSS来定义HTML元素的尺寸，并通过不同的计量单位来设置元素的大小。

一、代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>CSS定义元素尺寸示例</title><style>body {background-color: #1e1e1e; /* 页面背景色 */color: #e0e0e0; /* 文本色 */font-family: "Microsoft YaHei", Arial, sans-serif; /* 字体 */padding: 20px;margin: 0; /* 移除默认边距 */}.container {max-width: 800px; /* 容器最大宽度 */margin: auto; /* 容器居中 */background-color: #282c34; /* 容器背景色 */padding: 20px; /* 容器内边距 */border-radius: 8px; /* 容器圆角 */overflow: hidden; /* 清除浮动 */}h1 {text-align: center; /* 标题居中 */color: #61afef; /* 标题颜色 */margin-bottom: 20px; /* 增加标题下方的间距 */}.example {margin-bottom: 30px; /* 示例间距 */}.example-title {font-size: 1.2em; /* 标题字体大小 */color: #c5c5c5; /* 标题颜色 */margin-bottom: 15px; /* 增加标题下方的间距 */}.尺寸示例 {border: 2px solid #61afef; /* 边框样式，蓝色 */padding: 20px; /* 内边距 */text-align: center; /* 文本居中 */margin: 0 auto 15px; /* 间距，自动水平居中 */display: block; /* 块级元素 */border-radius: 6px; /* 圆角边框 */background-color: #3c3f42; /* 背景颜色 */width: 100px; /* 示例宽度 */height: 200px; /* 示例高度 */}#百分比示例 {width: 50%; /* 宽度为父容器的50% */height: 25%; /* 高度为父容器的25% */}#视口示例 {width: 30vw; /* 宽度为视口宽度的30% */height: 20vh; /* 高度为视口高度的20% */}#em示例 {width: 10em; /* 宽度为当前字体大小的10倍 */height: 5em; /* 高度为当前字体大小的5倍 */}#rem示例 {width: 5rem; /* 宽度为根元素字体大小的5倍 */height: 3rem; /* 高度为根元素字体大小的3倍 */}</style>
</head>
<body><div class="container"><h1>CSS定义元素尺寸示例</h1><div class="example"><div class="尺寸示例" id="像素示例">像素(px) 示例</div><div class="example-title">像素(px) 示例</div></div><div class="example"><div class="尺寸示例" id="百分比示例">百分比(%) 示例</div><div class="example-title">百分比(%) 示例</div></div><div class="example"><div class="尺寸示例" id="视口示例">视口单位(vw, vh) 示例</div><div class="example-title">视口单位(vw, vh) 示例</div></div><div class="example"><div class="尺寸示例" id="em示例">em 示例</div><div class="example-title">em 示例</div></div><div class="example"><div class="尺寸示例" id="rem示例">rem 示例</div><div class="example-title">rem 示例</div></div></div></body>
</html>

二、解释

这个HTML示例页面展示了如何使用CSS来定义HTML元素的尺寸，并通过不同的计量单位来设置元素的大小。页面采用了深色调的设计风格，以黑色和灰色为主色，以增强视觉效果和对比度。下面是对示例中每个部分的文字说明：

  1. 页面整体样式：
    • 页面背景色设置为深灰色（#1e1e1e），文字颜色为浅灰色（#e0e0e0），以便在深色背景上清晰可见。
    • 页面中的主要容器（.container）背景色为更深的灰色（#282c34），并设置了圆角边框，以提供一致的视觉效果。
    • 标题（h1和h2）颜色设置为亮蓝色（#61afef），以吸引注意力并突出显示。
  2. 尺寸示例元素：
    • 每个尺寸示例元素（尺寸示例）都有一个蓝色的边框（2px solid #61afef），以便直观地展示元素的边界。
    • 元素内部填充（padding）为20px，确保内容与边框之间有足够的空间。
    • 文本居中对齐，以便在页面上整洁地展示。
    • 元素水平居中显示，并设置了圆角边框，增强了视觉效果。
  3. 不同计量单位的演示：
    • 像素(px) 示例：展示了如何使用像素作为尺寸单位，定义了一个100像素宽、200像素高的元素。
    • 百分比(%) 示例：演示了如何使用百分比来设置元素的宽度和高度，这里元素宽度为父容器宽度的50%，高度为父容器高度的25%。
    • 视口单位(vw, vh) 示例：介绍了视口单位的使用，元素宽度设置为视口宽度的30%，高度为视口高度的20%。
    • em 示例：展示了em单位的使用，元素宽度为当前字体大小的10倍，高度为5倍。
    • rem 示例：演示了rem单位的使用，元素宽度和高度分别为根元素字体大小的5倍和3倍。
      这个示例页面不仅展示了如何使用CSS来设置元素的尺寸，还通过实际的视觉效果帮助理解不同计量单位的工作原理。通过这种方式，开发者和设计师可以更好地掌握如何在实际项目中应用这些单位来创建响应式和适应不同屏幕尺寸的设计。

相关文章：

html5cssjs代码 039 元素尺寸

html5&css&js代码 039 元素尺寸 一、代码二、解释 使用CSS来定义HTML元素的尺寸&#xff0c;并通过不同的计量单位来设置元素的大小。 一、代码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><tit…...

编程日记 2024/3/22 10:04:00

Lucene的lukeall工具的下载和使用图解

Lucene的lukeall工具的下载和使用图解-CSDN博客 Releases DmitryKey/luke (github.com) 需要github的用户名和密码&#xff0c;没有是下载不成功的....

编程日记 2024/3/22 10:02:59

【题目】【网络系统管理】2019年全国职业技能大赛高职组计算机网络应用赛项H卷

极安云科专注职业教育技能竞赛培训4年&#xff0c;包含信息安全管理与评估、网络系统管理、网络搭建等多个赛项及各大CTF模块培训学习服务。本团队基于赛项知识点&#xff0c;提供完整全面的系统性理论教学与技能培训&#xff0c;成立至今持续优化教学资源与讲师结构&#xff0…...

编程日记 2024/3/22 10:00:56

OpenRewrite框架原理解析

目录 1. OpenRewrite处理流程概述 2. OpenRewrite访问者模式的应用 2.1 访问者模式简介 2.2 OpenRewrite框架如何应用访问者模式 2.2.1 抽象访问者&具体访问者 2.2.2 抽象元素&具体元素 3. LST无损语义树构造 4. 配方&#xff08;Recipe&#xff09;执行流程 …...

编程日记 2024/3/22 9:58:54

LeetCode_Java_递归系列（题目+思路+代码）

206.反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]以此类推&#xff0c;直到反转结束返回头结点 class Solution {public ListNode rever…...

编程日记 2024/3/22 9:57:51

c++ 编译为WebAssembly时,怎么判断是release/debug环境?

我对这块研究不深 我的需求是把cpp代码编译为wasm的形式时&#xff0c;需要知道是debug/release 然而 尝试了一些办法 没有满足我的需求 尝试1&#xff1a; #include <iostream>bool isDebugMode() { #ifdef EMSCRIPTENbool isDebug EM_ASM_INT({return (typeof conso…...

编程日记 2024/3/22 9:56:50

信号处理--基于正则化聚合的共空间模态（CSP）脑电信号分类

目录 理论 工具 方法实现 代码获取 参考文献 理论 传统的通用空间模式 (CSP) 是一种流行的算法，用于对脑电图 (EEG) 信号进行分类。本文主要介绍小样本设置 (SSS) 中 CSP 的正则化和聚合技术。传统的 CSP 基于样本协方差矩阵估计。如果训练样本数量较少，其脑电图分类的…...

编程日记 2024/3/22 9:52:41

【2024年5月备考新增】《软考真题分章练习（含答案解析） - 11 项目风险管理（高项）》

1 题目 1、风险可以从不同角度、根据不同的标准来进行分类。百年不遇的暴雨属于（）。 A.不可预测风险 B.可预测风险 C.已知风险 D.技术风险 2、人们对风险事件都有一定的承受能力，当（）时，人们愿意承担的风险越大。 A.项目活动投入的越多 B.项目的收益越大 C.个人、组织拥…...

编程日记 2024/3/22 9:50:39

【3GPP】【核心网】【4G】4G手机接入过程，手机附着过程（超详细）

1. 4G手机接入过程&#xff0c;手机附着过程 附着&#xff08;Attach&#xff09;&#xff1a; 终端在PLMN中注册&#xff0c;从而建立自己的档案&#xff0c;即终端上下文 进行附着的三种情况&#xff1a; ①终端开机后的附着&#xff0c;初始附着 ②终端从覆盖盲区返回到…...

编程日记 2024/3/22 9:47:35

【LeetCode-46.全排列】

题目详情&#xff1a; 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]示例 2&#xff1a; …...

编程日记 2024/3/22 9:46:34

【Web】浅聊Jackson序列化getter的利用——POJONode

目录 核心速览 原理分析 EXP TemplatesImpl利用 SignedObject利用 核心速览 writeValueAsString是jackson序列化自带的入口&#xff0c;在调用该方法的过程中将会通过遍历的方法将bean对象中的所有的属性的getter方法进行调用 下面介绍如下利用链&#xff1a; BadAttrib…...

编程日记 2024/3/22 9:44:32

osgEarth学习笔记2-第一个Osg QT程序

原文链接 上个帖子介绍了osgEarth开发环境的安装。本帖介绍我的第一个Osg QT程序。 下载 https://github.com/openscenegraph/osgQt 解压&#xff0c;建立build目录。 使用Cmake-GUI Configure 根据需要选择win32或者x64&#xff0c;这里我使用win32. 可以看到include和lib路…...

编程日记 2024/3/22 9:43:30

2024年发布jar到国外maven中央仓库最新教程

2024年发布jar到国外maven中央仓库最新教程 文章目录 1.国外sonatype仓库的版本1.1老OSSHR账号注册说明1.2新账号注册说明 2.新账号注册(必选)3.新账号登录创建Namespace3.1创建Namespace的名字的格式要求&#xff08;必选&#xff09;3.2发布一个静态网站&#xff08;可选&…...

编程日记 2024/3/22 9:41:28

在ubuntu22.04.4安装freeswitch1.10.10

一、环境 No LSB modules are available. Distributor ID:      Ubuntu Description:         Ubuntu 22.04.4 LTS Release:             22.04.4 Codename:            jammy 二、依赖 1、 工具包 apt install -y openssh-server …...

编程日记 2024/3/22 9:40:26

qt 置顶窗口崩溃无法退出解决，停止运行快捷键设置

有时置顶窗口调试崩溃需要快捷键进行关闭&#xff0c;如下设置即可 这样就可以通过全局快捷键退出了&#xff0c;避免置顶崩溃无法关闭程序的问题。...

编程日记 2024/3/22 9:38:23

HBCalculator 程序：通过 VMD 可计算分子动力学模拟中氢键密度和强度的一维和二维分布

分享一个通过 VMD 可计算分子动力学模拟中氢键密度和强度的一维和二维分布程序 HBCalculator。 感谢论文的原作者&#xff01; 主要内容 “氢键是分子系统中关键的非共价相互作用&#xff0c;对生物、化学和能量相关过程产生重大影响&#xff1b;因此&#xff0c;描述氢键信息…...

编程日记 2024/3/22 9:37:22

鸿蒙-项目创建及了解

目录 项目创建 1.App普通项目创建 2.元服务创建 项目结构 .hvigor .idea AppScope entry EntryAbility.ts pages resources module.json5 ohosTest hvigorfile.ts build-profile.json5 oh_modules build-profile.json5 hvigorfile.ts 项目运行 项目创建 F…...

编程日记 2024/3/22 9:35:20

SQLiteC/C++接口详细介绍sqlite3_stmt类（九）

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;六&#xff09; 下一篇&#xff1a; 无 33、sqlite3_column_table_name 函数 sqlite3_column_table_name 用于返回结果集中指定列所属的表的名称。如果查询中列使…...

编程日记 2024/3/22 9:33:18

idea2023 运行多 springboot 实例

概要 1、修改idea运行多实例&#xff08;本地测试负载&#xff09; 你可能用到其他 1、改造项目缓存token 至redis 支持负载均衡部署 SpringSecurity6.0RedisJWTMP基于token认证功能开发&#xff08;源码级剖析可用于实际生产项目&#xff09;_springsecurity redis管理token…...

编程日记 2024/3/22 9:29:12

HarmonyOS系统开发ArkTS常用组件编程技巧

目录 样式复用 Styles方法 Extend方法 组件编程在使用过程中有很多技巧&#xff0c;在这里分享样式复用技巧和UI结构复用技巧。 样式复用 我们观察下面的代码&#xff0c;在代码中很多重复行的代码&#xff0c;如&#xff1a; Image 的 .width(30).height(30) 是重复的But…...

编程日记 2024/3/22 9:28:11

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2026/2/5 4:39:03

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2026/1/20 2:37:04

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/10/16 16:03:09