CSS3新增长度单位

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.mzph.cn/news/883781.shtml

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

相关文章

react-signature-canvas 实现画笔与橡皮擦功能

react-signature-canvas git 地址 代码示例 import React, { Component } from react import { createRoot } from react-dom/clientimport SignaturePad from ../../src/index.tsximport * as styles from ./styles.module.cssclass App extends Component {state { trimmed…

Kafka 解决消息丢失、乱序与重复消费

一、引言 在分布式系统中&#xff0c;Apache Kafka 作为一种高吞吐量的分布式发布订阅消息系统&#xff0c;被广泛应用于日志收集、流式处理、消息队列等场景。然而&#xff0c;在实际使用过程中&#xff0c;可能会遇到消息丢失、乱序、重复消费等问题&#xff0c;这些问题可能…

Java知识巩固(十二)

I/O JavaIO流了解吗&#xff1f; IO 即 Input/Output&#xff0c;输入和输出。数据输入到计算机内存的过程即输入&#xff0c;反之输出到外部存储&#xff08;比如数据库&#xff0c;文件&#xff0c;远程主机&#xff09;的过程即输出。数据传输过程类似于水流&#xff0c;因…

中间件安全(三)

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 前言: 本文主要讲解apache命令执行漏洞&#xff08;cve_2021_41773&#xff09;。 靶场链接&#xff1a;Vulfocus 漏洞威胁分析平台 一&#xff0c;漏洞简介。 cve_2021_41773漏洞…

工欲善其事必先利其器——Anaconda安装教程(2024版本)

前言 在数据科学、机器学习、科学计算等领域&#xff0c;Python 因其简洁的语法和强大的库支持而广受欢迎。Anaconda 是一个流行的Python发行版&#xff0c;它包含了大量的科学计算和数据分析库&#xff0c;极大地方便了开发者和研究者的工作。本文将为您提供2024版本的Anacon…

ctfshow(155->158)--文件上传漏洞--绕过黑名单

Web155 进入界面&#xff1a; 审计&#xff1a; 前端校验&#xff1a;限制传入文件的后缀为.png MIME验证 黑名单过滤 思路/EXP&#xff1a; 先上传.user.ini文件&#xff1a; 将.user.ini.png文件上传&#xff0c;然后抓包去掉.png后缀&#xff0c;就同时绕过了前端校验…

第7次CCF CSP认证真题解

1、折点计数 题目链接&#xff1a;https://sim.csp.thusaac.com/contest/7/problem/0 100分代码&#xff1a; #include <iostream> using namespace std; int main(int argc, char *argv[]) {int n;cin >> n;int a[1010];for(int i 0; i < n; i){cin >&g…

我谈Canny算子

在Canny算子的论文中&#xff0c;提出了好的边缘检测算子应满足三点&#xff1a;①检测错误率低——尽可能多地查找出图像中的实际边缘&#xff0c;边缘的误检率&#xff08;将边缘识别为非边缘&#xff09;低&#xff0c;且避免噪声产生虚假边缘&#xff08;将非边缘识别为边缘…

STM32-Cube定时器TIM

一、内部时钟源 1、创建项目 File → New → STM32 project选择STM32F103C8T6单片机&#xff0c;命名TIM 2、配置单片机 1.打开USART1&#xff0c;方便我们与电脑连接查看数据 开启UART1并开启中断。 2、设置时钟源 开启外部高速晶振 将时钟频率设置为72MHz 设置调试模…

三款计算服务器配置→如何选择科学计算服务器?

科学计算在众多领域都扮演着关键角色&#xff0c;无论是基础科学研究还是实际工程应用&#xff0c;强大的计算能力都是不可或缺的。而选择一台合适的科学计算服务器&#xff0c;对于确保科研和工作的顺利进行至关重要。 首先&#xff0c;明确自身需求是重中之重。要仔细考虑计算…

uni-app @click.stop @click.stop.native均不生效

原因就是用了nvue导致的 vue等其他环境都可以 解决&#xff1a;e.stopPropagation() click"goExecute($event)" goExecute(e) {e.stopPropagation()}, uniApp官方真的是一坨大翔&#xff0c;不仅社区不维护&#xff0c;文档也写的跟粑粑一样&#xff0c;自创的nv…

从零开始:建立高效的数据清洗流程

从零开始&#xff1a;建立高效的数据清洗流程 在当今数据驱动的时代&#xff0c;数据质量直接决定了分析结果的准确性和业务决策的有效性。然而&#xff0c;原始数据往往包含错误、重复、缺失或不一致的信息&#xff0c;这要求我们在数据分析之前进行数据清洗。数据清洗是一个…

【SSM详细教程】-14-SpringAop超详细讲解

精品专题&#xff1a; 01.《C语言从不挂科到高绩点》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482 02. 《SpringBoot详细教程》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12789841.html?spm1001.20…

Go 1.19.4 命令调用、日志、包管理、反射-Day 17

1. 系统命令调用 所谓的命令调用&#xff0c;就是通过os&#xff0c;找到系统中编译好的可执行文件&#xff0c;然后加载到内存中&#xff0c;变成进程。 1.1 exec.LookPath&#xff08;寻找命令&#xff09; 作用&#xff1a; exec.LookPath 函数用于在系统的环境变量中搜索可…

leetcode 763.划分字母区间

思路&#xff1a;贪心 其实这个题目并不难&#xff0c;只需要分析出来每一个字母最后出现的坐标就行。 我们根据字母最后出现的坐标数来判断最后划分的字符串。 比如说&#xff0c;字符串前面有abc&#xff0c;这三个字母最后出现的地方就是这个位置&#xff0c;那么我们直接…

numpy——数学运算

一、标量——矢量 import numpy as npa 3.14 b np.array([[9, 5], [2, 7]])print(a) print(b)# ---------- 四则运算 ---------- print(a b) # np.add print(a - b) # np.subtract print(a * b) # np.multiply print(a / b) # np.divide 二、矢量——矢量 import nump…

Redis混合持久化原理

文章目录 1.Redis混合持久化原理2.采用混合持久化时&#xff0c;用的aof文件和rdb分别记录的是什么时候的数据&#xff1f;Redis 宕机&#xff0c;数据会丢失么&#xff1f; 1.Redis混合持久化原理 Redis的混合持久化&#xff08;Hybrid Persistence&#xff09;是一种结合了R…

Presto

Presto 是一个高性能、分布式 SQL 查询引擎&#xff0c;最早由 Facebook 开发&#xff0c;用于实时处理大规模数据。它支持通过 SQL 查询多种数据源&#xff0c;特别是在大数据分析领域广泛使用。 1. Presto 的特点 高性能&#xff1a;Presto 采用内存计算&#xff0c;并行处理…

【JavaEE】【多线程】定时器

目录 一、定时器简介1.1 Timer类1.2 使用案例 二、实现简易定时器2.1 MyTimerTask类2.2 实现schedule方法2.3 构造方法2.4 总代码2.5 测试 一、定时器简介 定时器&#xff1a;就相当于一个闹钟&#xff0c;当我们定的时间到了&#xff0c;那么就执行一些逻辑。 1.1 Timer类 …

【HTML】之基本标签的使用详解

HTML&#xff08;HyperText Markup Language&#xff0c;超文本标记语言&#xff09;是构建网页的基础。它不是一种编程语言&#xff0c;而是一种标记语言&#xff0c;用于描述网页的内容和结构。本文将带你了解HTML的基础知识&#xff0c;并通过详细的代码示例和中文注释进行讲…