CSS中表示长度的单位有哪些?有什么区别?

CSS中有px、em和rem三个长度单位。px是固定像素,不随页面大小变化;em和rem是相对长度单位,em相对于父元素,rem相对于根元素(html)。

在响应式布局中,rem更常用,因为它只有一个参照物,计算更清晰。

在css中单位长度用的最多的是px、em、rem,这三个的区别是:

px是固定的像素,一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。

对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。

rem中的r意思是root(根源),这也就不难理解了。

em子元素字体大小的em是相对于父元素字体大小
 

在CSS中,表示长度的单位有以下几种:

  1. 像素(px):像素是相对于显示设备的屏幕分辨率而言的,是最常用的单位。1px等于一个设备像素点的大小。

  2. 百分比(%):百分比是相对于父元素的尺寸而言的。例如,设置一个元素的宽度为50%,表示该元素的宽度为父元素宽度的50%。

  3. 可视视口单位(vw、vh、vmin、vmax):可视视口单位是相对于浏览器窗口的尺寸而言的。vw表示相对于视口宽度的1%,vh表示相对于视口高度的1%,vmin表示相对于视口宽度和高度中较小值的1%,vmax表示相对于视口宽度和高度中较大值的1%。

  4. 磅(pt):磅是打印尺寸的单位,1pt等于1/72英寸。

  5. 毫米(mm):毫米是相对于物理尺寸的单位,1mm等于1/25.4英寸。

  6. 厘米(cm):厘米也是相对于物理尺寸的单位,1cm等于10毫米。

这些单位的区别在于其相对性质,像素单位是相对于设备屏幕的分辨率,百分比是相对于父元素的尺寸,可视视口单位是相对于浏览器窗口的尺寸,而磅、毫米和厘米则是相对于物理尺寸的单位。不同单位在使用上有不同的适用情况,选择合适的单位可以更好地控制和适配布局。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/419234.html

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

相关文章

html 页面引入 vue 组件之 http-vue-loader.js

一、http-vue-loader.js http-vue-loader.js 是一个 Vue 单文件组件加载器,可以让我们在传统的 HTML 页面中使用 Vue 单文件组件,而不必依赖 Node.js 等其他构建工具。它内置了 Vue.js 和样式加载器,并能自动解析 Vue 单文件组件中的所有内容…

JDK 8 升级 17 及 springboot 2.x 升级 3.x 指南

文章目录 JDK 8 升级 17简介javax.* 包移到 jakarta.*maven pom 中更新 java 版本 springboot 2.x 升级 3.xspring-boot 与 cloud、alibaba-cloud 的版本对应redis 默认配置调整SpringBoot 3.x 整合 Querydsl其他注意事项 maven 及 maven 插件的版本升级maven 版本升级maven-co…

HUAWEI华为MateBook B5-420 i5 集显(KLCZ-WXX9,KLCZ-WDH9)原装出厂Windows10系统文件下载

适用型号:KLCZ-WXX9、KLCZ-WDH9 链接:https://pan.baidu.com/s/12xnaLtcPjZoyfCcJUHynVQ?pwdelul 提取码:elul 华为原装系统自带所有驱动、出厂主题壁纸、系统属性联机支持标志、系统属性专属LOGO标志、华为浏览器、Office办公软件、华为…

握 手 问 题

目录 一:问题描述 二:思路: 三:代码: 四:结果:1204 一:问题描述 小蓝组织了一场算法交流会议,总共有50 5050 人参加了本次会议。在会议上,大家进行了握手交流。按照…

C++解决:求排列数

描述 输入两个整数m,n&#xff0c;求m个数字中选n个数的排列数。&#xff08;1<n<m<50&#xff09; 输入描述 两个正整数m和n。 输出描述 一个正整数表示排列数。 用例输入 1 6 5 用例输出 1 720 AC code #include<bits/stdc.h> using namespace s…

Avatar 高清图传

Avatar HD VTX 是一款数字视频发射器&#xff0c;专为与 Caddx/Walksnail 的 Avatar HD 系统配合使用而设计。最初以 Walksnail 品牌销售&#xff0c;实际上是 CaddX FPV 的一部分。 这些 VTX 设计用于 Caddx/Walksnail 的 Avatar HD 系统&#xff0c;并可与 Avatar HD Goggle…

【OpenWrt(3)】内网搭建iperf3测速服务器

下载的iperf3 网站&#xff1a;https://iperf.fr/iperf-download.php Window地址&#xff1a;https://github.com/ar51an/iperf3-win-builds 安卓&#xff1a;https://gitee.com/hiyanyx/magic-i-perf 文章目录 下载的iperf3Windows 服务器启动安卓客户端启动参考 Windows 服务…

利士策分享,如何规划多彩的大学生活?

利士策分享&#xff0c;学习规划多彩的大学生活 踏入大学&#xff0c;如同开启一场充满未知与可能的旅程。 为了让这段旅程不仅充满学术的熏陶&#xff0c;还洋溢着生活的多彩与人际的和谐&#xff0c;我们需要精心规划&#xff0c;积极行动。 一、多彩规划&#xff1a;点亮大学…

【408数据结构】散列 (哈希)知识点集合复习考点题目

苏泽 “弃工从研”的路上很孤独&#xff0c;于是我记下了些许笔记相伴&#xff0c;希望能够帮助到大家 知识点 1. 散列查找 散列查找是一种高效的查找方法&#xff0c;它通过散列函数将关键字映射到数组的一个位置&#xff0c;从而实现快速查找。这种方法的时间复杂度平均为…

【小沐学OpenGL】Ubuntu环境下glut的安装和使用

文章目录 1、简介1.1 OpenGL简介1.2 glut简介1.3 freeglut 2、glut安装2.1 命令安装glut2.2 源码安装glut 3、glut测试3.1 测试1&#xff0c;版本打印3.2 测试2&#xff0c;绘制三角形3.3 测试3&#xff0c;VBO绘制三角形 结语 1、简介 1.1 OpenGL简介 OpenGL作为图形界的工业…

2024最新!Facebook手机版和网页版改名教程!

Facebook作为全球最大的社交平台之一&#xff0c;允许用户自定义名字和昵称。在Facebook更新姓名可以帮助您更好的展现账号形象。本文将为您提供详细的步骤指导&#xff0c;帮助您在手机APP和网页版上轻松完成Facebook改名操作。 Facebook手机版改名 打开Facebook APP并登录账号…

构建模块化的FastAPI应用: 从用户认证到角色控制

实现了用户身份验证及角色授权的基本功能。具体来说&#xff0c;当用户尝试访问某些资源时&#xff0c;系统会首先验证用户的身份&#xff0c;然后根据用户的角色来决定是否允许访问特定资源。例如&#xff0c;普通用户只能访问自己的信息&#xff0c;而管理员可以访问额外的管…

UnLua调用C++函数

一、UnLua调用C全局静态函数 1、新建C类MyLuaUtils&#xff0c;继承BlueprintFunctionLibrary,实现全局静态函数GetInt。 MyLuaUtils.h UCLASS() class LUASHOOTING_API UMyLuaUtils : public UBlueprintFunctionLibrary {GENERATED_BODY()UFUNCTION(BlueprintCallable)static…

Python 神器:wxauto 库——解锁微信自动化的无限可能

&#x1f4dd;个人主页&#x1f339;&#xff1a;誓则盟约 ⏩收录专栏⏪&#xff1a;机器学习 &#x1f921;往期回顾&#x1f921;&#xff1a;“探索机器学习的多面世界&#xff1a;从理论到应用与未来展望” &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f…

GPIO 简介(STM32F407)

一、GPIO简介 什么是GPIO GPIO即通用输入输出端口&#xff0c;全称General Purpose Input Output&#xff0c;是控制或者采集外部器件的信息的外设&#xff0c;即负责输入输出。 它按组分配存在&#xff0c;每组最多16个IO口&#xff0c;组数视芯片而定。比如STM32F407ZGT6是…

【Python】Python 读取Excel、DataFrame对比并选出差异数据,重新写入Excel

背景&#xff1a;我在2个系统下载出了两个Excel&#xff0c;现在通过对下载的2个Excel数据&#xff0c;并选出差异数据 从新写入一个新的Excel中 differences_url rC:\Users\LENOVO\Downloads\differences.xlsx; //要生成的差异Excel的位置及名称 df1_url rC:\Users\LENOVO\Dow…

大数据新视界--大数据大厂之Java 与大数据携手:打造高效实时日志分析系统的奥秘

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

Spring源码(3)Aware接口、初始化和销毁方法、@Scope、@Primary

1、目标 本文的主要目标是学习Spring源码中Aware接口、初始化和销毁方法、Scope注解、Primary注解的使用 2、Aware接口 Component public class MyBeanAware implements BeanNameAware, ApplicationContextAware {Overridepublic void setBeanName(String name) {System.out…

从JavaScript入门Go三

前情提要 上一章中我们讲了Go中的变量与函数&#xff0c;这一节我们说说Go中的逻辑语法for、if、switch。最近正好有空&#xff0c;正好给大家更新一下入门的第三章。 PS&#xff1a;没看过的第一章、第二章的小伙伴&#xff0c;可以进入下面的链接查看 从JavaScript入门Go一 从…

计算机毕业设计 | vue+springboot在线投稿管理 稿件文章报社管理系统 (附源码)

1&#xff0c;绪论 1.1 行业趋势与需求 随着互联网的发展和普及&#xff0c;越来越多的出版社、杂志社和媒体开始采用在线投稿系统。这种系统提供了一个便捷的平台&#xff0c;让作者可以直接将他们的文章提交到相应的出版机构&#xff0c;而无需邮寄或亲自递交稿件。这不仅节…