学习HTML与CSS的第六天————长度单位

本文链接：https://blog.csdn.net/weixin_44055237/article/details/104564088

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title></title>
      <style type="text/css"> 
      /* 
            长度单位
                像素 px
                    - 像素是我们在网页中使用最多的一个单位，
                       一个像素就相当于我们屏幕中的一个小点，
                       我们的屏幕实际上就是有这些像素构成的
                       但是这些像素点，是不能直接看见的
                       不同的显示器一个像素的大小也不相同，显示效果越好越清晰
                       像素越小，反之像素越大
                百分比%
                      - 也可以将单位设置为一个百分比的形式
                         这样浏览器将会根据其父元素的样式来计算该值
                      - 使用这个百分比的好处是，当父元素的属性值发生改变时
                         子元素也会按照比例发生改变
                      - 在我们创建一个自适应的页面时，经常使用百分比作为单位
                em
                      - em和百分比类似，他是相对于但通过前元素的字体大小来计算的
                      - lem = 1 font-size
                      - 使用em时，当字体大小改变时，em也会随之改变
                      - 当设置字体相关的样式时，经常会使用em
       */
       .box{
         width: 100px;
         height: 100px;
         background-color: red;
       }
      /*  .box1{
        width: 50%;
         height: 50%;
         background-color:yellow;
       } */
       .box1{
         font-size: 100px;
         width: 1em;
         height: 50%;
         background-color:yellow;
       }
      </style>
    </head>
    <body>
      <div class="box">
        <div class="box1">
        </div>
      </div>
    </body>
</html>