长度单位 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /*
              长度单位
                    像素 px
                        - 像素是我们在网页中使用最多的一个单位
                            一个像素相当于屏幕中一个点
                            屏幕实际上由像素点构成
                    
                    百分比 %
                        可以将单位设置百分比形式 
                            浏览器根据父元素样式计算该值
                        使用百分比的好处，当父元素的属性值发生变化时
                            子元素也会按照比例发生改变
                        在创建一个自适应的页面时，经常使用百分比为单位
                    
                    em
                        em和百分比相似，它是相对于当前元素的字体大小来计算的
                        1em = 1font-size
                        使用em时，当字体戴傲发生改变时，em也会随之改变
                        设置字体相关样式，经常使用em
                    
            */
           *{
               margin: 0;
               padding: 0;
           }
           .box{
               width: 200px;
               height: 200px;
               background-color: red;
           }
           .box1{
               font-size: 10px;
               width: 10em;
               height: 50%;
               background-color: #FFFF00;
           }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1"></div>
        </div>
    </body>
</html>

长度单位   px   百分比（相对于父元素变化而发生变化） em（相对于自身字体变化而变化）

posted @ 2021-07-01 10:01  2237774566  阅读(67)  评论(0)    收藏  举报