CSS中的px 和 %
-
px
-
%
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
20、CSS中单位：【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中的 em 和 rem
-
em
em
-
rem
<html>
rem
两种单位都可以用于设置字体大小、边距等元素的大小，但选择使用哪种单位取决于您的需求和项目的要求。通常情况下，使用
rem
更好，因为它提供了更好的可维护性和可读性。
案例描述：
在以上案例中：我设置的
html
根节点的字体大小
font-size:15px
，其中状态1、状态2、状态3 都各不相同。
下面我们来看看在浏览器中他们各自的属性：
- 状态1中p标签的属性：
- 状态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
-
vh
-
vmin
屏幕宽 < 屏幕高
屏幕宽为单位
-
vmax
vmin