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

re:从0开始的CSS学习之路 4. 长度单位

news 2026/5/14 8:22:23

1. 长度单位

  1. 像素px：一个像素就是屏幕中一个不可分割的点。我们应用的屏幕实际上是由一个个的像素点构成的。
    不同显示器的像素点大小也不同，在屏幕尺寸相同的情况下，像素越小，显示效果越清晰。
    大部分浏览器默认字体大小是16px

  2. 百分比%：相对于父元素相同样式大小的百分比进行计算
    优点：当父元素大小发生变化时，子元素的大小也会按比例进行调整

  3. 相对于字体大小单位 em：相对于当前元素字体大小进行计算
    1em = 当前字体大小（1倍的font-size）
    2em = 2倍font-size

    优点：字体大小发生变化时，em也会随之发生变化

  4. rem：相对于根元素字体大小进行计算

示例如下：

<!DOCTYPE html>
<html lang="en" style="font-size: 30px;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS length units</title>.father {font-size: 50px;width: 500px;background-color: #c7edcc;}.son {font-size: 200%;background-color: #fde6e0;/* width: 200%; */width: 6rem;}
</head><body><div class="father">今天天气不错<div class="son">挺风和日丽的</div></div>
</body></html>

PS：em和rem有些时候可能会有奇效

相关文章：

re:从0开始的CSS学习之路 4. 长度单位

1. 长度单位 像素px&#xff1a;一个像素就是屏幕中一个不可分割的点。我们应用的屏幕实际上是由一个个的像素点构成的。 不同显示器的像素点大小也不同&#xff0c;在屏幕尺寸相同的情况下&#xff0c;像素越小&#xff0c;显示效果越清晰。 大部分浏览器默认字体大小是16px …...

编程日记 2024/2/7 21:16:31

golang开源定时任务调度框架

golang开源定时任务调度框架 Go语言中有很多开源的定时任务调度框架&#xff0c;以下几个是比较流行常用的&#xff1a; golang开源定时任务框架介绍 cron 一个基于Cron表达式的定时任务库&#xff0c;可以精确到秒级。它提供了简单易用的API来定义和管理定时任务&#xff…...

编程日记 2024/2/7 21:15:30

GridModel事件集合——yonBIP低代码

我们接着看表格相关的事件&#xff0c;用友的文档打不开&#xff0c;真的是天大的404&#xff0c;客观请看这个开发文档网址&#xff0c;找不到了&#xff0c;你说holy 不咯&#xff1f;http://tinper.org/mdf/&#xff08;如果有哪位小伙伴知道这个地址是不是迁移了的话&#…...

编程日记 2024/2/7 21:13:28

苹果macbook电脑删除数据恢复该怎么做？Mac电脑误删文件的恢复方法

苹果电脑删除数据恢复该怎么做&#xff1f;Mac电脑误删文件的恢复方法 如何在Mac上恢复误删除的文件&#xff1f;在日常使用Mac电脑时&#xff0c;无论是工作还是娱乐&#xff0c;我们都会创建和处理大量的文件。然而&#xff0c;有时候可能会不小心删除一些重要的文件&#x…...

编程日记 2024/2/7 21:10:25

2024年R2移动式压力容器充装证模拟考试题库及R2移动式压力容器充装理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年R2移动式压力容器充装证模拟考试题库及R2移动式压力容器充装理论考试试题是由安全生产模拟考试一点通提供&#xff0c;R2移动式压力容器充装证模拟考试题库是根据R2移动式压力容器充装最新版教材&#xff0c;R2…...

编程日记 2024/2/7 21:07:22

云开发超多功能工具箱组合微信小程序源码/附带流量主

这是一款云开发超多功能工具箱组合微信小程序源码附带流量主功能&#xff0c;小程序内包含了40余个功能&#xff0c;堪称全能工具箱了&#xff0c;大致功能如下&#xff1a; 证件照制作 | 垃圾分类查询 | 个性签名制作 二维码生成丨文字九宫格 | 手持弹幕丨照片压缩 | 照片编…...

编程日记 2024/2/7 21:06:20

挑战杯 python+深度学习+opencv实现植物识别算法系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的植物识别算法研究与实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;4分工作量&#xff1a;4分创新点&#xff1a;4分 &#x1f9ff; 更多…...

编程日记 2024/2/7 21:03:17

pytest的常用插件和Allure测试报告

pytest常用插件 pytest-html插件 安装&#xff1a; pip install pytest-html -U 用途&#xff1a; 生成html的测试报告 用法&#xff1a; ​在.ini配置文件里面添加 addopts --htmlreport.html --self-contained-html 效果&#xff1a; 执行结果中存在html测试报告路…...

编程日记 2024/2/7 21:02:16

神经网络的权重是什么？

请参考这个视频https://www.bilibili.com/video/BV18P4y1j7uH/?spm_id_from333.788&vd_source1a3cc412e515de9bdf104d2101ecc26a左边是拟合的函数&#xff0c;右边是均方和误差&#xff0c;也就是把左边的拟合函数隐射到了右边&#xff0c;右边是真实值与预测值之间的均方…...

编程日记 2024/2/7 21:01:14

C语言代码 在屏幕上输出9*9乘法口诀表

在屏幕上输出9*9乘法口诀表。 代码示例&#xff1a; #include <stdio.h>int main() {int i 0;for (i 1; i < 9; i)//打印所有行的循环{int j 0;for (j 1; j < i; j)//打印每一行中所有列的循环{printf("%d*%d%-2d ", i, j, i * j);//%-2d的意思是两…...

编程日记 2024/2/7 20:58:02

11.0 Zookeeper watcher 事件机制原理剖析

zookeeper 的 watcher 机制&#xff0c;可以分为四个过程&#xff1a; 客户端注册 watcher。服务端处理 watcher。服务端触发 watcher 事件。客户端回调 watcher。 其中客户端注册 watcher 有三种方式&#xff0c;调用客户端 API 可以分别通过 getData、exists、getChildren …...

编程日记 2024/2/7 20:57:01

HGAME 2024 WEEK 1 :web ezHTTP

题目&#xff1a; 看到这个就知道是文件头伪造 第一想法就是Referer伪造 所以伪造 Referer: vidar.club 然后构造伪造的Referer 然后提示通过那些东西访问页面&#xff0c;User-Agent: 是构造你浏览器访问信息的&#xff0c;所以复制右边那一串替代就好了 然后要求我们从本地…...

编程日记 2024/2/7 20:55:00

Linux【docker 设置阿里源】

文章目录 一、查看本地docker的镜像配置二、配置阿里镜像三、检查配置 一、查看本地docker的镜像配置 docker info一般没有配置过是不会出现Registry字段的 二、配置阿里镜像 直接执行下面代码即可&#xff0c;安装1.10.0以上版本的Docker客户端都会有/etc/docker 1.建立配置…...

编程日记 2024/2/7 20:53:59

app逆向-frida-rpc详解

Frida-RPC是Frida工具的一个组件&#xff0c;用于在应用程序和Frida脚本之间进行远程过程调用&#xff08;RPC&#xff09;。远程过程调用是一种允许应用程序的不同部分或不同的应用程序之间进行通信的方法。在Frida中&#xff0c;RPC通过JavaScript脚本和应用程序之间建立通信…...

编程日记 2024/2/7 20:52:58

计算机网络（第六版）复习提纲27

7 TCP流量控制 A 利用滑动窗口实现流量控制 所谓流量控制&#xff0c;就是让发送方发送速率不要太快&#xff0c;让接收方来得及接收 1 利用窗口进行流量控制 2 持续计时器和零窗口探测报文&#xff08;仅携带一字节的数据&#xff09; B TCP的传输效率&#xff08;TCP报文段的…...

编程日记 2024/2/7 20:51:56

解析与模拟常用字符串函数strcpy，strcat，strcmp，strstr（一）

今天也是去学习了一波字符串函数&#xff0c;想着也为了加深记忆&#xff0c;所以写一下这篇博客。既帮助了我也帮助了想学习字符串函数的各位。下面就开始今天的字符串函数的学习吧。 目录 strcpy与strncpy strcat与strncat strcmpy strstr strcpy与strncpy 在 C 语言中&…...

编程日记 2024/2/7 20:50:55

node.js后端+小程序前端+mongoDB（增删改查）

前言 今天我对比了以下node.js的express与python的fastAPI&#xff0c;我决定我还是出一期关于node.jsmangoDB小程序的小案例吧。 不是python的fastAPI不好用&#xff0c;因为fastAPI是python较新的技术&#xff0c;我不敢果断发出教学文章&#xff08;这件事情还是留着给pyt…...

编程日记 2024/2/7 20:47:52

thinkphp数据批量提交(群发消息)

<form id="edit-form" class="form-horizontal" role="form" data-toggle<...

编程日记 2024/2/7 20:44:49

大华 DSS 数字监控系统 attachment_getAttList.action SQL 注入漏洞复现

0x01 产品简介 大华 DSS 数字监控系统是大华开发的一款安防视频监控系统，拥有实时监视、云台操作、录像回放、报警处理、设备管理等功能。 0x02 漏洞概述 大华 DSS存在SQL注入漏洞，攻击者 /portal/attachment_getAttList.action 路由发送特殊构造的数据包，利用报错注入获…...

编程日记 2024/2/7 20:43:48

vue2学习笔记（2/2）

vue2学习笔记&#xff08;1/2&#xff09; vue2学习笔记&#xff08;2/2&#xff09; 文章目录 1. 初始化脚手架2. 分析脚手架&render函数文件结构图示及说明main.jsindex.htmlApp.vueSchool.vueStudent.vue 关于不同版本的Vue修改默认配置vue.config.js配置文件 3. ref属…...

编程日记 2024/2/7 20:41:46

计网实验一

课程实验报告专 业&#xff1a;物联网工程 班 级&#xff1a;2303学 号&#xff1a;231040700302 姓 名&#xff1a;杜子健实验名称&#xff1a;实验一实验类型&#xff1a;实验实验日期&#xff1a;2025年11月12日一 实…...

编程新知 2026/5/14 8:08:44

手把手教你用PyTorch 0.4.1复现D-LinkNet道路分割（附完整代码与数据集）

从零复现D-LinkNet道路分割&#xff1a;PyTorch 0.4.1实战指南 当你在GitHub上发现一个两年前的热门道路分割项目D-LinkNet&#xff0c;却发现它依赖PyTorch 0.4.1和CUDA 8.0这种"古董级"环境时&#xff0c;是否感到无从下手&#xff1f;本文将带你穿越时空&#xf…...

编程新知 2026/5/14 6:26:59

多源视频流时空配准，搭建跨摄像机一体化轨迹推演计算平台

多源视频流时空配准&#xff0c;搭建跨摄像机一体化轨迹推演计算平台在数字孪生与视频孪生全域空间智能感知的建设进程中&#xff0c;各类管控场景普遍部署多品牌、多焦距、多布设姿态的异构摄像设备&#xff0c;衍生出大量编码格式各异、传输时延参差、时钟相位错位的多源异步…...

编程新知 2026/5/14 6:08:13

爱搜索 GEO 营销系统实效展示与能力验证

在当前的数字营销环境中&#xff0c;许多企业发现传统的 SEO 手段在应对 AI 驱动的搜索场景时显得力不从心。当潜在客户向大模型提问“哪家装修公司更靠谱”或“推荐几家铝板输送机厂家”时&#xff0c;如果品牌未能出现在 AI 生成的答案中&#xff0c;就意味着失去了最精准的流…...

编程新知 2026/5/14 4:44:36

天线阻抗匹配原理与工程实践指南

1. 天线阻抗匹配基础概念解析阻抗匹配是射频工程师日常工作中最常遇到的技术挑战之一。简单来说&#xff0c;它就像是在为天线系统"调音"&#xff0c;确保射频能量能够顺畅地从发射电路传递到天线&#xff0c;而不会在连接处产生"回声"&#xff08;反射波&…...

编程新知 2026/5/14 2:55:55

金属表面缺陷智能检测新突破

篇名问题&#xff0c;背景方法结论金属表面缺陷自适应分割算法1.金属表面划痕 2.金属表面凹凸 3.金属表面污点 4.金属表面刮擦 5.金属表面裂纹2.1多方向灰度波动分析 2.2领域灰度差分割算法 2.3PCA法图像压缩本文算法与其他算法相比&#xff0c;具有通用性好、分割准确度高等优…...

编程新知 2026/5/14 2:34:40

网易有道发布企业级大模型聚合服务ThinkFlow，终结多模型适配困局，推动应用工程化

5月13日&#xff0c;网易有道正式发布企业级大模型聚合服务ThinkFlow。它将20余款主流大模型统一调度&#xff0c;解决多模型适配难题&#xff0c;还保障稳定、控制成本与安全&#xff0c;推动大模型应用工程化。ThinkFlow&#xff1a;多模型聚合新方案据有道智云平台消息&…...

编程新知 2026/5/14 0:47:32

NotebookLM + Hugging Face协同作战：NLP任务交付周期压缩68%的实证方法论

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM Hugging Face协同作战&#xff1a;NLP任务交付周期压缩68%的实证方法论 NotebookLM&#xff08;Google 推出的基于用户文档的AI助手&#xff09;与 Hugging Face 生态系统深度集成后&#…...

编程新知 2026/5/14 0:32:33

实在Agent实测：解决采购合同审核流程冗长与原材料交付周期拉长的架构之道

大家好&#xff0c;我是企业架构师老王。站在2026年5月这个时间节点回看&#xff0c;全球供应链的复杂程度已远超三年前的预判。近期我在为几家制造型企业做数字化诊断时发现&#xff0c;一个幽灵般的困境正在吞噬企业的利润&#xff1a;采购合同审核流程冗长&#xff0c;直接导…...

编程新知 2026/5/13 23:12:35

网络安全协议验证不求人：手把手教你用VirtualBox导入SPAN虚拟机跑AVISPA

网络安全协议验证实战&#xff1a;VirtualBoxSPAN虚拟机快速搭建AVISPA实验环境 在网络安全研究领域&#xff0c;协议验证是确保通信安全性的关键环节。AVISPA&#xff08;Automated Validation of Internet Security Protocols and Applications&#xff09;作为自动化验证工…...

编程新知 2026/5/13 21:42:18