hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

px,em,rem的区分【html5教程】

2019-11-26HTML搜搜PHP网48°c
A+ A-
它们都是用于设置字体的大小以及盒子的宽高,然则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网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
px,em,rem的区分【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: