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

html5cssjs代码 039 元素尺寸

news 2026/1/24 8:11:51

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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/1/16 3:56:34

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2026/1/15 8:19:52

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/10/4 3:01:43

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

编程新知 2025/12/8 14:33:23

高抗扰度汽车光耦合器的特性

晶台光电推出的125℃光耦合器系列产品&#xff08;包括KL357NU、KL3H7U和KL817U&#xff09;&#xff0c;专为高温环境下的汽车应用设计&#xff0c;具备以下核心优势和技术特点&#xff1a; 一、技术特性分析 高温稳定性 采用先进的LED技术和优化的IC设计&#xff0c;确保在…...

编程新知 2026/1/21 23:14:59

spring boot使用HttpServletResponse实现sse后端流式输出消息

1.以前只是看过SSE的相关文章&#xff0c;没有具体实践&#xff0c;这次接入AI大模型使用到了流式输出&#xff0c;涉及到给前端流式返回&#xff0c;所以记录一下。 2.resp要设置为text/event-stream resp.setContentType("text/event-stream"); resp.setCharacter…...

编程新知 2026/1/20 20:58:11

大模型的LoRa通讯详解与实现教程

一、LoRa通讯技术概述 LoRa（Long Range）是一种低功耗广域网（LPWAN）通信技术，由Semtech公司开发，特别适合于物联网设备的长距离、低功耗通信需求。LoRa技术基于扩频调制技术，能够在保持低功耗的同时实现数公里甚至数十公里的通信距离。 LoRa的主要特点 长距离通信：在城…...

编程新知 2025/11/2 19:43:08