CSS之EM属性

什么是EM？

在一个空白的HTML文档内，你没有任何关于字体大小的声明而只使用默认设置。在大多数浏览器上为html和body标签的默认字体大小为100%

这里写图片描述

使用EM为单位一定要知道父元素的设置，因为EM是一个相对值，是一个相对于父元素的值

这里写图片描述

如果选择器存在font-size属性，那么该选择器本身1em的值就是对应的font-size的值，而该选择器其余属性再使用的1em属性的值就是font-size属性确定的值

这里写图片描述

注1.:如果选择器本身font-size属性值是固定值(比如24px)，那么其余属性再使用em为单位的值就是根据选择器本身的font-size来计算(比如margin:2em就是2*24px)

注2:而如果选择器本身font-size属性是使用em确定的(比如1em)，那么就要根据选择器父元素的font-size值去确定选择器本身的em值(比如选择器父元素的font-size属性为24px,那么选择器本身便为24*1=24px)，然后该选择器的其余属性再根据已经确定的em值(24px)去配置自己的属性值，父元素的字体大小可以影响 em 值，但这种情况的发生纯粹是因为继承

实例1：

这里写图片描述

选择器h1在font-size属性中使用的2em是要相对父元素去确定，2em也就是2倍的父元素，假设父元素<html>的font-size被设置为默认的100%，也就是16px。所以这里2em也就是2*16=32px

em单位可以被用来声明字体的大小。实际上，最佳做法是使用相对单位，如用em指定font-size

这里写图片描述

这里h1选择器的真正大小是多少呢？

我们要根据<h1>的父元素来计算font-size。它的父元素是<html>,并且它的font-size被设置为16px,通过这种方式，我们可以计算出h1的值为32px,或者说2 * 16px

这里写图片描述

当EM单位设置在html元素上的时候，html元素的默认字体大小值将被转换为EM值乘以浏览器字体大小的设置

例如：如果网站的 html 元素的字体大小属性设置为 1.25em，根元素字体大小将为 1.25 倍的浏览器的字体大小，即如果浏览器字体大小被设置为 16px，根字体大小会出来为 20px，即 1.25 x 16 = 20

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

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

相关文章

vim多行增加缩进

vim多行增加缩进

在Normal Mode下&#xff0c;命令>>将对当前行增加缩进&#xff0c;而命令<<则将对当前行减少缩进。我们可以在命令前使用数字&#xff0c;来指定命令作用的范围。例如以下命令&#xff0c;将减少5行的缩进&#xff1a; 5<< 在Insert/Replace Mode下&#…
阅读更多...
PyQt6 QTimer计时器控件

PyQt6 QTimer计时器控件

锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计52条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话版…
阅读更多...
前端学习（3283）：立即执行函数二

前端学习（3283）：立即执行函数二

阅读更多...
前台关于跨域的警告A cookie associated with a cross-site resource at .........，代理服务器

前台关于跨域的警告A cookie associated with a cross-site resource at .........，代理服务器

前台关于跨域的警告A cookie associated with a cross-site resource at …&#xff0c;代理服务器 A cookie associated with a cross-site resource at … 解决该警告的方法&#xff1a; 在配置文件中添加配置如下&#xff1a; "proxy": {"/api": {&quo…
阅读更多...
按任意的字段旋转的存储过程

按任意的字段旋转的存储过程

---------------------------------------------------------------------------- -- 分段截取函数 ---------------------------------------------------------------------------- CREATE FUNCTION DBO.FUN_SplitStr( S VARCHAR(8000), -- 包含多个数据项的字符串 P…
阅读更多...
CSS之REM属性

CSS之REM属性

什么是REM: rem指根em。它的产生是为了帮助人们解决em所带来的计算问题&#xff0c;它是字体排版的一个单位&#xff0c;等同于根font-size。这意味着1rem等同于<html>中的font-size 实例&#xff1a; 正如您看到的&#xff0c;无论您在哪里设置它&#xff0c;1rem的取…
阅读更多...
Linux系统下.ko文件是什么文件?.so文件是什么文件?

Linux系统下.ko文件是什么文件?.so文件是什么文件?

.so 文件是动态链接库文件&#xff0c;相当于 win下的 .dll 文件。 .ko 是内核模块文件&#xff0c;是内核加载的某个模块&#xff0c;一般是驱动程序。
阅读更多...
前端学习（3284）：立即执行函数三

前端学习（3284）：立即执行函数三

阅读更多...
vue-cli3全面配置详解

vue-cli3全面配置详解

vue-cli3全面配置详解 vue-cli3-config 创建项目 配置环境变量 通过在package.json里的scripts配置项中添加–mode xxx来选择不同环境 在项目根目录中新建.env, .env.production, .env.analyz等文件 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧…
阅读更多...
Android 开发环境在 Windows7 下的部署安装

Android 开发环境在 Windows7 下的部署安装

Android SDK Android SDK 为 Android 应用的开发、测试和调试提了必要的API库和开发工具。 ADT Bundle 下载 如果你是一个android 开发新手&#xff0c;推荐你下载使用 ADT Bundle 以快速开始android 的开发&#xff0c;它提供了必要的 android sdk 组件和一个内置 ADT 的 Ecli…
阅读更多...
CSS之REM和EM的区别

CSS之REM和EM的区别

事实证明。rem 和 em 均有各自的优缺点。应给根据实际情况来判断其使用方式 1.如果这个属性是根据它的font-size进行测量&#xff0c;则该属性最好使用em 2.其他的一切事物均使用rem #
阅读更多...
Cisco路由器故障诊断技术(3)

Cisco路由器故障诊断技术(3)

Cisco路由器故障诊断技术(3)<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />3.4 trace命令 trace命令提供路由器到目的地址的每一跳的信息。它通过控制IP报文的生存期&#xff08;TTL&#xff09;字段来实现。TTL等于1的ICM…
阅读更多...
前端学习（3285）：立即执行函数四

前端学习（3285）：立即执行函数四

阅读更多...
《疯狂的简洁》书摘

《疯狂的简洁》书摘

头脑和常识催生简洁 复杂会让人带来安全感&#xff0c;复杂和简洁是一对矛盾&#xff0c;复杂不一定优于简洁 复杂可以变得很丑陋 一切始于简洁&#xff0c;坚持原则&#xff0c;抵御复杂&#xff0c;头脑聪慧且真心实意 人们喜欢事情的透明化 直率即简洁&#xff0c;迂回就是复…
阅读更多...
linux kill 关闭进程命令

linux kill 关闭进程命令

点评&#xff1a;杀死进程最安全的方法是单纯使用kill命令&#xff0c;不加修饰符&#xff0c;不带标志。 首先使用ps -ef命令确定要杀死进程的PID&#xff0c;然后输入以下命令&#xff1a; # kill -pid 注释&#xff1a;标准的kill命令通常都能达到目的。终止有问题的进…
阅读更多...
侯捷：搞Windows程序设计我们需要啥

侯捷：搞Windows程序设计我们需要啥

侯捷&#xff1a;搞Windows程序设计我们需要啥如果你是一位资深的Windows程序员&#xff0c;相信你对Jeffrey Richter一定不会陌生&#xff0c;是不是有些崇拜和景仰&#xff1f;如果你是一位刚涉足这个领域的Windows程序员&#xff0c;Jeffrey Richter是何许人也许你还不能立刻…
阅读更多...
CSS之vmin和vmax

CSS之vmin和vmax

vh和vm总是与视口的高度和宽度有关&#xff0c;与之不同的&#xff0c;vmin和vmax是与当下屏幕的宽度和高度的最大值或最小值有关&#xff0c;取决于哪个更大和更小 例如&#xff0c;如果浏览器设置为1100px宽、700px高&#xff0c;1vmin会是较小的7px&#xff0c;而1vmax将是…
阅读更多...
前端学习（3286）：Aop

前端学习（3286）：Aop

阅读更多...
vue element-ui级联选择器选中后下拉框自动收起

vue element-ui级联选择器选中后下拉框自动收起

Cascader 级联选择器 数据渲染 通过 :options“options” 映射,让每一级都可以选择(选项前会有圆圈可勾选)设置属性 :props"{ checkStrictly: true }" 1、点击后下拉框自动收起实现 设置每次监听值变化的时候&#xff0c;把 dropDownVisible 属性设置为 false 即可。…
阅读更多...
CodeForces 444C 节点更新求变化值的和

CodeForces 444C 节点更新求变化值的和

http://vjudge.net/problem/viewProblem.action?id51622 题目大意&#xff1a; 给定一列n个数字&#xff0c;最初赋予值1到n 两个操作&#xff1a;1.将区间[l,r]内的数改为x&#xff0c;则这区间中所有数的改变值进行求和&#xff0c;即ansabs(a[l]-x)abs[a[l1]-x).....abs(a[…
阅读更多...
最新文章

Copyright @ 2022~2023