HTML2em一定是32px,px,em,rem的区别
它们都是用于设置字体的大小以及盒子的宽高,但是px不会因为浏览器尺寸的改变而改变,而em和rem会因为浏览器尺寸的变化而变化
在我们写代码的过程中,经常在CSS中定义字体的大小或者元素的宽高值时会使用到尺寸大小的单位,今天将要为大家详细介绍在CSS中常见的尺寸单位名称及其用法,具有一定的参考价值,希望对大家有所帮助。
【推荐课程:CSS教程】
px
px 是 pixel 的缩写,它的含义是像素的意思,在指定字体大小和元素的宽高的时候使用。像素是相对于显示器屏幕分辨率而言的
例:给一个div元素设置宽为200px,高为200pxdiv{
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
div{
width:6.25em;
height:6.25em;
border: 0.0625em solid #ccc;
text-align: center;
line-height: 6.25em;
}
效果图:
我们还可以直接给body设置一个值,使其的值是直接相对于body的值,然后再将原来的px值除以10就是em的值了body{
font-size: 62.5%
}
div{
width:10em;
height:10em;
border:0.1em solid #ccc;
}
效果图:
从上面图中可以看出em的值并不是固定的而且是相对于他的父级元素大小
rem:
rem是CSS3中新增的一个相对单位,它与em的区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。它的使用非常简单,通过改变根元素的大小就可以改变它的值
例:过将尺寸单位改为rem来给div元素设置宽为100px,高为100pxbody{
font-size:10px;
}
div{
width:15rem;
height:15rem;
border:0.01rem solid pink;
text-align: center;
line-height: 15rem;
font-size: 2rem;
}
效果图:
总结:以上就是本篇文章的全部内容了,希望对大家有所帮助。
HTML2em一定是32px,px,em,rem的区别相关推荐
- CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
- html移动端怎么做城市选择,移动端页面单位的选择(px, em, rem, vw)
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
- px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
- 彻底弄懂css中单位px和em,rem的区别
2019独角兽企业重金招聘Python工程师标准>>> rem: rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem ...
- px,em, rem的区别,在项目中怎么使用rem.
一.px px像素,绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟的长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度单位,需要指定精度DPI. 二.em em是相对长 ...
- 总结css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
- 认识css长度单位 px % em rem vh vw
目录 长度单位 px % em rem vh.vw 总结 长度单位 在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
- 网页布局中的 px,em,rem,pt
网页布局中的 px,em,rem,pt 设备像素:也叫物理像素,显示设备上最微小的物理部件. 比如 iphone 5:640 x 1136px. 不同的机型有不同的设备像素,固定死的. 这里需要讲一下 ...
最新文章
- mysql vue 菜谱_vue+ java 实现多级菜单递归效果
- mathtype公式如何在word中对齐
- 直播回放 | 人工智能强化金融风控(附PPT)
- [html] 举例说明当我们在写布局时,都有哪些边界的情况需要关注的?
- python glob函数_python glob 模块 map函数
- kafka通过脚本一次启动集群
- 八段LED数码管段代码编码表
- 使用canvas实现对图片的批量打码
- Python 如何拆分数据集
- Jquery第一章表格新增功能课后练习第二节2/2
- [转]如何撰写学术论文
- Frobenius companion matrix
- c语言程序运行时可以从键盘上读入,C语言程序设计题库之
- 解决CentOS7 安装后无法识别windows分区问题
- sql分组排序, 分页查询
- 【无线上网】无线网络小常识
- 对话思贤科技CEO姜华:深耕政务金融,思贤科技做行业赋能者
- linux驱动面试题目汇总
- 进程调度算法相关习题
- Python爬虫——Scrapy框架(附有实战)
热门文章
- C语言经典贪心算法之加油站问题(详解)
- sql视图能使用触发器吗_冰箱买回家能立即使用吗 冰箱买回家要放多久能使用【详解】...
- java 获取自绘窗口_iPhone中自绘实现步骤
- Python破解ZIP或RAR文件密码
- go 查找模块位置_如何使用Go语言插件功能?
- 在python中一个子类只能有一个父类吗_在Python中,子类可以与父类在不同的文件中吗?...
- 和feign的区别_Feign的传参研究
- oracle设为归档模式,设置oracle归档模式
- 计算机科学学院参加些什么比赛,【安全月进行时】计算机科学学院成功举办2019年实验室安全知识竞赛活动...
- linux 路由协议,路由协议之RIP协议