CSS em 和 ch 单位有什么区别？
我一直在我的样式表中使用 ch ，但 em 似乎更常见，我不明白它们之间的区别？
我知道20ch会为20个零提供足够的空间，我不明白它是什么，它是否为20 M提供了足够的空间，或者是20 x fontsize，i，e size 16字体会给320，但是320什么单位。如果它们几乎相同或完全不同，我不会得到
答案 0 :(得分：7)
我已经查看了所有答案以及您对它们的评论，我觉得您希望em和ch单元主要用于width或{{ 1}}属性。
[...]它们不适合设置字段宽度吗？
从我的角度来看，我不建议这样做。
<强> CH-单元
首先，我以前从未与 height合作过，老实说我没有看到任何真正的用途 - 也许是ch年，所以总有四个数字的宽度，但不是更多 - 因为它永远不会告诉你一个元素到底有多宽。
我改变了主意，现在我看到了input的真实用途。 ：）
年份的ch示例将始终保持四个数字的宽度。但input对于正确定义段落的文本宽度也非常有用。
对于像素，相对或百分比值，非常困难 - 尤其对于响应式设计 - 设置每行的完美文本宽度，包括段落的间距。但是，这可能是网站用户体验的一个负担。 Atlassian Design的摘要是一个完美的匹配：
设置阅读环境以适合读者。广泛的文本难以阅读，使人们更难集中注意力。虽然没有正确的方法来测量文本的完美宽度，但一个好的目标是每行包含60到100个字符，包括间距。设置最佳线长会将内容分解为易于消化的块。
这是ch可以完美地用作单位的地方。为了更好地查看，您可以查看最后的示例。
但现在终于找到了ch;）
正如常说的那样，ch指的是ch字符与其字体大小的宽度。
例如：正文中包含0，font-size: 16px字符的宽度为0来自所选字体系列，然后10px等于1ch }。甚至那仍然是不准确的，因为例如10px或italic可以更改角色的宽度。
EM-＆amp; REM-单元
正如常说的那样，bold - 并且还有一个玩家 - 也em相对于rem。
font-size始终相对于根元素rem，font-size相对于自己元素的em或最后一个父元素（可以也是根元素） font-size。
作为font-size示例：只有em有一个body且该元素本身没有font-size: 16px;，然后font-size等于1em。如果元素的父元素或元素本身得到16px，则font-size: 20px;等于1em。 20px个单位也可以自我繁殖。
作为em示例：rem有一个body，然后font-size: 16px;等于1rem。即使元素本身或父元素得到16px，font-size: 20px;仍然等于1rem的{{1}}设置。
[...]如果ch的大小为＆＃39; 0＆＃39;在字体中，为什么不是它的大小＆＃39; M＆＃39;在font [...]
中
body最初基于当前字体16px字符的排版测量，但已经过时了。正如您现在所看到的，它总是引用一个固定的起始值＆＃34;而不是角色的宽度。
推荐用法
正如我所说，从我的角度来看，我不建议对em或M属性使用ch，em或rem。这些单位对于＆＃34; textual＆＃34;更有用。属性。
一些例子：
width应该是文字的四倍：height h2应该始终有font-size: 4rem;的半行：p margin元素应比margin-bottom: 0.5em;大20％：line-height font-size，应始终包含四个数字line-height: 1.2em;：input width的文字宽度应始终为每行80个字符的宽度，包括间距：width: 4ch; 但处理不同设备时像素不灵活
为此，作为结论，我建议您只使用百分比p或视口宽度和视口高度width: 80ch;。或至少始终使用最大值：width: 80%;。
以下是几个片段 - 仅针对具有height: 100vh; width: 100vw;属性的示例 - 以便更好地理解：
width: 1000px; max-width: 100%; - 相对于自有元素的字体大小或具有字体大小的最后一个父元素
widthem
body {
font-size: 16px;
}
p {
font-weight: bold;
}
div {
width: 1em;
height: 50px;
background: lightgray;
}
.em-0-5 {
width: 0.5em;
}
.em-10 {
width: 10em;
}
.fs-10 {
font-size: 10px;
}
.parent {
font-size: 0.5em;
}
.parent div {
width: 10em;
} - 相对于根元素的字体大小
<p>1em (body font-size * 1 = 16px)</p>
<div></div>
<p>0.5em (body font-size * 0.5 = 8px)</p>
<div class="em-0-5"></div>
<p>10em (body font-size * 10 = 160px)</p>
<div class="em-10"></div>
<p>10em from 10px own element font-size (element font-size * 10 = 100px)</p>
<div class="em-10 fs-10"></div>
<p>10em from 0.5em parent font-size (body font-size * parent font-size * 10 = 80px)</p>
<span class="parent">
<div></div>
</span>rem
body {
font-size: 16px;
}
p {
font-weight: bold;
}
div {
width: 10rem;
height: 50px;
background: lightgray;
}
.parent {
font-size: 20px;
}
.parent div {
width: 5rem;
} - 相对于＆＃34; 0＆＃34;的宽度（零）
<p>10rem (body font-size * 10 = 160px)</p>
<div></div>
<p>5rem in a parent element with font-size 20px (body font-size * 5 = 80px)</p>
<span class="parent">
<div></div>
</span>ch
我希望能以某种方式提供帮助。 ：）
答案 1 :(得分：2)
我通常使用em＆amp; rem，这是一种让事情变得敏感的简单方法，取决于您选择的fon家庭，而不是特定角色。
ch- 表示宽度，或更准确地说是提前量度 字形＆＃34; 0＆＃34;元素中的（零，Unicode字符U + 0030）font。
em- 表示元素的计算font-size。如果使用font-size属性本身，它代表继承的字体大小 元素。
<h1>How em works</h1>
<h2>Default values</h2>
<p style="font-size: 1em">I am 1 em on a default browser (10px)</p>
<p style="font-size: 2em">I am 2 em on a default browser (20px)</p>
<hr>
<h2>Inherit values</h2>
<div style="font-size: 18px">
<p style="font-size: 1em">I am 1 em depending on my parent element font-size (18px)</p>
<p style="font-size: 2em">I am 2 em depending on my parent element font-size (36px)</p>
</div>
答案 2 :(得分：0)
要添加到Gerardo的答案中有两件事：
em，但ch单位为calculated slightly different in IE11 and is missing support in Opera Mini. ch单位总是基于＆＃34; 0＆＃34;字符，而em＆＃39; s相对于其各自的父字体大小。答案 3 :(得分：0)
他们完全不同。
一个em等于父元素的字体大小（以像素为单位）。像素字体大小是指字母的高度（以像素为单位）。因此，如果您还没有更改html元素的字体大小，则大多数内容的默认大小为16px，因此一个em的高度为16px。 2em将是32px高度等。
Rems比ems imo更容易使用（因为Rem单元总是引用root / html元素字体大小）