5. 长度单位

网页中的长度可以用下面两种方式来表示:
长度单位
1. 像素 px
- 像素是我们在网页中使用的最多的一个单位,
一个像素就相当于我们屏幕中的一个小点,
我们的屏幕实际上就是由这些像素点构成的
但是这些像素点,是不能直接看见。
- 不同显示器一个像素的大小也不相同,
显示效果越好越清晰,像素就越小,反之像素越大。
2. 百分比 %
- 也可以将单位设置为一个百分比的形式,
这样浏览器将会根据其父元素的样式来计算该值
- 使用百分比的好处是,当父元素的属性值发生变化时,
子元素也会按照比例发生改变
- 在我们创建一个自适应的页面时,经常使用百分比作为单位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 300px;
                height: 300px;
                background-color: red;
            }

            .box1{
                width: 50%;
                height: 50%;
                background-color: yellow;
            }

        </style>
    </head>
    <body>

        <div class="box">

            <div class="box1">丁香一样的颜色</div>

        </div>

    </body>
</html>

网页中显示内容:

这里写图片描述

猜你喜欢

转载自blog.csdn.net/u010502101/article/details/81045561