26. 像素、百分比

最新推荐文章于 2022-10-21 10:49:32 发布

广东码农

最新推荐文章于 2022-10-21 10:49:32 发布

阅读量183

点赞数

分类专栏： html+css 文章标签：前端

本文链接：https://blog.csdn.net/quanxiaobai_/article/details/115762984

版权

html+css 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            长度单位：
                像素
                    -屏幕（显示器）实际上是由一个一个的小点点构成的
                    -不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
                    -所以同样的200px在不同的设备下显示效果不一样

                百分比
                    -百分比可以设置为相对于其父元素属性的百分比
                    -设置百分比可以使子元素跟随父元素的改变而改变
         */
         .box1{
             width: 200px;
             height:400px;
             background-color: red;
         }

         .box2{
             background-color: greenyellow;
             width: 50%;
             height: 50%;
         }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    
</body>
</html>

广东码农

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
26. 像素、百分比

<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
复制链接

扫一扫