参考链接

CSS单位

px

px 就是 pixel 像素的缩写，绝对长度单位，像素 px 是相对于显示器屏幕分辨率而言的。

（绝对是对于物理介质而言）

em 与 rem

1em 表示与当前元素字体的宽度，准确来说是一个大写字母M的宽度
1rem 则表示默认字体大小的宽度，同样实质上也是一个大写字母M的宽度

两者的差别

rem 总是以根节点 (html) 的字体大小 font-size 作为参考，实际上 rem 命名就是 root em。
而 em 则以当前元素的字体大小 font-size 作为参考，
如果用在 font-size 属性本身，则它的参考值是父元素的 **font-size** 值，
如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸。

视口比例单位 vh、vw、vmin、vmax

1vw 表示视口宽度的 1/100
1vh 表示视口高度的 1/100
1vmin 取 1 vw 和 1 vh 较小的一者
1vmax 取 1 vw 和 1 vh 较大的一者

视口宽高对应 window.innerWdith 和 window.innerHeight

百分比

%（百分比）

相对于元素包含块的宽高的百分比大小

1、对于 position: static | relative; 的元素是相对于最近的父元素（内容区的边缘）

2、对于 position: absolute; 的元素是相对于最近的已定位的父元素（内边距区的边缘）

3、对于 position: fixed; 的元素是相对于 viewport（可视窗口）

字体大小百分比则根据父元素逐层迭加，与定位无关。

子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于包含块元素的width，而与包含块元素的height无关。

跟padding一样，margin也是如此，子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于包含块元素的width；

border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度，

除了border-radius外，还有比如translate、background-size等都是相对于自身的；

其他

1、如何使 1 rem = 10 px？

设置 HTML {font-size：62.5%;} 即可

2、如果父元素没有指定高度，那么子元素的百分比的高度是多少？

会按照子元素的实际高度，设置百分比则没有效果

百分比测试代码

<div class="father">
    1
    <div class="son">2</div>
</div>

.father {
    position: static | relative;
    background-color: deepskyblue;
    width: 500px;
    height: 500px;
    margin: 50px;
    padding: 50px;
    border: 50px solid black;
    font-size: 100% | 200%;
}
.son {
    position: static | relative | absolute | fixed;
    background-color: orange;
    width: 100%;
    height: 100%;
    padding-left: 10%;
    padding-bottom: 10%;    
    margin-left: 10%;
    margin-bottom: 10%;
    font-size: 100% | 200%;    
}

前端知识库

CSS 单位

参考链接

CSS单位

px

em 与 rem

视口比例单位 vh、vw、vmin、vmax

百分比

其他