css中常用相对单位em和rem的示例分析-成都快上网建站

css中常用相对单位em和rem的示例分析

小编给大家分享一下css中常用相对单位em和rem的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站建设、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的镇平网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

css中相对长度单位包括有:em,rem,points,pica,ex,ch等,下面我们就来介绍一下相对长度中常用的2个单位:em和rem单位是如何使用的。

css长度单位之em单位

em是相对字体长度单位,它的单位长度是根据元素的文本文字垂直长度来决定的。例:1em相当于当前的字体尺寸(font-size属性),那么2em相当于当前字体尺寸的2倍。若用于其他属性(width,height),则是相对于本身元素的font-size。可以作用在width、height、line-height、margin、padding、border等样式的设置上。

我们具体的看一个简单的示例,来了解em。




	
		
		

	

	
		
我是父元素div

我是子元素p 我是孙元素span

效果图:

css中常用相对单位em和rem的示例分析

em的特点:

  1. em单位的值并不是固定的,子元素字体大小的em是相对于父元素字体大小;

  2. 元素的width/height/padding/margin用em的话是相对于该元素的font-size

css长度单位之rem单位

rem是CSS3新增的一个相对字体长度单位,只相对根元素即html元素字体大小来确定其长度,是做移动端页面的必不可少的长度单位。




	
		
		

	

	

		
			div1---48px
			
			    div2---8px
			

效果图:

css中常用相对单位em和rem的示例分析

例子中html的字体大小为固定大小16px,设置div1的字体大小为3rem,而:3rem = 16px * 3 = 48px,所以div1 的字体大小为48;

设置div2的字体大小为0.5rem,而:0.5rem = 16px * 0.5 = 8px,所以div2的字体大小为8px。

em与rem对比

我们通过一个简单的例子来看看em与rem之间的区别




	
		
		

	

	
		
html设置字体大小为16px,body设置为8px。 div1的字体大小为3rem(3rem = 16px * 3 = 48px)
div1--宽20em(960px),高20rem(320px) div2 宽10em(480px) 高10rem(160px)

效果图:

css中常用相对单位em和rem的示例分析

注意:

div1盒子的font-size是3rem,参考的是根元素html的font-size;

div1盒子的width是20em,因为自身有font-size属性,因此参考文本为自身的font-size;

div1盒子的height是3rem,参考的是根元素html的font-size;

div2盒子的font-size是0.5em,参考的是其父元素div1盒子的font-size;

div2盒子的height是10rem,参考文本为根元素html的font-size;

div2盒子的width是10em,参考文本为其父元素div1盒子的font-size.

看完了这篇文章,相信你对“css中常用相对单位em和rem的示例分析”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


当前名称:css中常用相对单位em和rem的示例分析
URL链接:http://kswjz.com/article/igcgod.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯