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

html5cssjs代码 039 元素尺寸

news 2025/6/19 17:28:29

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

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/6/17 19:30:02

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/6/19 15:23:18

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/6/15 0:44:03

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/6/17 4:44:36

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/6/15 13:07:59

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/6/17 6:11:16

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/6/15 6:14:34

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/6/16 15:24:01

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/6/17 3:05:21

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/6/19 11:33:57