20、CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中的px 和 %
px
(pixels) 是固定单位,也可以叫基本单位,代表像素,可以确保元素的大小不受屏幕分辨率的影响。%
(percentage) 是相对单位,代表元素大小相对于其父元素或视口(viewport
)的大小的百分比。使用百分比可以让元素随着屏幕大小或父元素大小的变化而自动调整大小。
选择使用哪种单位取决于您的需求和项目的要求。通常情况下,固定大小的元素(如图像)使用 px
,而相对大小的元素(如布局)使用%
。
案例描述:
以上是描述盒子居中的过程。
1、box2
由初始状态通过step1
,盒子的定位类型变成了绝对定位元素,此时left: 50%
和top: 50%
两个属性值将**盒子的原点(0, 0)**移到了父元素(这里指box1
)的中心位置。这里的50%
是相对于父元素的,也就是相对于盒子box1
, 通过换算得到:left:100px;top:100px;
代表的含义是:盒子的原点在X
轴水平方向向右向移动的100px
, 在Y
轴的垂直方向向下移动了100px
。
2、box2
由step1
到step2
, 通过margin-left: -50px;margin-top: -50px;
使得盒子在X
轴的水平方向向左移动了50px
,在Y
轴的垂直方向向上移动了50px
; ** 使得父盒子和子盒子的圆心重合**,至此盒子居中过程结束。
在此我先介绍一下
CSS
中的坐标系统:坐标轴不只是存在于数学中,它同样存在于
Web
世界中。在Web
中,我们常称之为Web
坐标轴 或CSS
坐标系统 。在
Web
中,默认原点是给定上下文的左上角,也就是元素盒子的左上角,它分为x
轴(也称为水平轴),向右为正值,向左为负值;y
轴(垂直轴),向上为负值,向下为正值:
CSS中的 em 和 rem
em
是相对单位,代表元素的字体大小相对于其父元素的字体大小。因此,如果父元素的字体大小变化,则em
单位的大小也会随之变化。rem
(root em)也是一种相对单位,但它代表元素的字体大小相对于根元素(通常是<html>
元素)的字体大小。因此,即使父元素的字体大小变化,rem
单位的大小也不会随之变化。
两种单位都可以用于设置字体大小、边距等元素的大小,但选择使用哪种单位取决于您的需求和项目的要求。通常情况下,使用 rem
更好,因为它提供了更好的可维护性和可读性。
案例描述:
在以上案例中:我设置的html
根节点的字体大小font-size:15px
,其中状态1、状态2、状态3 都各不相同。
下面我们来看看在浏览器中他们各自的属性:
- 状态1中p标签的属性:
font-size: 20px;
- 状态2中p标签的属性:
// <p style="text-indent: 2em;"><span>我是天界程序员</span></p>
font-size:20px;
text-indent:40px;// <p style="text-indent: 2rem;"><span>我同时也是一个社畜</span></p>
font-size:20px;
text-indent:30px;
在这个状态下我们可以得出结论:
(1)2em === 40px
, 说明em
是相对于父元素的字体大小,来换算大小的,而不是根元素.
(2)2rem === 30px
, 说明rem
是相对于根元素的字体大小,来换算大小的,而不是父元素.
- 状态3中p标签的属性:
// <p style="text-indent: 2em;font-size: 25px;"><span>我是天界程序员</span></p>
font-size:25px;
text-indent:50px;// <p style="text-indent: 2rem;"><span>我同时也是一个社畜</span></p>
font-size:20px;
text-indent:30px;
在这个状态下我们可以得出结论:
2em === 50px
, 说明该状态下的em
是对于元素本身的字体大小,来换算大小的,而不是父元素。
结论:
em
的大小变化是受父元素和元素本身的字体大小影响,其权重:元素本身 > 父元素。rem
的大小变化只受其根元素的字体大小影响,与父元素和元素本身无关。
CSS中的 vw 和 vh
vh
(viewport height
)代表元素大小相对于视口(viewport
)高度的百分比。因此,如果您将元素的高度设置为100vh
,则元素的高度将占据整个视口的高度。vw
(viewport width
)代表元素大小相对于视口宽度的百分比。因此,如果您将元素的宽度设置为100vw
,则元素的宽度将占据整个视口的宽度。
两种单位都可以用于设置元素的宽度和高度,但选择使用哪种单位取决于您的需求和项目的要求。例如,如果您想让元素始终占据整个屏幕的高度,则可以使用 100vh
。
vw
: 取屏幕宽度的 1%,作为基础换算单位。vh
: 取屏幕高度的 1%,作为基础换算单位。vmin
: 取两者的最小值,作为基础换算单位。如果屏幕宽 < 屏幕高
则取屏幕宽为单位
,否则,反之。vmax
: 取两者的最大值,与vmin
的基础换算互斥。
20、CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别相关推荐
- 深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
- 弄清楚CSS单位px、em、rem、vh、vw、vmin、vmax的应用场景
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
- css中单位px和em,rem的区别
1.PX 相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. ...
- 彻底弄懂css中单位px和em,rem的区别
2019独角兽企业重金招聘Python工程师标准>>> rem: rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem ...
- 总结css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- css中的px、em、rem 详解
概念介绍: 1.px (pixel,像素): 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印 ...
- 在html中2em是多少px,在css设置单位px、em、rem哪个更好?
浏览器最终渲染出的页面是以具体的像素为单位的(因为显示器的显示原理是基于像素的啊),浏览器通过计算em和rem,最终再将这些相对单位转换为具体的像素值渲染出来.这三者可以这样理解: px是绝对单位,独 ...
- css常用单位px、em、 rem 区别与各自的用法解析
我们在布局页面中,总要用到一些有关字体,元素宽度,高度等长度单位,一般pc端常用到像素单位,移动端用em,rem 单位,它们都有各自的特点,今天总结一下它们的特点.区别 px是Pixel的缩写,也就是 ...
- 通俗易懂——css长度单位:px、em、rem、vh、vw、in、...
单位 解析 px 绝对单位.像素 em 相对单位.相对于其父元素的font-size,如父元素font-size: 12px:那么子元素1em = 12px,1em = 24px,- rem 相对单位 ...
- CSS尺寸单位px、em、rem、vw、vh以及%的区别
1. px px是像素单位.它是代表显示器上每一个显示的像素点,根据用户屏幕显示器的分辨率决定. 2. em em为相对单位,相对于当前元素内文本的字体尺寸.如果当前元素没有指定字体尺寸,那么以浏览器 ...
最新文章
- alter table add column多个字段_WordPress 在文章列表快速编辑中编辑自定义字段
- class ts 扩展方法_ts类型声明文件的正确使用姿势
- Maven web项目创建
- 如何用matlab实现文字动态滚动,js 动态文字滚动的例子
- 计算机专业小三门要求,最新小三门选科要求有啥变化?附对比表
- 内存很空却频繁gc_记一次不太成功的频繁 full gc 排查过程
- 浅谈2011年上半年Java游戏领域动态
- c#等待所有子线程执行完毕方法
- MAC下利用Github 、hexo、 多说、百度统计 建立个人博客指南
- c语言实验赵欣版答案,赵欣-计算机科学与技术学院
- 计算机网络苏州大学题库,苏州大学计算机网络样卷B[计科大类].doc
- html做一个年份月份天数选择器,jquery编写日期选择器
- 特色租房管理系统/租房管理系统/房屋租赁管理系统
- MATCH和INDEX函数
- python之测试类
- Photoshop CS5初学者必读(23)——应用色彩平衡
- 2017全球ROI Top25游戏广告平台排行榜
- InDesign Quick Start InDesign快速入门 Lynda课程中文字幕
- 关于json对象的使用小结!
- Android 9.0 (Pie)
热门文章
- 爱奇艺2017校园招聘笔试题
- nginx 根据IP转发到指定的后端服务器
- 搭建系统|升级选股工具,多板块个股同时提取!个股行情走势存入数据库
- setClickable,setEnabled,setFocusable 的区别
- 5.cuBLAS开发指南中文版--cuBLAS中的Create()和Destroy()
- 怎么理解VGG-16结构图中的block
- 【学习笔记】《卓有成效的管理者》 第三章 我能贡献什么
- win10系统如何连接宽带连接服务器,Win10系统如何连接宽带上网?,爱纯净官网
- Visual Studio C++ 输出调试信息在调试-输出窗口
- css如何修改滚动条样式