CSS单位

最新推荐文章于 2024-10-11 12:55:12 发布

Lewin671

最新推荐文章于 2024-10-11 12:55:12 发布

阅读量940

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/QingyingLiu/article/details/82048307

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS单位

CSS单位分为绝对单位和相对单位。

绝对单位

在CSS中，绝对单位打大小是固定的，使用打是物理度量单位，显示效果不会受到外界因素影响。绝对单位一般多用于传统平面印刷，而极少用于前端开发。

绝对单位	说明
cm	厘米
mm	毫米
in	英尺
pt	磅(point)，印刷的点数
pc	pica，1pc=12pt

相对单位

在CSS中，相对单位打大小是不固定的，一般相对其他长度而言。

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

px

px，全称pixel（像素指的是一张图片中最小的点，或者是计算机屏幕中最小的点）。比如一台计算机的分辨率是800px × 600px，指的就是”计算机显示屏宽800个小方点，高是600个小方点“。

严格来说，px是属于相对单位，因为屏幕分辨率的不同，1px的大小也是不同的。如果不考虑屏幕分辨率，我们也可以把它当做绝对单位来看待。

%

在CSS中，支持百分比作为单位的属性有很多，大致可以分为三大类：
- width、height、font-size的百分比是相对于父元素”相同属性“的值来计算的。
- line-height的百分比是相对于父元素的font-size值来计算的
- vertical-align的百分比是相对于当前元素的line-height值来计算的。

Example

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>percentage representation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        #father{
            width: 200px;
            height: 160px;
            border: 1px solid blue;
            font-size: 30px;
        }
        #son{
            width: 50%;
            height: 50%;
            border: 1px solid red;
            font-size: 50%
        }
    </style>
</head>
<body>
    <div id="father">
        <span>This is father block.</span>
        <div id="son">
            <span>This is son block.</span>
        </div>
    </div>
</body>
</html>

运行效果

em

在CSS中，em是相对于”当前元素“的字体大小而言的。其中，1em等于”当前元素“的字体大小。这里的字体大小指的是以px为单位的font-size值。例如，当前元素的font-size为10px，则1em等于10px;当前元素的font-size值为20px，则1em等于20px。

注意:如果当前元素的font-size没有定义，则当前元素会继承父元素的font-size。如果当前元素的所有祖先元素都没有定义font-size，当前元素会继承浏览器默认的font-size。其中，所有浏览器默认的font-size值都是16px。

在CSS中，使用em作为单位有三个小技巧：

首行缩进使用text-indent:2em实现
我们知道，网页排版中，网页的首行一般都会缩进两个字的距离。如果要实现这种效果，text-indent的值应该是font-size的两倍。

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>em applicition 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
    p{
        text-indent: 2em;
        font-size: 14px;
        width:360px;
    }
    </style>
</head>
<body>
    <h3>爱莲说</h3>
    <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人盛爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
    <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>

运行效果

使用em作为统一单位
为了简化font-size的计算，我们可以在CSS中提前声明body{font-size:62.5%;}。通过这个声明，我们可以使得默认字体大小变成16px × 62.5% = 10px, 此时em和px的对应关系如下：

1em=10px;
0.75em=7.5px;

也就是说，我们只需要将原来的px值除于10,然后换上em作为单位就行了。这是个非常棒的技巧。在实际开发中，如果我们想要统一使用em作为单位，都是使用这个技巧。

Example1

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        body{
            font-size: 62.5%;
        }
        #p1{
            font-size: 1em;
            color: aqua;
        }
        #p2{
            font-size: 2em;
            color: blueviolet;
        }
        #p3{
            font-size: 3em;
            color: rosybrown;
        }
    </style>
</head>
<body>
    <p id="p1">当前字体大小为1em，大小为10px</p>
    <p id="p2">当前字体大小为2em，大小为20px</p>
    <p id="p3">当前字体大小为3em，大小为30px</p>
</body>
</html>

运行效果

Example2:一个p元素的width为150px，height为75px，font-size为15px，text-indent为30px，如果我们使用em作为单位，该如何实现？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>em example</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    html{
        font-size: 62.5%;
    }
    #p{
        border: 1px solid black; 
    }
    #p1{
        font-size: 15px;
        width: 150px;
        height: 75px;
        text-indent:30px;
    }
    #p2{
        font-size: 1.5em;
        width: 10em;
        height: 5em;
        text-indent: 2em;
    }
    </style>
</head>

<body>
    <p id="p1">这是一个使用px为单位的段落</p>
    <p id="p2">这是一个使用em为单位的段落</p>
</body>
</html>

运行效果

注意：在第二个段落中，1em是当前元素字体的大小，当前元素的大小为10px × 1.5 = 15px。

对于一个页面的字体大小，使用px作为单位的时候可拓展性不好，使用百分比作为单位时不符合习惯，最佳选择是使用em作为单位来定义字体。使用em作为单位，当需要改变页面整体文字的大小时，我们只需要改变根元素的字体大小即可，工作量变得非常少。em这个特点在跨平台网站开发中有着明显优势。

rem

rem，全称font-size of the root element,指的是相对于根元素(即html元素)的字体大小。rem是CSS3新引入的单位，目前除了IE8以及以前的版本之外，大部分主流浏览器都是支持rem的。

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Example for rem</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
    html{font-size: 62.5%;}
    #father{
        width: 200px;
        height: 160px;
        border:1px solid blue;
        font-size: 20px;
    }
    #son{
        width: 150px;
        height: 100px;
        border: 1px solid red;
        font-size: 2rem;
    }
    </style>
</head>
<body>
    <div id="father">
        i am lewin
        <div id="son">
            i am lewin
        </div>
    </div>
</body>
</html>