html5cssjs代码 039 元素尺寸

2024-03-23 05:44

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

这篇关于html5cssjs代码 039 元素尺寸的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/837324

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

poj 1258 Agri-Net(最小生成树模板代码)

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码:效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧