CSS 单位总结
经典真题
- px 和 em 的区别
CSS 中的哪些单位
首先,在 CSS 中,单位分为两大类,绝对长度单位和相对长度单位。
绝对长度单位
我们先来说这个,绝对长度单位最好理解,和我们现实生活中是一样的。在我们现实生活中,常见的长度单位有米(m)、厘米(cm)、毫米(mm),每一种单位的长度都是固定,比如 5cm,你走到任何地方 5cm 的长度都是一致的
例如:
<div class="container"></div>
.container{width: 5cm;height: 5cm;background-color: pink;
}
在上面的代码中,我们设置了盒子的宽高都是 5cm,这里用的就是绝对长度单位。
常见的绝对单位长度如下:
这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如,我们通常不会在屏幕上使用 cm。
惟一一个经常使用的值,估计就是 px(像素)。
相对长度单位
相对长度单位相对于其他一些东西,比如父元素的字体大小,或者视图端口的大小。使用相对单位的好处是,经过一些仔细的规划,我们可以使文本或其他元素的大小与页面上的其他内容相对应。
下表列出了 web 开发中一些最有用的单位。
上面的单位中,常用的有 em、rem、vw、vh,其中 vw 和 vh 代表的是视口的宽度和高度,例如:
<div class="container"></div>
*{margin: 0;padding: 0;
}
.container {width: 50vw;height: 100vh;background-color: pink;
}
在上面的代码中,我们设置了容器的宽度为 50vw,也就是占视口的一半,而高度我们设置的是 100vh,就是占满整个视图。
接下来来看一下 em 和 rem。
em 和 rem 相对于 px 更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。
对于 em 和 rem 的区别一句话概括:em 相对于父元素,rem 相对于根元素。
来看关于 em 和 rem 示例。
em 示例
<div>我是父元素div<p>我是子元素p<span>我是孙元素span</span></p>
</div>
* {margin: 0;padding: 0;
}div {font-size: 40px;width: 10em;/* 400px */height: 10em;outline: solid 1px black;margin: 10px;
}p {font-size: 0.5em;/* 20px */width: 10em;/* 200px */height: 10em;outline: solid 1px red;
}span {font-size: 0.5em;width: 10em;height: 10em;outline: solid 1px blue;display: block;
}
效果:
rem 示例
rem 是全部的长度都相对于根元素,根元素是谁?
那就是 html元素。通常做法是给 html 元素设置一个字体大小,然后其他元素的长度单位就为 rem。
例如:
<div>我是父元素div<p>我是子元素p<span>我是孙元素span</span></p>
</div>
* {margin: 0;padding: 0;
}html {font-size: 10px;
}div {font-size: 4rem;/* 40px */width: 30rem;/* 300px */height: 30rem;/* 300px */outline: solid 1px black;margin: 10px;
}p {font-size: 2rem;/* 20px */width: 15rem;/* 150px */height: 15rem;/* 150px */outline: solid 1px red;
}span {font-size: 1.5rem;width: 10rem;height: 10rem;outline: solid 1px blue;display: block;
}
所以当用 rem 做响应式时,直接在媒体中改变 html 的 font-size,此时用 rem 作为单位的元素的大小都会相应改变,很方便。
看到这里我想大家都能够更深刻的体会了 em 和 rem 的区别了,其实就是参照物不同。
真题解答
- px 和 em 的区别
参考答案:
px 即 pixel 像素,是相对于屏幕分辨率而言的,是一个绝对单位,但是具有一定的相对性。因为在同一设备上每个设备像素所代表的物理长度是固定不变的(绝对性),但在不同设备间每个设备像素所代表的物理长度是可以变化的(相对性)。
em 是相对长度单位,具体的大小要相对于父元素来计算,例如父元素的字体大小为 40px,那么子元素 1em 就代表字体大小和父元素一样为 40px,0.5em 就代表字体大小为父元素的一半即 20px。
-EOF-