1.CSS单位-CSS进阶

时间:2022-07-26
本文章向大家介绍1.CSS单位-CSS进阶，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

一、CSS单位

1.绝对单位

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

2.相对单位

在CSS中，相对单位定义的大小是不固定的。

（1）常见的相对单位

相对单位

说明

px

像素

%

百分比

em

1em等于当前元素字体大小

rem

1rem等于根元素字体大小

（2）px

全称pixel，像素，指的是一张图片中最小的点，或计算机屏幕中最小的点。 当我们将一张图片放大n倍，你会发现：原来一张图片是由一个个小方点组成的，而每一个小方点就是一个像素。

① 分辨率

我们常听说，这台计算机的分辨率是 800px * 600px，指的就是计算机显示屏宽有800个小方点，高有600个小方点。

Ⅰ.分辨率不同，1px大小也不同

现在，我们知道px是相对单位，但屏幕分辨率不同，1px的大小也不同。

（3）%

在CSS中，支持百分比作为单位的属性很多，可分为 3 类：

  • width、height、font-size的百分比是相对于父元素“相同属性”的值来计算的。
  • line-height 的百分比是相对于父元素的font-size值来计算的。
  • vertical-align 的百分比是相对于当前元素的line-height值来计算的。
① 示例
Ⅰ.例1

若父元素 width、height为100px，子元素width、height为50%，则子元素的width、height实际为50px。 若父元素 font-size为32px，子元素font-size为50%，则子元素的font-size实际为16px。

Ⅱ.例2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <style>
            #dady{
                width:200px;
                height:160px;
                border:1px solid #00FFFF;   /*设置边框样式*/
                font-size:32px;
            }
            
            #son{
                width:50%;                  /*相对于父元素“相同属性”的值来计算的*/
                height:50%;
                border:1px solid #66A9FE;   /*设置边框样式*/
                font-size:50%;              
            }
        </style>
    </head>
    <body>
        <div id="dady">
            見贤思齊
            <div id="son">見贤思齊</div>
        </div>
    </body>
</html>

百分比单位例.png

（4）em

在CSS中，em是相对于当前元素的字体大小而言。 其中，1em等于当前元素字体大小。此处的字体大小指的是以px为单位的font-size值。 例如：当前元素的font-size值为20px，则1em值为20px，依此类推。

注意
  • 若当前元素的font-size没有定义，则当前元素会继承父元素的font-size。
  • 若当前元素的所有祖先元素都没有定义font-size，则当前元素会继承浏览器默认的font-size，其中浏览器默认的font-size值都是 16px。
3个小技巧

在CSS中，em作为单位有以下 3 个小技巧：

  • 首行缩进使用text-index:2em实现。
  • 使用em作为统一单位。
  • 使用em作为字体大小单位。
① 首行缩进使用text-index:2em实现（重点）

我们写作文时，都会将每一段的段首缩进 2 个字的距离，这在网页排版中也是一样。 要想实现这个效果，text-index值应该是font-size值的 2 倍。如果我们使用text-index:2em就可以轻松实现。

Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <style>
            p{
                font-size: 15px;
                text-indent: 2em;       /* 实现首行缩进，1em=当前元素字体大小，这里的2em等价于30px */
                width: 360px;
            }
        </style>
    </head>
    <body>
        <h3>念奴娇·赤壁怀古</h3>
        <p>大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。</p>
        <p>遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。</p>
    </body>
</html>

首行缩进text-index为2em.png

对于首行缩进，使用em作为单位会比使用px作为单位更好。 因为使用px作为单位，若我们定义当前元素的font-size为10px，则text-index为20px；若定义当前元素的font-size为15px，则text-index为30px，依此类推。 也就是说，我们使用em作为单位时，不管font-size定义为多少px，我们只需将text-index定义为2em即可，不需计算，十分方便。

② 使用em作为统一单位

所有浏览器默认字体大小都是16px。 我们若想要在一个页面中，统一使用em作为单位，就可以拿默认字体大小开刀。 简单来讲，对于任何元素我们都不需设置font-size为多少px，二世继承根元素的font-size值16px，然后再使用em换算即可。

Ⅰ.简化font-size计算

若使用浏览器默认字体大小（16px），则em与px对应关系为： 

1em = 16px * 1 = 16px
0.75em = 16px * 0.75 = 12px

但这有个缺点，就是结果不是整数，计算时还是有些麻烦，所以为了简化font-size计算，我们在CSS中提前声明“body{font-size:62.5%}”。

Ⅱ.声明“body{font-size:62.5%}”

通过这个声明，我们可以使得默认字体大小变为 16px * 62.5% = 10px，此时em与px对应关系为： 

1em = 10px
0.75em = 7.5px

在实际开发中，若想要统一使用 em 作为单位，都是使用这个技巧。

Ⅲ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <style>
            body{
                font-size: 62.5%;   /*使得浏览器默认字体大小变为 10px */
            }
            #p1{
                font-size: 1em;
            }
            #p2{
                font-size: 1.5em;
            }
            #p3{
                font-size: 2em;
            }                       
        </style>
    </head>
    <body>
        <p id="p1">当前字体大小为1em，也就是10px</p>
        <p id="p2">当前字体大小为1.5em，也就是15px</p>
        <p id="p3">当前字体大小为2em，也就是20px</p>
    </body>
</html>

使用em作为统一单位例1.png

Ⅳ.例2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <style>
            *{
                padding: 0;
                margin: 0;      /*设置内外边距为0*/
            }   
            html{
                font-size: 62.5%;   /*使得浏览器默认字体大小变为 10px */
            }
            
            p{
                display: inline-block;
                border: 1px solid #DDA0DD;
            }
            
            #p1{        /*使用 px 作为单位*/
                font-size: 15px;
                width: 150px;
                height: 75px;
                text-indent: 30px;  /*首行缩进2个字体大小*/
            }
            #p2{        /*使用 em 作为单位*/
                font-size: 1.5em;   /*此时，字体大小为15px*/
                width: 10em;        /*em是相对于当前元素的字体大小，等于10*1.5em = 10 * 15px */
                height: 5em;        
                text-indent: 2em;               
            }           
            
        </style>
    </head>
    <body>
        <p id="p1">人生若只如初见，何事秋风悲画扇。</p>
        <p id="p2">人生若只如初见，何事秋风悲画扇。</p>
    </body>
</html>

使用em作为统一单位例2.png

在CSS中，em是相对于当前元素的字体大小而言。 在第2个使用 em 作为单位中，font-size为 10px * 1.5 =15px，若width和height同样以em为单位，就要以当前元素的font-size再计算一次，width等于10 * 1.5em（15px）=150px，同理height等于5 * 1.5em（15px）=75px。

Ⅴ.实际开发

在实际开发中，对于em，我们一般要计算2次：

  • 第1次：计算当前元素font-size属性的px值。
  • 第2次：当前元素其它属性（如：width、height等）的px值。
③ 使用em作为字体大小单位

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

（5）rem

font size of the root element，指的是相对于根元素（html元素）的字体大小。 rem 是CSS3新引入的单位，目前除了IE8及以前版本之外，大部分主流浏览器都是支持rem的。 rem 布局是移动端最常用的字体大小之一。

① rem和em区别
  • em是相对“ 当前元素 ”的字体大小。
  • rem是相对“ 根元素 ”的字体大小。
  • 这里的font-size指的都是以px为单位的font-size值。
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <style>
            html{
                font-size: 62.5%;   /*使得浏览器默认字体大小变为 10px */
            }       
            #daddy{     
                font-size: 2rem;
                width: 200px;
                height: 160px;
                border:1px solid #00FFFF;
            }
            #girl{      
                font-size: 2rem;
                width: 150px;
                height: 100px;
                border:1px solid #66A9FE;
            }           
            
        </style>
    </head>
    <body>
        <div id="daddy">
            当时只道是寻常。
            <div id="girl">当时只道是寻常。</div>
        </div>
    </body>
</html>

rem示例1.png

（6）实际开发

在实际开发中，CSS单位用px好还是em好呢？ 在国外，大部分主流网站都是使用em作为单位，而且W3C也建议使用em作为单位。但国内大多数网站，包括三大门户等，都是采用px作为单位。 这是因为在国外，尤其是美国，有一些法律规定网站要具有适应性，对于IE以前的版本无法调整那些使用px作为单位的字体大小，但现在的IE版本几乎都支持。 在这里，推荐使用px作为单位，因为px作为单位非常方便计算长度。

随机文章
WEB前端知识点必读
最近更新