css的单位(px,em.rem,%,)

最新推荐文章于 2024-08-13 19:41:33 发布

leigangg

最新推荐文章于 2024-08-13 19:41:33 发布

阅读量812

点赞数

本文链接：https://blog.csdn.net/leigangg/article/details/104432770

版权

css的单位换算以及相对的位置

1.px单位.(像素)

px是你屏幕设备物理上能显示出的最小的一个点，这个点不是固定宽度的，不同设备上点的长宽、比例有可能会不同。假设：你现在用的显示器上1px宽=1毫米，但我用的显示器1px宽=两毫米，那么你定义一个div宽度为100px，你显示器上看这个div是10厘米，我显示器上看是20厘米。另外一个px点的长宽不一定是1:1的正方形，有的设备上长宽比是不一样的。

2.em单位.

em也是css的一个单位名称.它的值是灵活的.它先看自己本身是否有font-size,如果没有那么它就会相对父元素的font-size.比如:父元素的font-size为16px,子元素的font-size为2em,那么这里的2em就等于32px,因为em 的换算为父元素的px乘以子元素的em就等于子元素的px,前提是自己没有font-size,如果自己有font-size,那么它相对的就是自己本身的font-size,em的用处是你要整个网页字体统一变大变小你只要改body里面font-size的值就行了。

详细代码:

    <style>
        .box{
            height: 100px;
            width: 100px;
            font-size: 20px;
        }
        q{
            /* 这里的2em 就等于40px
               如果是3em就等于60px 
               这里的font-size:2em;
               和在这里写font-size:40px是相等的. */
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>我是一个段落</p>
    </div>
</body>

3.百分比(%)

百分比也是相对于父元素的,子元素的百分比设置的是什么属性,那么它就相对于父元素的什么属性.比如.子元素height:50%那么他就是相当于父元素的height的百分之50,但是也有特殊情况,比如margin-top,它的百分比就是相对于父元素的宽度的.

4.rem单位

EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。

浏览器的兼容性
除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。
因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。

参考于(彻底弄懂css中单位px和em，rem的区别)