CSS中常用的4种长度单位

在现实生活中，我们知道很多的长度单位，例如米，厘米，寸，尺等等，在css的世界中，也有很多的长度单位

以下是css中常用的四种常用的长度单位

1，像素 px

- 像素是我们在网页中使用的最多的一个单位，一个像素就相当于我们屏幕中的一个小点，我们的屏幕实际上就是由这些像素点构成的，但是这些像素点，是不能直接看见。

- 不同显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素越大。

2，百分比 %

- 也可以将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值

- 使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变

- 在我们创建一个自适应的页面时，经常使用百分比作为单位

3,em

- em和百分比类似，它是相对于当前元素的字体大小来计算的

- 1em = 1font-size，浏览器默认字体大小是16px

- 使用em时，当字体大小发生改变时，em也会随之改变

- 当设置字体相关的样式时，经常会使用em

4,rem

-rem是相对于根元素(html)的字体大小来计算的
代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">.box {width: 300px;height: 300px;background-color: red;}.box1 {font-size: 20px;width: 2em;height: 50%;background-color: yellow;}.box3 {font-size: 20px;/* width: 10em;height: 10em; */width: 10rem;height: 10rem;background-color: yellowgreen;}/* 根标签，根元素 */html {font-size: 25px;}</style></head><body><div class="box"><div class="box1"></div></div><div class="box3"></div></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/199492.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！