【css单位】

简述CSS 单位中 px，em ， rem，%， vh/vw，的区别

1.px：

px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位

2.em：

em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字 体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小因此并不是一
个固定的值

3.rem:

• 以网页根元素元素上设置的默认字体大小为1rem 默认 1rem=16px
• 可以实现响应式布局。
• 响应式布局指的是元素大小能根据屏幕大小随时变化。
• 所有以 rem 为单位的位置、大小都跟着根元素字体大小而变化。
• 所以只要在屏幕大小变化的时候改变根元素的 font-size 就可以了

4.%：

• 通常认为子元素的百分比完全相对于直接父元素，但是，不总是相对于父元素的对应属性值。
• 子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素高度。
• 子元素的left 和 right 如果设置百分比，则相对于直接非 static 定位父元素的宽度。
• 子元素的 padding/margin 如果设置百分比，不论是垂直方向或者水平方向，都相对于直接父亲元素的padding/margin,与父元素的height有关。
• 因为 % 不总是相对于父元素的宽高或者屏幕大小，所以开发少用。

5.vh/vw：

• vh: 无论视口高度多少，都将视口高均分为100份，每一小份就是1vh，所以，也是相对单位可随视口大小变化而自动变化。
• vw：无论视口宽度多少，都将视口宽均分100份，每一小份就是1vw，所以也是相对单位，可随视口大小变化而自动变化。
• vw 和 vh 本质就是%
• 这里视口指的是浏览器内部的可视区域大小。