html5cssjs代码 039 元素尺寸

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来设置元素的尺寸,还通过实际的视觉效果帮助理解不同计量单位的工作原理。通过这种方式,开发者和设计师可以更好地掌握如何在实际项目中应用这些单位来创建响应式和适应不同屏幕尺寸的设计。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/764666.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从0到1实现RPC | 03 重载方法和参数类型转换

一、存在的问题 1.重载方法在当前的实现中还不支持&#xff0c;调用了会报错。 2.类型转换也还存在问题。 假设定义的接口如下&#xff0c;参数是float类型。 在Provider端接受到的是一个Double类型&#xff0c;这是因为web应用接收的请求后处理的类型。 在反射调用的时候就会…

思腾合力受邀出席文化和旅游虚拟现实应用推广交流活动并作主题演讲

3月21日&#xff0c;由文化和旅游部产业发展司主办&#xff0c;中国信息通信研究院、北京市石景山区文化和旅游局、中国动漫集团有限公司承办的“数字赋能文旅场景建设行动——文化和旅游虚拟现实应用推广交流活动”在北京首钢一高炉SoReal科幻乐园成功举办。 思腾合力CMO徐莉受…

openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint

文章目录 openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint249.1 功能描述249.2 语法格式249.3 参数说明249.4 示例 openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint 249.1 功能描述 指明join的顺序&#xff0…

Flutter Widget:StatefulWidgetStatelessWidgetState

Widget 概念 Widget 将是构建Flutter应用的基石&#xff0c;在Flutter开发中几乎所有的对象都是一个 Widget 。 在Flutter中的widget 不仅表示UI元素&#xff0c;也表示一些功能性的组件&#xff0c;如&#xff1a;手势 、主题Theme 等。而原生开发中的控件通常只是指UI元素。…

JAVA八股文面经问题整理第8弹

文章目录 目录 文章目录 提问问题 问题1 问题2 问题3 问题4 问题5 问题6 问题7 问题8 问题9 问题10 写在最后 提问问题 笔试题&#xff1a;n皇后问题笔试题&#xff1a;求一颗二叉搜索树中的众数TCP与UDP的概念&#xff0c;特点&#xff0c;区别和对应的使⽤场景&#xff1f;H…

DashVector - 阿里云向量检索服务

DashVector 文章目录 DashVector一、关于 DashVector二、使用 DashVector 前提准备1、创建Cluster&#xff1a;2、获得API-KEY3、安装最新版SDK 三、快速使用 DashVector1. 创建Client2. 创建Collection3、插入Doc4、相似性检索5、删除Doc6. 查看Collection统计信息7. 删除Coll…

【阿里云物联网】上报设备数据

前言 MQTT客户端上传数据到阿里云服务端&#xff0c;并且能将数据显示出来。在此之前&#xff0c;我们先要懂得阿里云给设备管理划分的概念。首先是产品&#xff0c;所以在产品里要配置内容&#xff0c;产品下的设备才可以使用&#xff0c;比如主题大类都是在产品里面就可以查…

2024-3-22-Qtday3作业

1> 思维导图 2> 要求&#xff1a; 使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否…

【目标检测】YOLOv9理论解读与代码分析

前言 YOLO这个系列的故事已经很完备了&#xff0c;比如一些Decoupled-Head或者Anchor-Free等大的策略改动已经在YOLOv8固定下来&#xff0c;后面已经估计只有拿一些即插即用的tricks进行小改。 mmdetection框架的作者深度眸也在知乎上对“是否会有YOLOv9”这一观点发表看法&a…

Python爬取歌曲宝音乐:轻松下载Jay的歌

歌曲宝是一个不用付费就能听jay的歌曲&#xff0c;但是每次都只能播放一首不方便&#xff0c;于是今天想把它下载下来&#xff0c;本地循环播放&#xff0c;它所用到的接口是某我的还不错哈 获取搜索接口 分析html请求接口&#xff0c;获取到的数据是直接渲染好的HTML内容&…

苍穹外卖-day02

1. 新增员工 1.1 需求分析和设计 注意事项&#xff1a; 账号必须是唯一的手机号为合法的11位手机号码身份证号为合法的18位身份证号码密码默认为123456 本项目约定&#xff1a; 管理端发出的请求&#xff0c;统一使用**/admin**作为前缀。用户端发出的请求&#xff0c;统一使用…

Redis中的缓存穿透

缓存穿透 缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;导致这些请求直接到了数据库上&#xff0c;对数据库造成了巨大的压力&#xff0c;可能造成数据库宕机。 常见的解决方案&#xff1a; 1&#xff09;缓存无效 key 如果缓存和数据库中都查不到某…

Dell戴尔XPS 12 9250二合一笔记本电脑原装出厂Windows10系统包下载

链接&#xff1a;https://pan.baidu.com/s/1rqUEM_q5DznF0om6eevcwg?pwdvij0 提取码&#xff1a;vij0 戴尔原厂WIN10系统自带所有驱动、出厂主题壁纸、系统属性专属联机支持标志、系统属性专属LOGO标志、Office办公软件、MyDell等预装程序 文件格式&#xff1a;esd/wim/sw…

Xilinx FPGA 远程升级时bin和bit文件使用注意

以Spartan-6 ISE开发环境为例。 ISE开发环境支持生成bit和bin格式的程序文件&#xff0c;可以在生成选项进行配置&#xff1a; 把生成的bit文件和bin文件进行二进制比较&#xff0c;发现bit比bin文件头部多了一些内容&#xff08;头部信息&#xff09;&#xff0c;剩余部分完…

Microsoft Edge 中的 Internet Explorer 模式解决ie禁止跳转到edge问题

作为网工&#xff0c;网络中存在很老的设备只能用ie浏览器访问打开&#xff0c;但是win10后打开Internet Explorer 会强制跳转到Edge 浏览器&#xff0c;且有人反馈不会关&#xff0c;为此找到了微软官方的Microsoft Edge 中的 Internet Explorer 模式&#xff0c;可以直接在Mi…

qt 程序 打包 批处理方式

如果可执行程序包含很多自己写的dll&#xff0c;用cmd 方式 使用 windeployqt 绝对路径打包时比较慢&#xff0c;下面介绍通过bat批处理的方式&#xff0c;将打包命令写在文件中&#xff0c;执行bat文件即可&#xff0c;具体步骤如下&#xff1a; 1.复制 将要打包的a1.dll 等…

网络工程师练习题6

网络工程师 综合题 计算并填写下表&#xff1a; TP地址191.23.181.13子网掩码255.255.192.0地址类型 &#xff08;1&#xff09;网络地址&#xff08;2&#xff09;直接广播地址&#xff08;3&#xff09;主机号&#xff08;4&#xff09;子网内的最后一个可用IP地址&#xf…

【使用redisson完成延迟队列的功能】使用redisson配合线程池完成异步执行功能,延迟队列和不需要延迟的队列

1. 使用redisson完成延迟队列的功能 引入依赖 spring-boot-starter-actuator是Spring Boot提供的一个用于监控和管理应用程序的模块 用于查看应用程序的健康状况、审计信息、指标和其他有用的信息。这些端点可以帮助你监控应用程序的运行状态、性能指标和健康状况。 已经有了…

vue请求后端接口提示:CORS header miss ‘Access-Control-Allow-Origin’

原因分析&#xff1a; url请求中协议、域名、端口中只要有任意一个与当前url不相同&#xff0c;及出现跨域。 解决方案&#xff1a; JSONP (利用<script>标签的跨域能力) 例如&#xff1a; <img src"图片url地址" alt"" /> <script src&q…

专业矢量绘图设计软件:Sketch for mac 中文激活版

Sketch for Mac 是一款专业的矢量图形设计工具&#xff0c;主要用于 UI/UX 设计、网页设计、图标设计等领域。它的界面简洁、易用&#xff0c;功能强大&#xff0c;可以帮助设计师快速创建高质量的设计作品。 人性化界面 Sketch的界面非常简洁。最顶端的工具箱包含了最重要的操…