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

CSS3新增长度单位

news 2026/3/27 16:46:51

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>

相关文章：

CSS3新增长度单位

CSS3新增长度单位 rem&#xff1a;根元素字体的倍数&#xff0c;只与根元素字体大小有关&#xff1b;vw&#xff1a;占视口宽度的百分比&#xff1b;vh&#xff1a;占视口高度的百分比&#xff1b;vmax&#xff1a;占视口中宽和高最大的百分比&#xff1b;vmin&#xff1a;占视…...

编程日记 2024/10/29 20:52:32

【Spring】创建Spring项目前的配置工作

&#x1f94a;作者&#xff1a;一只爱打拳的程序猿&#xff0c;Java领域新星创作者&#xff0c;CSDN、阿里云社区优质创作者。 &#x1f93c;文章收录于&#xff1a;Spring 目录 1.下载Spring Initializr 2.配置Spring国内源 3.添加Spring框架的支持(pom.xml) 4.刷新Maven仓…...

编程日记 2024/10/29 20:51:31

docker 安装部署 nginx

命令 docker run \ -p 15008:80 \ --name nginx1.21.6 \ -v /iepms/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \ -v /iepms/nginx/conf/conf.d:/etc/nginx/conf.d \ -v /iepms/nginx/log:/var/log/nginx \ -v /iepms/nginx/html:/usr/share/nginx/html \ -d 192.168.1.103…...

编程日记 2024/10/29 20:49:29

黑马数据库学习笔记

课程地址 &#xff08;基础篇&#xff09;MySQL的启动 mysql 默认使用 3306 端口 在 centos下&#xff0c;启动 mysql 数据库&#xff1a;service mysqld start; 查看状态/启动/停止/重启&#xff1a;systemctl status/start/stop/restart mysqld; 登录到mysql数据库&…...

编程日记 2024/10/29 20:48:26

MYSQL-SQL-03-DQL（Data Query Language，数据查询语言）（单表查询）

DQL&#xff08;数据查询语言&#xff09; DQL英文全称是Data Query Language(数据查询语言)&#xff0c;数据查询语言&#xff0c;用来查询数据库中表的记录。 查询关键字: SELECT 在一个正常的业务系统中&#xff0c;查询操作的频次是要远高于增删改的&#xff0c;当我们去访…...

编程日记 2024/10/29 20:47:25

【数据结构和算法】三、动态规划原理讲解与实战演练

目录 1、什么是动态规划&#xff1f; 2、动态规划实战演练 2.1 力扣题之爬楼梯问题 &#xff08;1&#xff09;解题思路1: &#xff08;2&#xff09;解题思路2: &#xff08;3&#xff09;动态规划&#xff08;DP&#xff09;&#xff1a;解题思路 &#xff08;4&#x…...

编程日记 2024/10/29 20:42:18

交叉编译 perl-5.40.0（riscv64）

交叉编译 perl-5.40.0&#xff08;riscv64&#xff09; https://arsv.github.io/perl-cross/usage.html https://github.com/arsv/perl-cross 借助 perl-cross 进行交叉编译 https://www.perl.org/get.html#unix_like 这里获取 perl-5.40.0 的源码 https://github.com/arsv/pe…...

编程日记 2024/10/29 20:41:17

Leetcode 搜索旋转排序数组

这段代码是用于解决LeetCode第33题“搜索旋转排序数组”的Java解法。以下是对该算法思想的中文解释&#xff1a; 算法思想 二分查找的基本思路&#xff1a; 由于数组是部分有序的&#xff08;被旋转过&#xff09;&#xff0c;我们可以利用二分查找的思想&#xff0c;逐步缩小…...

编程日记 2024/10/29 20:40:15

Spring Task—定时任务

Spring Task 是 Spring 提供的一种轻量级定时任务调度功能&#xff0c;内置在 Spring 框架中。与 Quartz 等重量级调度框架相比&#xff0c;Spring Task 使用简便&#xff0c;无需额外依赖&#xff0c;适合在简单的调度任务场景中使用。通过注解配置方式&#xff0c;开发者可以…...

编程日记 2024/10/29 20:39:14

Spring Boot 应用开发概述

目录 Spring Boot 应用开发概述 Spring Boot 的核心特性 Spring Boot 的开发模式 Spring Boot 在企业应用开发中的优势 结论 Spring Boot 应用开发概述 Spring Boot 是由 Pivotal 团队开发的一个框架&#xff0c;基于 Spring 框架&#xff0c;旨在简化和加速基于 Spring …...

编程日记 2024/10/29 20:38:12

Chrome谷歌浏览器加载ActiveX控件之allWebDesktop控件介绍

背景 allWebDesktop控件是一款方便用户在线打开各类文档的OA办公控件。它设计比较轻巧&#xff0c;充分利用计算机程序资源打开文档&#xff0c;并将程序窗口嵌入到allWebDesktop控件区域内&#xff0c;从而实现浏览器内打开各类文档效果。 allWebPlugin中间件是一款为用户提供…...

编程日记 2024/10/29 20:32:06

GitHub Star 数量前 5 的开源应用程序生成器

欢迎来的 GitHub Star 数量排名系列文章的第 7 篇——最受欢迎的应用程序生成器。 之前我们已经详细探讨过&#xff1a;在 GitHub 上最受欢迎的——无代码工具、低代码项目、内部工具、CRUD项目、自部署项目和 Airtable 开源替代品。累计超过 50 个优质项目&#xff01;&#…...

编程日记 2024/10/29 20:30:04

DBC文件当中新建CANFD等类型的报文

同学最近有添加CANFD报文的需求&#xff0c;需要用到CANFD类型报文的DBC文件&#xff0c;这下就难住我了&#xff0c;我之前用的DBC文件只有“CAN Standard”“CAN Extended”两种类型&#xff0c;压根没见过FD的。 后来他找到了项目之前的DBC&#xff0c;打开来看&#xff0c…...

编程日记 2024/10/29 20:29:02

基于SpringBoot的房地产销售管理系统【附源码】

基于SpringBoot的房地产销售管理系统&#xff08;源码L文说明文档&#xff09; 目录 4 系统设计 4.1用户登录功能的详细实现 4.2管理员权限的功能实现 4.2.1客户信息管理功能的详细实现 4.2.2房产管理功能的详细实现 4.2.3预约看房功能的详细实现 4.2.4论…...

编程日记 2024/10/29 20:27:00

圆点虚线 Android

参考 https://blog.csdn.net/l_o_s/article/details/73550876 <com.xxx.wwww.weight.PointDividerViewandroid:layout_width"match_parent"android:layout_height"wrap_content"app:PDbackgroundColor"color/white"app:dotColor"color/…...

编程日记 2024/10/29 20:25:59

贵州鑫宏远农业-始终致力于推动现代农业的科技创新与发展

贵州鑫宏远农业科技有限公司&#xff0c;是一家在高科技农业领域深耕细作、锐意进取的企业。自成立以来&#xff0c;我们始终致力于推动现代农业的科技创新与发展&#xff0c;业务全面覆盖农业科学研发、组织培养生产、专业育苗培植、半成品及成品精细化养护、市场销售以及全方…...

编程日记 2024/10/29 20:24:57

程序员做销售，从代码到客户的逆袭之路

大家好&#xff0c;我是小悟。 在这个互联网风起云涌、技术迭代日新月异的时代&#xff0c;“跨界”已然成为一种新潮流。就好似那从天而降的大侠&#xff0c;一不小心就可能横跨了数个充满奇遇与挑战的领域。 想象一下&#xff0c;一个平日里只跟代码打交道的程序员&#xf…...

编程日记 2024/10/29 20:23:56

Flink CDC系列之：理解学习Kubernetes模式

Flink CDC系列之&#xff1a;理解学习Kubernetes模式 准备会话模式启动会话集群设置 Flink CDC提交 Flink CDC Job Kubernetes 是一种流行的容器编排系统&#xff0c;用于自动化计算机应用程序的部署、扩展和管理。Flink 的原生 Kubernetes 集成允许您直接在正在运行的 Kuberne…...

编程日记 2024/10/29 20:22:54

git合并相关操作详解

在使用Git进行分支管理时，合并（merge）操作是非常常见的。下面是Git合并相关的详细步骤和一些常见的场景及注意事项。 一、 基本合并操作 假设我们有两个分支：main 和 feature，希望将 feature 合并到 main 上。 切换到目标分支 首先需要切换到你想合并到的分支。例如，切…...

编程日记 2024/10/29 20:20:53

前端经典【面试题】持续更新HTML、CSS、JS、VUE、FLUTTER、性能优化等

HTML/CSS 面试题 什么是语义化 HTML&#xff1f; 说明&#xff1a;语义化 HTML 使用 HTML 标签来描述内容的含义&#xff0c;而不仅仅是其外观。使用语义化标签可以提高可读性和可访问性&#xff0c;并对 SEO 友好。示例&#xff1a; <header><h1>网站标题</h1&…...

编程日记 2024/10/29 20:18:50

ESP32+BC260Y+L76K开发板实战：NB-IoT户外定位数据上传MQTT全流程（附避坑指南）

ESP32BC260YL76K开发板实战&#xff1a;NB-IoT户外定位数据上传MQTT全流程&#xff08;附避坑指南&#xff09; 在物联网应用快速发展的今天&#xff0c;户外定位数据的采集与传输已成为智慧农业、资产追踪、环境监测等领域的核心需求。ESP32作为一款高性价比的Wi-Fi/蓝牙双模芯…...

编程新知 2026/3/27 15:39:03

Linux服务器GPU环境配置避坑指南：从Nvidia驱动到PyTorch Lightning一站式搞定

Linux服务器GPU环境配置避坑指南&#xff1a;从Nvidia驱动到PyTorch Lightning一站式搞定 当你第一次在Linux服务器上配置GPU环境时&#xff0c;可能会遇到各种令人抓狂的问题&#xff1a;驱动安装失败、CUDA版本不兼容、PyTorch无法识别GPU...这些问题足以让任何一个开发者崩溃…...

编程新知 2026/3/27 15:12:51

Nunchaku-flux-1-dev部署避坑指南：解决403 Forbidden错误

Nunchaku-flux-1-dev部署避坑指南&#xff1a;解决403 Forbidden错误 部署Nunchaku-flux-1-dev时遇到403 Forbidden错误&#xff1f;别急&#xff0c;这篇文章手把手带你排查和解决这个常见但棘手的问题。 最近在部署Nunchaku-flux-1-dev时&#xff0c;不少小伙伴反映遇到了403…...

编程新知 2026/3/27 14:40:41

知识管理新范式：跨平台无缝迁移与团队协作效能提升指南

知识管理新范式&#xff1a;跨平台无缝迁移与团队协作效能提升指南 【免费下载链接】outline Outline 是一个基于 React 和 Node.js 打造的快速、协作式团队知识库。它可以让团队方便地存储和管理知识信息。你可以直接使用其托管版本&#xff0c;也可以自己运行或参与开发。源项…...

编程新知 2026/3/27 14:18:21

告别混乱！用CANoe的arxml数据库高效管理车载网络信号（附Signal/PDU/Frame创建全流程）

告别混乱&#xff01;用CANoe的arxml数据库高效管理车载网络信号&#xff08;附Signal/PDU/Frame创建全流程&#xff09; 当车载网络从简单的CAN总线发展到包含FlexRay、以太网等多协议混合架构时&#xff0c;工程师们面临的信号管理复杂度呈指数级增长。一个典型的域控制器项目…...

编程新知 2026/3/27 13:02:54

三菱电机MR-J5伺服系统实战：如何用CC-Link IE TSN搭建高效生产线（附配置清单）

三菱电机MR-J5伺服系统实战&#xff1a;CC-Link IE TSN智能产线部署指南 在工业4.0的浪潮中&#xff0c;生产线的智能化升级已成为制造业提升竞争力的关键。作为这一变革的核心驱动技术&#xff0c;三菱电机MR-J5系列伺服系统凭借其支持CC-Link IE TSN网络的独特优势&#xff0…...

编程新知 2026/3/27 12:26:46

动态规划详解：从入门到精通，这四个案例让你彻底掌握DP思想

面试必考、算法进阶的核心&#xff0c;一篇文章帮你打通任督二脉在算法学习的过程中&#xff0c;动态规划&#xff08;Dynamic Programming&#xff0c;简称DP&#xff09;绝对是让很多人头疼的一个难点。很多初学者看到DP问题就发怵&#xff0c;其实只要掌握了核心思想&#x…...

编程新知 2026/3/27 11:56:20

燃油车虎视眈眈，电车涨价的图谋必将落空，油价上涨的利好将消失

近期以来多家电车企业涨价&#xff0c;美国电车涨价尤为明显&#xff0c;最高涨幅2万元&#xff0c;而国产电车涨价3000-1.4万元不等&#xff0c;凸显出电车似乎突然间对市场乐观起来&#xff0c;导致他们信心十足的在于3月份以来的油价上涨&#xff0c;但是这种涨价将迅速导致…...

编程新知 2026/3/27 11:29:59

SDMatte+边缘精修效果展示：羽毛建模精度、纱布透光过渡、叶片脉络保留

SDMatte边缘精修效果展示&#xff1a;羽毛建模精度、纱布透光过渡、叶片脉络保留 1. 惊艳效果开场 想象一下这样的场景&#xff1a;你需要为一件羽毛饰品拍摄产品图&#xff0c;但无论怎么调整灯光和背景&#xff0c;羽毛边缘总是显得模糊不清&#xff1b;或者当你尝试抠出一…...

编程新知 2026/3/27 11:01:52

3分钟掌握图片比对：PicQuickCompare让你高效发现视觉差异

3分钟掌握图片比对&#xff1a;PicQuickCompare让你高效发现视觉差异 【免费下载链接】PicQuickCompare Compare two pictures quickly 项目地址: https://gitcode.com/gh_mirrors/pi/PicQuickCompare PicQuickCompare是一款专为快速图片比对而设计的轻量级工具&#xf…...

编程新知 2026/3/27 10:39:48