css中,px表示1个像素的大小,
em表示父标记中字母m的标准宽度,ex表示字母x的标准高度。
请问,px、em、ex这三个都是缩略的组合词吧?啥意思?词源角度讲解一下
根据CSS规范和历史背景,px、em、ex这三个单位确实有其词源和设计初衷:
px(像素)词源:
px是"pixel"的缩写,源自计算机图形学中的基本单位。含义:表示显示器上一个物理点的大小,是绝对单位。
历史:由苹果公司于1970年代引入,用于图像处理。在Web中,
1px通常对应显示器的物理像素点,但实际显示可能因DPI(每英寸点数)而异。
em(相对单位)词源:
em源自印刷术语,代表字母"M"的宽度。含义:相对于当前元素的字体大小计算,是相对单位。
历史:在排版中,
em用于调整字体大小和间距,如1em等于当前字体的宽度。在CSS中,em常用于动态缩放和响应式设计。
ex(相对单位)词源:
ex源自数学排版,代表字母"x"的高度。含义:相对于当前元素的字体大小计算,通常用于垂直间距。
历史:在印刷中,
ex用于精确控制行高和基线对齐。在CSS中,1ex等于当前字体中字母"x"的高度。
总结:
px是计算机图形学的单位,直接对应物理像素。em和ex是排版术语的缩写,用于相对尺寸计算,分别基于字母"M"和"x"的尺寸。这些单位的设计初衷是为了在不同设备和字体中提供一致的视觉效果。
css中,em表示父标记中字母m的标准宽度,em是缩略的组合词吧?
啥意思?为什么前面用的单词是e啊?词源角度讲解一下
em 确实是印刷术语的缩写,它来自“em quad”或“em square”,指的是字母“M”的宽度。在 CSS 中,em 是一个相对单位,等于当前元素的字体大小。
词源角度:
“em”中的“e”代表“equal”,表示它等于字母“M”的宽度。
印刷术语中还有“en”(em 的一半)和“ex”(字母“x”的高度)。
为什么用“e”开头:
因为“em”是“equal M”的缩写,强调它基于字母“M”的宽度。
这种命名方式与印刷传统一致,方便理解相对单位的概念。
总结:
em 是印刷术语的缩写,表示字母“M”的宽度,用于 CSS 中实现相对单位计算。
css中,ex表示字母x的标准高度。请问,ex是缩略的组合词吧?啥意思?
为什么em是宽度,这里ex却成了高度啊?前面的字母都是e啊。词源角度讲解一下
ex 确实是“x-height”的缩写,它代表小写字母“x”的高度,是印刷和排版中的经典术语。我来帮你理清它的词源和设计逻辑:
1. 词源与命名逻辑
“ex”来自“x-height”:在印刷术语中,“x-height”指小写字母“x”的基准高度,而“ex”就是它的缩写。
“e”代表“equal”:这里的“e”并非随意使用,而是强调“ex”基于字母“x”的实际高度(而非宽度)计算,与“em”的“M宽度”形成对比。
2. 为什么“em”是宽度,“ex”是高度?
“em”的起源:它来自字母“M”的宽度,是印刷中用于水平度量的基准单位。
“ex”的用途:而“ex”专门用于垂直度量,比如行高或基线对齐,因此基于“x”的高度更合理。
设计意图:两者分工明确——“em”控制水平空间,“ex”控制垂直空间,共同实现精细的排版控制。
3. 实际应用场景
微调垂直间距:比如设置行高或基线对齐时,用“ex”比“em”更精准。
响应式设计:在字体大小变化时,“ex”能保持垂直比例的一致性。
总结:ex 是“x-height”的缩写,强调基于字母“x”的高度计算,与“em”的宽度形成互补,共同服务于排版需求。
那em的m为什么就是宽度了呢
em 里的“m”确实代表字母“M”的宽度,这其实是从印刷术语里来的。简单来说,它最初就是用来指代大写字母“M”的宽度,因为“M”在等宽字体里几乎是最宽的字符,所以用它作为基准单位很合理。
在 CSS 里,em 是一个相对单位,它的值等于当前元素的字体大小。比如你设置一个元素的字体是 16px,那 1em 就等于 16px。这样设计的好处是,当父元素的字体大小变化时,用 em 定义的元素尺寸也会自动按比例调整,特别适合做响应式布局。
所以“m”指的就是“M”的宽度,而“em”这个单位名也直接体现了它的设计初衷——基于字母“M”的宽度来定义相对尺寸。