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

html5cssjs代码 039 元素尺寸

news 2026/5/31 23:48:30

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

DMA-330地址空间限制与扩展方案解析

1. DMA-330地址空间限制解析DMA-330作为Arm CoreLink系列中的直接内存访问控制器&#xff0c;其物理寻址能力直接由AxADDR信号宽度决定。这个32位地址总线宽度意味着它原生仅支持4GB&#xff08;2^32字节&#xff09;的物理地址空间访问。在实际嵌入式系统设计中&#xff0c;这…...

编程新知 2026/5/26 3:11:57

2605.VGGT-Omega 论文解读: 3D重建的Scaling Law, Register Attention效率革命 | Oxford+Meta CVPR26 Oral

VGGT-Omega: Scaling Feed-Forward 3D Reconstruction Jianyuan Wang, Minghao Chen, Shangzhan Zhang, Nikita Karaev, Johannes Schonberger, et al. Visual Geometry Group, Oxford Meta AI | CVPR 2026 Oral | arXiv 2605.15195 Paper | Project Page 一句话总结 VGGT-Om…...

编程新知 2026/5/26 1:33:08

【紧急预警】92%的DeepSeek测试用例生成失败源于这4个隐性配置缺陷——资深SDET连夜整理修复清单

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;DeepSeek测试用例生成的现状与危机本质 当前&#xff0c;DeepSeek系列大模型&#xff08;如DeepSeek-Coder、DeepSeek-VL&#xff09;在代码生成与理解任务中展现出强大能力&#xff0c;但其测试用例自动生成…...

编程新知 2026/5/26 0:56:48

终极免费方案：WandEnhancer完整解锁WeMod Pro功能快速指南

终极免费方案&#xff1a;WandEnhancer完整解锁WeMod Pro功能快速指南 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 你是否渴望享受WeMod Pro会员的所…...

编程新知 2026/5/26 0:26:14

flameshow性能优化技巧：如何快速定位Go程序中的CPU热点

flameshow性能优化技巧&#xff1a;如何快速定位Go程序中的CPU热点 【免费下载链接】flameshow A terminal Flamegraph viewer. 项目地址: https://gitcode.com/gh_mirrors/fl/flameshow &#x1f525; 想要快速定位Go程序中的性能瓶颈吗&#xff1f;flameshow是一个强大…...

编程新知 2026/5/25 22:18:24

武汉国电华美16875kVA串联谐振试验装置，这手活儿细

在超高压变电站和长距离电缆的现场&#xff0c;交流耐压试验是检验设备绝缘的“最后一关”。这位老师傅经手过不少大工程&#xff0c;他说&#xff0c;面对GIS、大型变压器这些“大块头”电容性试品&#xff0c;能不能顺利“过关”&#xff0c;往往就看串联谐振装置顶不顶得住。…...

编程新知 2026/5/25 22:06:17

中小企无需重型数据中台：轻量化数据体系搭建完整方案

过去几年&#xff0c;“数据中台”一度成为企业数字化的标配热词。大量中小企业盲目跟风搭建重型数据中台&#xff0c;投入高额成本、耗费数月甚至数年周期&#xff0c;最终落地效果极差&#xff1a;功能冗余、运维复杂、使用率低、投入产出比失衡。大量项目最终沦为“摆设式中…...

编程新知 2026/5/25 17:39:42

Sora 2 GIF导出速度提升300%？20年多媒体架构师亲授GPU加速转码链路（CUDA 12.4 + cuVID硬编实测）

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Sora 2 GIF导出方法概览 Sora 2 并非 OpenAI 官方发布的模型&#xff0c;当前&#xff08;截至2024年&#xff09;并无名为“Sora 2”的公开产品。因此&#xff0c;所谓“Sora 2 GIF导出”实为社区对视频生成工…...

编程新知 2026/5/25 17:06:25

H3C VSR路由器实战：用QoS策略给不同VLAN用户打DSCP标签（附配置命令详解）

H3C VSR路由器QoS实战&#xff1a;基于VLAN的DSCP标记与流量调度指南 在企业网络环境中&#xff0c;不同业务对网络质量的需求差异显著。普通办公流量可以容忍轻微延迟&#xff0c;但视频会议需要稳定的低延迟保障&#xff0c;而访客上网则可能消耗大量带宽却无需优先保障。本文…...

编程新知 2026/5/25 15:23:55

FModel完整部署指南：UE5资源提取与逆向解析实战

1. 为什么FModel不是“另一个UE资源查看器”&#xff0c;而是虚幻项目逆向分析的起点FModel虚幻引擎资源提取工具完整部署指南——这标题里藏着三个被多数人忽略的关键信号&#xff1a;“FModel”不是泛指&#xff0c;“虚幻引擎”特指UE4/UE5原生资产体系&#xff0c;“完整部…...

编程新知 2026/5/25 14:29:49