提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

CSS中常用的4种长度单位

CSS 常用 长度 单位
2023-09-27 14:22:49 时间

在现实生活中，我们知道很多的长度单位，例如米，厘米，寸，尺等等，在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>

相关文章