P20-前端基础-CSS单位

最新推荐文章于 2023-12-08 20:32:31 发布

Bruce小鬼

最新推荐文章于 2023-12-08 20:32:31 发布

阅读量620

点赞数

分类专栏：最美前端 # 前端【H5+Css3】

本文链接：https://blog.csdn.net/m0_38039437/article/details/112780835

版权

最美前端同时被 2 个专栏收录

202 篇文章 30 订阅

订阅专栏

前端【H5+Css3】

93 篇文章 9 订阅

订阅专栏

P20-前端基础-CSS单位

1.概述

长度单位：
像素

屏幕（显示器）实际上是由一个一个的小点点构成的
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
所以同样的200px在不同的设备下显示效果不一样

百分比

也可以将属性值设置为相对于其父元素属性的百分比
设置百分比可以使子元素跟随父元素的改变而改变

em

em是相对于元素的字体大小来计算的
1em = 1font-size
em会根据字体大小的改变而改变

rem

rem是相对于根元素的字体大小来计算

2.CSS单位案例

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>单位</title>

  <style>
    /* 
                长度单位：
                    像素
                        - 屏幕（显示器）实际上是由一个一个的小点点构成的
                        - 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
                        - 所以同样的200px在不同的设备下显示效果不一样

                    百分比
                        - 也可以将属性值设置为相对于其父元素属性的百分比
                        - 设置百分比可以使子元素跟随父元素的改变而改变

                    em
                        - em是相对于元素的字体大小来计算的
                        - 1em = 1font-size
                        - em会根据字体大小的改变而改变

                    rem
                        - rem是相对于根元素的字体大小来计算

             */

    /* 像素单位 */
    .box1 {
      width: 300px;
      height: 100px;
      background-color: orange;
    }
    /* 百分比单位 */
    .box2 {
      width: 50%;
      height: 50%;
      background-color: orangered;
    }

    html {
      font-size: 30px;
    }

    .box3 {
      font-size: 50px;
      /*em是相对于元素的字体大小来计算的 */
      width: 10em;
      height: 10em;
      /* rem是相对于根元素的字体大小来计算 */
      width: 20rem;
      height: 20rem;
      background-color: greenyellow;
    }
  </style>
</head>

<body>
  <div class="box1">

    <div class="box2"></div>

  </div>

  <div class="box3"></div>
</body>

</html>

3.预览效果

在这里插入图片描述

Bruce小鬼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
P20-前端基础-CSS单位

P20-前端基础-CSS单位1.概述长度单位：像素屏幕（显示器）实际上是由一个一个的小点点构成的不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰所以同样的200px在不同的设备下显示效果不一样百分比也可以将属性值设置为相对于其父元素属性的百分比设置百分比可以使子元素跟随父元素的改变而改变emem是相对于元素的字体大小来计算的1em = 1font-sizeem会根据字体大小的改变而改变remrem是相对于根元素的字体大小来计算2.CSS单位案例
复制链接

扫一扫