网站建设资讯

NEWS

网站建设资讯

css中em指的是什么意思

小编给大家分享一下css中em指的是什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

为巴彦淖尔等地区用户提供了全套网页设计制作服务,及巴彦淖尔网站建设行业解决方案。主营业务为网站建设、成都做网站、巴彦淖尔网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

em是css中的一个相对长度单位,相对于当前对象内文本的字体尺寸;如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器默认字体尺寸。可以作用在width、height、line-height、margin、border等样式的设置上。

CSS中有众多单位,常用的px是绝对单位,em则是相对单位。在响应式和移动端的大前提下,使用em能够更方便快捷的一次性调整web文档极其HTML元素的字体大小、宽度、边距、边框等一系列属性,可以说在某些方面,使用em作为单位比px更灵活。

一、什么是em


1.em的长度

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

1em=元素中文本的1个垂直高度

根据上面的规则:如果元素中文本的大小为16px,那么1em=16px;如果元素中文本大小为20px,那么1em=20px……

2.em与HTML文本大小默认值

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

1em=16px

那如何改变这个设定呢?只要显式的设置body元素的font-size即可。eg:

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

3.em与继承

在CSS中,如果一个元素没有设置font-size,那么它的font-size值就是它父元素的font-size值,这很好理解,就是简单的继承而已。eg:



    

需要注意的是,子元素p继承了父元素body的font-size,所以其实在p的样式表中隐含了一句“font-size: 12px;”。现在如果显性的为子元素设置font-size的话,那么子元素将按照自己的font-size计算em的绝对长度。eg:



    

注意上例中p的font-size使用了px作为单位,那如果想使用em怎么办呢?需要注意的是,在设置font-size中使用em作为单位,那么em将是其父元素font-size的相对值。eg:



    

子元素p的font-size是根据其父元素body的font-size确定的,因此2em = 12px * 2, = 24px;而p的width是相对于自己的font-size确定的,因此10em = ( 12px * 2 ) * 10 = 240px。所以p中2em=24px,10em=240px也就不奇怪了。

事实上,不仅是width,子元素中除了font-size的em是根据父元素的font-size确定的,其他所有em都是根据自身的font-size确定的。



    

二、根据px计算出正确的em


1.使用PXtoEM计算器

使用在线工具PXtoEM(http://pxtoem.com/)可以轻松快捷的根据px计算出所需要的em值。

2.手动计算em

由下面的例子可以反向推导出px转em的计算公式

px = 参考文本大小 * em  =>  em = px / 参考文本大小

3.注意事项

上面的公式中,“ 参考文本大小”需要格外注意:

  • 如果元素自身设置了font-size,那么参考文本大小就是自身的font-size大小

  • 如果元素自身没有设置font-size,那么参考文本大小就是父元素的font-size大小

  • 为元素设置font-size时,如果使用em作为单位,那么参考文本大小是父元素的font-size大小

以上是“css中em指的是什么意思”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


文章标题:css中em指的是什么意思
URL分享:http://cdweb.net/article/jejehs.html