CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别

简介: CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别

CSS中的px 和 %

  • px (pixels) 是固定单位,也可以叫基本单位,代表像素,可以确保元素的大小不受屏幕分辨率的影响。
  • % (percentage) 是相对单位,代表元素大小相对于其父元素或视口(viewport)的大小的百分比。使用百分比可以让元素随着屏幕大小或父元素大小的变化而自动调整大小。

选择使用哪种单位取决于您的需求和项目的要求。通常情况下,固定大小的元素(如图像)使用 px,而相对大小的元素(如布局)使用%

案例描述:

image.png

以上是描述盒子居中的过程。

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 轴(垂直轴),向上为负值,向下为正值:image.png

CSS中的 em 和 rem

  • em 是相对单位,代表元素的字体大小相对于其父元素的字体大小。因此,如果父元素的字体大小变化,则 em 单位的大小也会随之变化。
  • rem(root em)也是一种相对单位,但它代表元素的字体大小相对于根元素(通常是 <html> 元素)的字体大小。因此,即使父元素的字体大小变化,rem 单位的大小也不会随之变化。

两种单位都可以用于设置字体大小、边距等元素的大小,但选择使用哪种单位取决于您的需求和项目的要求。通常情况下,使用 rem 更好,因为它提供了更好的可维护性和可读性。

案例描述:

image.png

在以上案例中:我设置的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

  • vhviewport height)代表元素大小相对于视口(viewport)高度的百分比。因此,如果您将元素的高度设置为 100vh,则元素的高度将占据整个视口的高度。
  • vwviewport width)代表元素大小相对于视口宽度的百分比。因此,如果您将元素的宽度设置为 100vw,则元素的宽度将占据整个视口的宽度。

两种单位都可以用于设置元素的宽度和高度,但选择使用哪种单位取决于您的需求和项目的要求。例如,如果您想让元素始终占据整个屏幕的高度,则可以使用 100vh

  • vw : 取屏幕宽度的 1%,作为基础换算单位。
  • vh : 取屏幕高度的 1%,作为基础换算单位。
  • vmin : 取两者的最小值,作为基础换算单位。如果屏幕宽 < 屏幕高 则取屏幕宽为单位,否则,反之。
  • vmax : 取两者的最大值,与vmin的基础换算互斥。
相关文章
|
1月前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
75 0
|
17天前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
13 1
|
14天前
|
前端开发 UED 开发者
CSS基础-属性值单位:px, em, rem, %
【6月更文挑战第7天】本文探讨了CSS中四种关键的尺寸单位:像素(px)、相对单位(em)、rem和百分比(%)。px提供稳定显示但不适用于响应式设计;em根据上下文动态调整,但嵌套使用可能导致计算复杂;rem简化了嵌套计算,适合作为响应式设计的选择;%用于流体布局,但可能在复杂结构中引起不稳定。理解各单位特性并结合现代布局技术,能提升网页布局的美观性和用户体验。
|
前端开发
CSS3中的Rem值与Px之间的换算
bootstrap默认 html{font-size: 10px;}   rem是一个相对大小的值,它相对于根元素, 比如假设,我们设置html的字体大小的值为html{font-size: 87.5%;}(也就是14px)。
902 0
|
23天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
26 0
|
3天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
24 5
|
7天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
19 2
|
6天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
7天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
12 1
|
9天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
30 3