CSS3新增长度单位

ops/2024/10/29 23:50:05/

CSS3新增长度单位

  • rem:根元素字体的倍数,只与根元素字体大小有关;
  • vw:占视口宽度的百分比;
  • vh:占视口高度的百分比;
  • vmax:占视口中宽和高最大的百分比;
  • vmin:占视口中宽和高最小的百分比。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>CSS3新增长度单位</title><style>.d1 {height: 10rem;width: 10rem;background-color: antiquewhite;margin: 0 auto;margin-top: 10px;}.d2 {height: 10vh;width: 10vw;background-color: greenyellow;margin: 0 auto;margin-top: 10px;}.d3 {height: 10vmax;width: 10vmin;background-color: rosybrown;margin: 0 auto;margin-top: 10px;}</style>
</head><body><div class="d1"></div><div class="d2"></div><div class="d3"></div>
</body></html>

http://www.ppmy.cn/ops/129444.html

相关文章

初识WebGL

思路&#xff1a; 构建<canvas>画布节点&#xff0c;获取其的实例。使用getWebGLContext() 拿到画布上下文。拿到上下文用clearColor() 设置背景颜色。最后清空canvas画布,是为了清除颜色缓冲区。 html结构&#xff1a; <!DOCTYPE html> <html lang"en&…

【Hadoop】hadoop的路径分不清?HDFS路径与本地文件系统路径的区别

/usr/local/hadoop /user/hadoop /home/hadoop/ 这里有些路径名很相似&#xff0c;帮我区分&#xff1f; 在Hadoop生态系统中&#xff0c;理解文件存储的位置对于有效管理数据至关重要。Hadoop分布式文件系统&#xff08;HDFS&#xff09;提供了一个高度可靠的存储系统&#xf…

Kafka-代码示例

一、构建开发环境 File > New > Project 选择一个最简单的模板 项目和坐标命名 配置maven路径 添加maven依赖 <dependencies><!-- https://mvnrepository.com/artifact/org.apache.kafka/kafka-clients --><dependency><groupId>org.apache.kaf…

Es可视化界面 ElasticHd

前言 在开发的过程中&#xff0c;有一个可视化界面工具&#xff0c;以及一个可执行的es相关语句的工具十分重要&#xff0c;主要有以下这些 1. Kibana‌&#xff1a;○ Kibana是Elastic官方提供的数据可视化工具&#xff0c;功能强大&#xff0c;支持多种图表类型&#xff0c…

初始JavaEE篇——多线程(4):wait、notify,饿汉模式,懒汉模式,指令重排序

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 目录 wait、notify 方法 多线程练习 单例模式 饿汉模式 懒汉模式 指令重排序 wait、notify 方法 wait 和 我们前面学习的sleep…

数据采集与数据分析:数据时代的双轮驱动

“在当今这个数据驱动的时代&#xff0c;信息已成为企业决策、市场洞察、科学研究等领域不可或缺的核心资源。而爬虫数据采集与数据分析&#xff0c;作为数据处理链条上的两大关键环节&#xff0c;它们之间相辅相成&#xff0c;共同构成了数据价值挖掘的强大引擎。” 爬虫数据采…

MySQL Workbench工作台汉化

一、下载汉化包 通过百度网盘分享的文件&#xff1a;MySQL汉化包.rar 链接&#xff1a;https://pan.baidu.com/s/1PaJSU9dvVnQQWEESHSue5Q 二、汉化过程 注意&#xff1a;替换之前一定要记得把两个文件复制出来存着&#xff0c;防止替换失败修改了文件 找到MySQL的工作台da…

武器检测与分割系统:全程教学跟进

武器检测与分割系统源码&#xff06;数据集分享 [yolov8-seg-SPPF-LSKA&#xff06;yolov8-seg-FocalModulation等50全套改进创新点发刊_一键训练教程_Web前端展示] 1.研究背景与意义 项目参考ILSVRC ImageNet Large Scale Visual Recognition Challenge 项目来源AAAI Glob…