前端基础---长度单位

2021-06-30 10:03:55 阅读：156 来源： 互联网

标签：em 百分比 color 前端像素 --- background 长度 height

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

标签：em,百分比,color,前端,像素,---,background,长度,height
来源： https://www.cnblogs.com/leiyanting/p/14953086.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端基础---长度单位