CSS之EM属性

最新推荐文章于 2024-05-21 19:02:25 发布
最新推荐文章于 2024-05-21 19:02:25 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： css

什么是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

tian361zyc
关注
专栏目录
CSS中的em单位
一只前端萌新的日常
07-07 1万+
CSS中有众多单位，常用的px是绝对单位，em则是相对单位。在响应式和移动端的大前提下，使用em能够更方便快捷的一次性调整web文档极其HTML元素的字体大小、宽度、边距、边框等一系列属性，可以说在某些方面，使用em作为单位比px更灵活。 一、什么是em1.em的长度em是CSS中的一个相对单位，它的单位长度是根据元素的文本垂直长度来决定的。可以作用在width、height、line-heigh
CSS中的EM属性之弹性布局
09-25
教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用“em”对层进行弹性扩展？又是如何扩展文本和图像等内容？下在我们就一起带着这些问题开始今天的“em”之行。
CSS中强大的EM（转）
萌萌的It人 www.itmmd.com
05-24 3914
使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。 这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用
CSS样式中的单位em
最新发布
听海边涛声
05-21 259
CSS样式中的单位em
css中em的使用方法
weixin_30235225的博客
03-17 507
css中em的使用方法 em的使用方法的总结： 　　1. 浏览器的默认字体大小是16px，可以在浏览器中设置默认的字体大小（下面的Chrome浏览器的设置方法） 　　2. em是一个相对的单位，是当前元素相对于父元素字体的大小而言的；例如：父元素设置font-size: 32px ，子元素设置font-size: 1em ，那么子元素的字体大小也是32px 　　3. ...
CSS中强大的EM
江枫
03-29 392
使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。 这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用“...
CSS Border属性制作小三角
12-12
效果如下： 鼠标放上显示第二个的效果！这个不知道在哪里看的，转过来了，地址不记得了，感谢原作者 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<...title
CSS的一些必记属性整理
09-25
以下是一些CSS中必记的关键属性，这些属性对于理解和创建高效、美观的网页至关重要。 1. 文本属性： - `color`: 用于设置文本颜色，可以使用颜色名称、十六进制值或RGB值。 - `text-align`: 控制文本的对齐方式，...
css 什么是em
黄大仙
08-23 499
1em等于父元素的font-size大小的1倍 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { font-size: 12px; } p { /*1em等于父元素的font-size*/ width: 10em;
css单位em用法
lianflower的博客
09-01 310
【代码】css单位em用法。
CSS相对单位em
热门推荐
要和代码过一辈子的博客
08-20 1万+
在web环境下，用户可以将浏览器窗口设置为任意大小，且CSS需要去适应它。 响应式 —— 在CSS中，这指的针对不同大小的浏览器窗口，用不同的方式响应更新页面的样式。我们要对不同尺寸的手机、平板电脑或桌面显示器多花心思了。 CSS支持一些绝对长度单位，其中最常见也最基本的是像素（px）。较不常见的绝对单位有毫米（mm，millimeter）、厘米（cm，centimeter）、英寸（in.，i...
html的em属性,css中的em是什么意思？
weixin_35157304的博客
06-04 5269
em是CSS中的一个相对单位，它的单位长度是根据元素的文本垂直长度来决定的。可以作用在width、height、line-height、margin、padding、border等样式的设置上。css中em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。在响应式和移动端设计的大前提下，使用em能够更方便快捷的一次性调整web文档...
CSS中“em”，“rem” 简介
cloud_tian's blog
11-21 406
“em”是一个相对大小，可以指定到小数点后三位。 1. 浏览器的默认字体大小是16px; 1em = 16px; 2.当前元素的font-size中em是相对于其父元素font-size的值来计算的。 3.当前元素的其他属性（非font-size）中em是相对于本元素字体大小的值来计算的。   由于查看当前元素的font-size的大小时需要查看其父元素的font-size大小，所以当嵌...
html em属性,html em标签的作用是什么？<em>和<i>标签的区别
weixin_29280219的博客
06-05 866
html em标签的作用是什么？和标签的区别是什么？本篇文章就为大家介绍html em标签的定义和作用，还有关于和标签的区别html em标签的定义和作用： 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。在文本中加入强调也需要有技巧。如果强调太多，有些重要的短语就会被漏掉；如果强调太少，就无法真正突出重要的部分。这与调味品一样，最好还是不要滥用强...
CSS中的相对单位
ikun的博仔的博客
07-18 954
解析CSS中的相对单位
css3_关于px、em、rem的区别详解
QiuRenBB的博客
03-02 317
前言 在CSS中，尺寸单位分为两类：相对长度单位和绝对长度单位。 相对长度单位：按照不同的参考元素，又可以分为字体相对单位和视窗相对单位。 字体相对单位：em、ex、ch、rem； 视窗相对单位：vw、vh、vmin、vmax。 绝对长度单位：则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。 px单位   px是像素单位，也是绝对长度单位的一种。也就是说它的尺寸是固定的，
css的display属性
08-17
flex属性是CSS中用于控制弹性布局（Flexbox）的一个属性。它可以用于设置一个元素在Flex容器中的伸缩比例，从而实现灵活的布局效果。 [flex-shrink [flex-basis。这三个值可以按照任意顺序组合使用，也可以省略其中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值