提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > px,em,rem的区分【css教程】,px,em,rem

它们都是用于设置字体的大小以及盒子的宽高,然则px不会由于浏览器尺寸的转变而转变,而em和rem会由于浏览器尺寸的变化而变化

在我们写代码的过程当中,经常在CSS中定义字体的大小或许元素的宽高值时会运用到尺寸大小的单元,本日将要为人人细致引见在CSS中常见的尺寸单元名称及其用法,具有肯定的参考价值,愿望对人人有所协助。

【引荐课程:CSS教程

px

px 是 pixel 的缩写,它的寄义是像素的意义,在指定字体大小和元素的宽高的时刻运用。像素是相对于显示器屏幕分辨率而言的

例:给一个div元素设置宽为200px,高为200px

div{
width:200px;
height:200px;
border: 1px solid #ccc;
text-align: center;
line-height: 200px;
font-size: 16px;

		}

效果图以下:

em

em是一个相对长度的单元,是相对于当前对象内文本的字体尺寸。如过我们未设置当前文本的字体尺寸,那末em就会相对于浏览器的默许字体尺寸

在浏览器中默许字体尺寸为16px,换句话说1em=16px,平常我们在写自适应规划时经常会用到em为单元。经由过程在CSS中的body选择器中设置font-size值来简化代码,使得页面中所有的em都相对于body值。

例:经由过程将尺寸单元改成em来给div元素设置宽为100px,高为100px

1em=16px,所以100px=6.25em

<style>
div{
width:6.25em;
height:6.25em;
border: 0.0625em solid #ccc;
text-align: center;
line-height: 6.25em;
}
</style>

效果图:

我们还能够直接给body设置一个值,使其的值是直接相对于body的值,然后再将本来的px值除以10就是em的值了

body{
font-size: 62.5%
	}
div{
width:10em;
height:10em;
border:0.1em solid #ccc;
}
</style>

效果图:

从上面图中能够看出em的值并非牢固的而且是相对于他的父级元素大小

rem:

rem是CSS3中新增的一个相对单元,它与em的区分在于运用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。它的运用异常简朴,经由过程转变根元素的大小就能够转变它的值

例:过将尺寸单元改成rem来给div元素设置宽为100px,高为100px

body{
		font-size:10px;
	}
		div{
			width:15rem;
			height:15rem;
			border:0.01rem solid pink;
			text-align: center;
			line-height: 15rem;
			font-size: 2rem;
		}

效果图:

总结:以上就是本篇文章的全部内容了,愿望对人人有所协助。

以上就是px,em,rem的区分的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"px,em,rem的区分【css教程】,px,em,rem"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线