前端学习 -- 长度单位

长度单位

 像素 px 

- 像素是我们在网页中使用的最多的一个单位,
一个像素就相当于我们屏幕中的一个小点,我们的屏幕实际上就是由这些像素点构成的但是这些像素点,是不能直接看见。
- 不同显示器一个像素的大小也不相同,显示效果越好越清晰,像素就越小,反之像素越大。


百分比 %

- 也可以将单位设置为一个百分比的形式,这样浏览器将会根据其父元素的样式来计算该值
- 使用百分比的好处是,当父元素的属性值发生变化时,子元素也会按照比例发生改变
- 在我们创建一个自适应的页面时,经常使用百分比作为单位


em

- em和百分比类似,它是相对于当前元素的字体大小来计算的
- 1em = 1font-size
- 使用em时,当字体大小发生改变时,em也会随之改变
- 当设置字体相关的样式时,经常会使用em

 示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .classA {
                width: 300px;
                height: 300px;
                background-color: blue;
            }
            
            .classB {
                width: 50%;
                height: 50%;
                background-color: red;
            }
            
            .classC {
                font-size: 50px;
                width: 2em;
                height: 50%;
                background-color: yellow;
            }
        </style>
    </head>

    <body>
        <div class="classA">
            <div class="classB"></div>
        <div class="classC"></div>
        </div>
        
    </body>

</html>

效果:

 

转载于:https://www.cnblogs.com/androidsuperman/p/6691616.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值