HTML&CSS基础-长度单位

　　　　　　　　　　　　　　　　HTML&CSS基础-长度单位
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰
一.HTML源代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>长度单位</title>
        
        <style type="text/css">
            /**
             *     常见的长度单位:
             *         像素(px):
             *             像素是我们在网页中使用的最多的一个单位，一个像素就相当于我们屏幕中的一个小点，我们的屏幕实际上就是由这些像素点构成的，但是这些像素点，是不能直接使用肉眼看见的。
             *             不同显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素越大。一般情况下，电脑的一个像素是手机像素的4呗。
             * 
             *         百分比(%):
             *             也可以将单位设置为一个百分比的形式，这样浏览器会根据其父元素的样式计算该值。
             *             使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变。
             *             在外面创建一个自适应的网页时，经常使用百分比作为单位。
             * 
             *         em:
             *             em和百分比类似，它是相对于当前元素的字体大小来计算的
             *             1(em) = l(font-size),因此当我们使用em时，当字体大小发生改变，em也会随之改变。
             *             当设置字体相关的样式时，经常会使用em
             */
            .box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            
            .box1{
                width: 50%;
                height: 50%;
                background-color: yellow;
            }
            
            .hello{
                width: 300px;
                height: 300px;
                background-color: blueviolet;
            }
            
            .world{
                font-size: 100px;
                width: 1em;            /**em和font-size大小有关，此时1em=100px*/
                height: 50%;
                background-color: deeppink;
            }
            
            .linux{
                width: 300px;
                height: 300px;
                background-color: blue;
            }
            
            .bigdata{
                font-size: 50px;
                width: 1em;        /**em和font-size大小有关，此时1em=50px*/
                height: 50%;
                background-color:chartreuse;
            }
            
            
        </style>
    </head>
    <body>
        
        <div class="box">
            <div class="box1"></div>
        </div>
        
        <div class="hello">
            <div class="world"></div>
        </div>
        
        <div class="linux">
            <div class="bigdata"></div>
        </div>
    </body>
</html>
二.浏览器打开以上代码渲染结果