css中的em是什么意思?

em是CSS中的一个相对单位,它的单位长度是根据元素的文本垂直长度来决定的。可以作用在width、height、line-height、margin、padding、border等样式的设置上。

css中em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

在响应式和移动端设计的大前提下,使用em能够更方便快捷的一次性调整web文档及其HTML元素的字体大小、宽度、边距、边框等一系列属性,一般来说使用em作为单位比px更灵活。

浏览器中的文本一般默认为16px,也就是说,默认的情况下:

1em=16px

我们可以改变这个值,如:

body {    font-size: 24px;    width: 10em;    /* 10em = 24px * 10 = 240px */}

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS长度单位em-CSS大小em详解</title>
<style>
body{font-size:14px;}
h1{font-size:16px;}
.size1 p{font-size:1em;}
.size2 p{font-size:2em;}
.size3 p{font-size:3em;}
</style>
</head>
<body>
<h1>假定当前默认字体尺寸是14px,n em即为14px字体尺寸的n倍:</h1>
<ul>
<li>
<strong>1em</strong>:
<p>1em大小的文字</p>
</li>
<li>
<strong>2em</strong>:
<p>2em大小的文字</p>
</li>
<li>
<strong>3em</strong>:
<p>3em大小的文字</p>
</li>
</ul>
</body>
</html>

效果图:

1.jpg

以上就是css中的em是什么意思?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏