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

时间：2021-04-24 16:17:06 阅读：13 评论：0 收藏：0 [点我收藏+]

高度或者宽度的单位

px：像素，绝对长度单位

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

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

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

%：

　　width：基准是父元素的宽度

　　height：基准是父元素的高度

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

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

<!DOCTYPE html>

<head>

<title>Document</title>

div {

width: 400px;

height: 400px;

border: 2px solid #000;

margin-top: 10%;

}

</style>

</head>

<body>

</body>

</html>

========效果：当拖动浏览器宽度时，margin-top会随之变化========

技术分享图片

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

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

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

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

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

原文：https://www.cnblogs.com/Friday1/p/14696756.html

踩

(0)

评论一句话评论（0）

分享档案

更多>