CSS单位相对单位px % em rem 详谈

最新推荐文章于 2024-02-27 11:11:46 发布

前端小菜羊

最新推荐文章于 2024-02-27 11:11:46 发布

阅读量324

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_47124862/article/details/110187208

版权

本文详细介绍了CSS中的四种相对单位：px、%、em和rem。px是屏幕上的最小点，百分比是相对于父元素的相应属性，em基于当前元素的字体大小，而rem则相对于根元素的字体大小。讨论了它们在不同场景下的应用，包括首行缩进、统一单位和字体大小控制，并提供了实用技巧。

摘要由CSDN通过智能技术生成

在CSS中除了最基础的px单位以外，还会有许多其他常用的单位

1、绝对单位

绝对单位的显示效果不会受到外界因素的影响。绝对单位主要运用于传统平面印刷中，很少用于前端的开发

绝对单位	说明
cm	厘米
mm	毫米
in	英寸
pt	磅
pc	pica，1pc=12pt

2、相对单位

在CSS中，相对单位不是固定不变的，其一般是相对其他长度而言，常用的相对单位如下表：

相对单位	说明
px	像素
%	百分比
em	1em=“当前元素”字体大小
rem	1rem=“根元素”字体大小

除了以上四种外，还有ex、vw、vh等，这些都是用于移动端开发的
（1）像素px
px指的是一张图片中最小的点，或者是计算机屏幕中最小的点
当我们将一个图片放大时，会看到图片是由许多个小方点组成的，其中，每一个小方点就是一个像素。
屏幕的分辨率不同，1px的大小也是不相同的
（2）百分比
在CSS中，支持百分比作为单位的属性有很多，可以分为三类
->width（宽）、height（高）、font-size（字体尺寸）的百分比是相对于父元素“相同属性”的值来计算的
->line-height（行高）的百分比是相对于当前元素的值来计算
->vertical-align（垂直对齐方式）的百分比是相对当前元素的值来计算
举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<>, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #ff
        {
    
            width: 300px;
            height: 200px;
            border:1px solid hotpink;
            font-size: 20px;
        }
        #ss
        {
    
            width: 25%;
            height: 25%;
            border: 1px solid paleturquoise;
            font-size: 2