px、em、rem、%、无单位的区别

高度或者宽度的单位

px：像素，绝对长度单位

em：相对长度单位，表示相对当前元素font-size的倍数

　　例如：font-size：16px；2em = 16 * 2px = 32px

rem：root em，相对长度单位，表示相对html根元素font-size的倍数

%：

　　width：基准是父元素的宽度

　　height：基准是父元素的高度

　　margin，padding：基准是父元素的宽度

==================举例======================

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 400px;
            height: 400px;
            border: 2px solid #000;
            margin-top: 10%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
========效果：当拖动浏览器宽度时，margin-top会随之变化========

 

 

 

 

　　font-size：基准是父元素的font-size

====包含块：从当前开始，向它的父辈开始找，第一个position不是static的，叫做包含块====

　　left，right：基准是包含块的宽度

　　top，bottom：基准是包含块的高度

无单位：数值为0时可以没有单位。

posted @ 2021-04-24 13:59  #Friday  阅读(929)  评论(0)    收藏  举报