开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css的em是什么

em 是 CSS 中的一个相对长度单位，用于表示元素的尺寸、间距等属性。em 单位的值基于其父元素的字体大小。如果父元素的字体大小是默认的（通常是 16px），那么 1em 就等于 16px。如果父元素的字体大小被设置为 20px，那么 1em 就等于 20px。

基础概念

相对单位：em 是一个相对单位，这意味着它的值是相对于另一个元素的字体大小来计算的。
继承性：em 单位的值会继承父元素的字体大小，除非明确设置。

优势

灵活性：使用 em 单位可以使页面布局更加灵活，因为元素的尺寸会随着父元素字体大小的变化而变化。
可访问性：em 单位有助于提高网站的可访问性，因为它允许用户通过浏览器设置来调整字体大小，从而影响整个页面的布局。

类型

em：基于父元素的字体大小。
rem：基于根元素（即 <html> 元素）的字体大小。

应用场景

字体大小：调整文本的字体大小。
间距和边距：设置元素之间的间距和边距。
宽度、高度：设置元素的宽度和高度。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EM Unit Example</title>
    <style>
        body {
            font-size: 16px;
        }
        .container {
            font-size: 1.5em; /* 24px */
            padding: 1em; /* 16px */
        }
        .child {
            font-size: 0.8em; /* 19.2px */
            margin: 0.5em; /* 8px */
        }
    </style>
</head>
<body>
    <div class="container">
        <p>This is a container with font size of 24px and padding of 16px.</p>
        <div class="child">
            This is a child element with font size of 19.2px and margin of 8px.
        </div>
    </div>
</body>
</html>

参考链接

MDN Web Docs: em

常见问题及解决方法

字体大小不一致：确保所有父元素的字体大小都设置正确，以避免子元素的 em 值计算错误。
布局问题：使用 rem 单位来设置根元素的字体大小，以确保整个页面的一致性。

通过以上信息，你应该对 em 单位有了更全面的了解，并能够在实际开发中更好地应用它。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS单位em和rem

写过样式的都知道CSS是有单位的，想要写出还原设计稿的完美样式，离不开好的单位。...现在CSS的单位有%、in、cm、mm、em、ex、pt、pc、px等原生单位，现在更有了rem、vh、vw、vmin、vmax等单位。...Em就相对复杂一点，em单位的解释是根据父元素。...当我们没有设置字体大小的时候 em">这是em单位默认的是浏览器默认字体大小，Chrome是16px。...Em单位是优先根据自身的字体大小，如果没有就向上寻找最近父元素有设置字体大小来换算的。其实只要写一写上面的代码然后看一看浏览器显示的大小就很容易知道em和rem是根据上面来换算。（完）

1.1K2 0

【CSS】浅谈 CSS 中常用的相对长度单位 em, rem

浅谈CSS中常用的相对长度单位顾名思义，相对单位是根据与其他事物的关系来度量。所以，要注意到，所度量的实际距离，可能会因为不在其控制之下的其他因素而改变。如屏幕分辨率、可视区域的宽高等等。...并且，对于某些相对单位，其大小会因使用该单位的元素的不同而不同。 em CSS中，em 被定义为给定字体的font-size值。如果一个元素的font-size为14px,那么1em=14px。...示例： h1,h2,p { margin-left:1em; } 假设h1,h2,p的font-size大小分别为24px,18px,12px。...CSS属性line-height，font-size，margin-bottom和margin-top常具有一个用em表示的值。...对于屏幕显示，通常是一个设备像素（点）的显示。对于打印机和高分辨率的屏幕，一个CSS像素意味着多个设备像素，因此，每英寸的像素的数量保持在96左右。

2482 0

前端：CSS字体大小 px、em、rem的区别

1、px 1px的长度表示显示器中一个像素（pixel）的长度，实际显示的效果和显示器的 DPI（Dot Per Inch，每英寸像素数）有关，DPI越大每英寸的像素数越多，每个像素的实际大小越小。...px的特点 IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE...2、em em（font size of the element）是指相对于父元素的字体大小的单位。...所以默认情况下 1em=16px EM特点 em的值并不是固定的； em会继承父级元素的字体大小。 3、rem rem和 em相似，但是 rem是相对于根元素的字体大小单位。...与 em相比 rem更方便计算也更加直观。但是 rem在 IE8及其以下都不兼容。

2.2K1 0

CSS基础-属性值单位：px, em, rem, %

在CSS中，尺寸单位是决定元素大小的关键。正确选择和应用单位不仅关乎布局的美观，还直接影响到网站的响应式设计和可访问性。...相对单位em 概述 em是一个相对单位，其值基于当前元素的字体大小。如果当前元素没有设置字体大小，则继承自父元素的字体大小。em单位使得样式能够根据上下文动态调整，非常适合创建流体布局和响应式设计。...相对单位rem 概述 rem（root em）是相对于根元素（通常是html元素）字体大小的单位。与em相比，rem避免了因嵌套而导致的复杂计算问题，成为响应式设计和可访问性改进的优选。...常见问题与避免问题：忽略设置根元素的字体大小，导致rem单位失去意义。避免：始终在CSS初始化中明确设置html的字体大小，以便于控制整个页面的缩放比例。.../* 示例：使宽度占据父元素的50% */ .box { width: 50%; } 总结选择合适的单位是CSS布局设计的重要一环。

5831 0

CSS文字大小单位px、em、pt(转)

这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章，题目有点吓人，但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和特点，看过以后确实收获很大。...px像素（Pixel）是相对长度单位，像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) em是相对长度单位，相对于当前对象内文本的字体尺寸。...(引自CSS2.0手册) 　　字体单位使用em能支持IE6下的字体缩放，在页面中按ctrl+滚轮，字体以px为单位的网站没有反应。　　...为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em,...但是在css中pt含义却并非如此。

1.6K2 0

「css基础」一次搞懂CSS 字体单位：px、em、rem 和 %

开篇对于绘图和印刷而言，「单位」相当重要的，然而在网页排版里，单位也是同样具有重要性，在CSS3 普及以来，更添加了一些方便好用的单位( em、rem.. .等)，这篇文章将整理这些常用的CSS 单位...内容来源：https://www.oxxostudio.tw/articles/201809/css-font-size.html 作者：oxxostudio 注：由于网站是繁体内容，术语描述和话术与我们有差异的问题...01 「网页」和「印刷」的单位目前我们接触的范围来说，若要把单位做区分，最简单可以分为「网页」和「印刷」两大类，通常对于CSS来说只会应用到网页的样式，毕竟真正要做印刷，还是会倾向通过排版软体来进行设计...em em是相对单位，为每个子元素通过「倍数」乘以父元素的px值，如果我们每一层div都使用1.2em，最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px...熟悉了字体大小单位之后，你就更够能系统的进行设计整个网站的CSS字体架构，不过font-size 本身和font-family 有着一些复杂的关系，不同的font-family 有时也会影响font-size

4.5K2 0

CSS 布局的本质是什么

这些框架实现了组件的功能，也就是对页面做的逻辑的拆分，把相同功能的 html、css、js 聚合在一起，使之可以复用。...css 的两部分 css 是浏览器提供给开发者的描述界面的方式，而描述界面分为两部分：内容绘制在什么地方内容怎么绘制内容绘制在什么地方就是布局的部分，主要是 display 和 position...UI 是通过 css 来描述的，而 css 可以分为两部分：布局和具体元素的渲染。...网页的 css 布局方案已经应用在越来越多的领域，比如跨端引擎通过安卓、ios 实现 css，kraken 基于 flutter 实现 css，所以 css 的布局方式是我们必须掌握的技能。...希望这篇文章能帮大家梳理清楚 css 布局的思路，对各种布局都能够分析清楚特性，然后用合适的方案来实现。

9974 0

CSS 布局的本质是什么

这些框架实现了组件的功能，也就是对页面做的逻辑的拆分，把相同功能的 html、css、js 聚合在一起，使之可以复用。...css 的两部分 css 是浏览器提供给开发者的描述界面的方式，而描述界面分为两部分：内容绘制在什么地方内容怎么绘制内容绘制在什么地方就是布局的部分，主要是 display 和 position...UI 是通过 css 来描述的，而 css 可以分为两部分：布局和具体元素的渲染。...网页的 css 布局方案已经应用在越来越多的领域，比如跨端引擎通过安卓、ios 实现 css，kraken 基于 flutter 实现 css，所以 css 的布局方式是我们必须掌握的技能。...希望这篇文章能帮大家梳理清楚 css 布局的思路，对各种布局都能够分析清楚特性，然后用合适的方案来实现。

7664 0

CSS 布局的本质是什么

这些框架实现了组件的功能，也就是对页面做的逻辑的拆分，把相同功能的 html、css、js 聚合在一起，使之可以复用。...css 的两部分 css 是浏览器提供给开发者的描述界面的方式，而描述界面分为两部分：内容绘制在什么地方内容怎么绘制内容绘制在什么地方就是布局的部分，主要是 display 和 position...UI 是通过 css 来描述的，而 css 可以分为两部分：布局和具体元素的渲染。...网页的 css 布局方案已经应用在越来越多的领域，比如跨端引擎通过安卓、ios 实现 css，kraken 基于 flutter 实现 css，所以 css 的布局方式是我们必须掌握的技能。...希望这篇文章能帮大家梳理清楚 css 布局的思路，对各种布局都能够分析清楚特性，然后用合适的方案来实现。

6794 0

(2019)面试题：CSS单位那些事【px,em,rem】

问题说一下你了解的CSS的单位？ Hello，欢迎来到我的博客，每天一道面试题，我们共同进步。...解答首先CSS长度单位分为【绝对长度单位】和【相对长度单位】绝对长度单位 in 英寸 cm 厘米 mm 毫米 pt pc 结论：绝对长度单位表示为一个固定的值，不会改变。不利于页面渲染。...相对长度单位 px PX即像素，而像素是相对显示器屏幕分辨率而言的。...em em的值并不固定 em继承父级元素的字体大小任意浏览器的默认字体高都是16px rem rem是CSS3中新增的单位，并且相对的元素是html根元素（html），默认也是16px 通过它既可以做到只修改根元素就...成比例的调整所有字体大小，又可以避免字体大小逐层复合的连锁反应区别em是根据父元素继承相应大小而不是固定的，rem是继承html根元素的大小只有改变根元素html的值才能改变rem的值

8590 0

CSS 的多列布局是什么？

一、多列布局是什么？...就是用 CSS 的 column-count、column-width、column-gap、break-inside、page-break-inside 等实现多列显示的功能。... body { width: 90%; max-width: 900px; margin: 2em...column-width: 250px; column-gap: 20px; } .card { /* 取消注释即可看到，不截断内容的效果... 三、参考文档 CSS 的多列布局是什么？

1.4K3 0

CSS中的“>”是什么意思

>p+p{color:red;} #quickSummary>p+p+p{color:inherit;} #quickSummary p:nth-child(2){color:red} 这段代码中的'...>'是什么意思,还有就是'是什么意思？...是不是CSS中'>','的意思？ p+p,p+p+p，是什么意思 nth-child及nth-child(2)是什么意思？希望能详细解释这段代码，谢谢！...这些是CSS3特有的选择器，A>B 表示选择A元素的所有子B元素。与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。另外：没有的用法。 A+B表示HTML中紧随A的B元素。...nth-child是个伪类的用法，如p:nth-child(2)就表示在p的父元素中选择位居第二位的p，这个可能不太好理解，自己试一试就知道了。

4K2 0

CSS 的弹性布局(flex) ，是什么？

一、弹性布局是什么？元素根据窗口大小变化而自动伸长或缩短，使得整个页面格式保持不变。 --- 二、怎么使用？...initial; flex: none; /* 一个值, 无单位数字: flex-grow */ flex: 2; /* 一个值, width/height: flex-basis */ flex: 10em...更多内容 --- 2、方向让元素在 flex父元素中，进行行或列方向上的伸长或缩短的变化。... --- 四、参考文档 CSS 的弹性布局(flex)...，是什么？

1.3K1 0

CSS 的正常布局流，是什么？

一、正常布局流是什么？...--- 二、实例没有做任何调整的元素，默认排列的样子？ 1、代码新建 index.html 文件，复制下面代码到文件并保持，用浏览器打开 index.html 看效果。的元素、外面包裹着 padding、border、margin [normal-layout] --- 三、重要概念 1、块级元素块级元素占据其父元素（容器）的整个水平空间...Padding：即内边距，围绕着内容（比如段落）的空间。 Border：即边框，紧接着内边距的线。 Margin：即外边距，围绕元素外部的空间。 [box-model] 更多盒子模型内容，看这里！...--- 四、参考文档 CSS 的正常布局流，是什么？

6261 0

CSS 的浮动(float)布局是什么？

一、浮动布局用 float 属性，可以实现元素（文字、图片等）的浮动显示功能，通过下面几个实例来展示浮动布局的效果以及浮动布局带来的一些问题？...text-transform: uppercase; } p::first-letter { font-size: 3em...Bow before my splendour, dear students, and go forth and learn CSS!...1、相邻元素 float布局，会影响后面的元素的排列，可以通过 clear 属性，进行清除。取消下面代码中的注释部分，即可看到修正后的效果。四、参考文档 CSS 的浮动(float)布局是什么？

1.1K3 0

【说站】css样式单位px，em，pt，ex，pc，in，mm，cm详解

在写css样式的时候最常用的长度单位是px(像素)，除此之外经常会碰到em、pt等等。...其实css中的长度单位有px、em、pt、in、ex、pc、mm、cm、ch、rem、vw、vh、vmin、vmax。下面品自行将对这些css样式的长度单位做详细说明。...css容器的大小我们经常用px做单位;字体大小(font-size)很多人用px做单位，其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。 2、em：相对长度单位。...相对于元素的字体大小（font-size），如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。3em 表示当前字体大小的 3 倍 3、pt：点(Point)，绝对长度单位。...一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。

2.8K2 1

css中的clear的作用是什么_css中class的用法

大家好，又见面了，我是你们的朋友全栈君 css clear属性深入了解：一、什么是 CSS clear清除浮动？...俗一点就是说谁设置了clear：left属性，谁的左边就不允许存在浮动的元素 right 清除该元素右边的浮动元素。...俗一点就是说谁设置了clear：right属性，谁的右边就不允许存在浮动的元素 both清除两边的浮动，清除该元素左右边的浮动元素。...属性描述值 CSS clear 指定不允许元素周围有浮动元素。...box4右边还是存在浮动的元素，那么到底是因为什么呢？四、出现清除没有效果的原因？？？原因：代码是顺序执行的，设置清除的没法影响后面加载的元素的，它只能影响前面的元素！

1.5K1 0

CSS 中的定位(position)布局，是什么？

一、定位布局是什么？使用 position、left、right、top、bottom，可以改变元素现有位置，譬如让元素从正常布局流中跳出来，固定在页面某个位置上。...color: white; padding: 10px; position: sticky; top: 0; left: 0; margin: 1em...试着修改下面 z-index 的值，看看效果。 <!...if not, much like this image will do: --- 三、参考文档 CSS...中的定位(position)布局，是什么？

5392 0

CSS 中的网格(grid)布局，是什么？

一、网格布局是什么？网格布局就是把页面拆分成很多小格子，用于对齐和摆放元素。有三个重要的属性：行(row)、列(column)、沟槽(gutter，表示行列的间隙)。 --- 二、怎么使用？...DOCTYPE html> CSS Grid starting point... body { width: 90%; max-width: 900px; margin: 2em...>Five Six Seven --- 四、参考文档 CSS...中的网格(grid)布局，是什么？

3.1K1 0

--EM无法打开的解决

很久没打开EM了，打开后今天出现这个报错： ?...TSMSYS EXPIRED & LOCKED DIP EXPIRED & LOCKED 按说DBSNMP和SYSMAN用户是用于EM...的，但这里SYSMAN没有呢？...决定重新创建一个EM资料库： [oracle@liu Desktop]$ emca -config dbcontrol db -repos create ......此时EM可以正常打开了^_^

1.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭