页面排版中让你迷惑的px % em rem长度单位

页面排版中让你迷惑的px % em rem长度单位

本博文也是自己理解的心得体会，分享给对此还迷惑的小伙伴。

---

我们在写页面时，或者查看别人的页面样式代码时，时常会看到如下的四种常见的元素的大小单位：

• px
• %
• em

• rem

  W3C官方文档主要把单位分为相对长度单位和绝对长度单位两种，而我列出的这四种单位是我们日常接触最多，使用最频繁的长度单位。其中px为绝对长度单位，% em rem为相对长度单位。

详细介绍

1. px

px是Pixel的缩写，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中。

2. %

百分比%就是相对于父元素尺寸来进行计算的，比如定义两个div元素,div1包含div2,设置父div1的width为100px,子div2的width为50%,则实际上计算的结果就是：子div2的宽度是100px*50% = 50px。

3. em

em就是相对于本身元素的字体尺寸来进行计算的，比如2em就是所应用元素上字体大小的两倍。

4. rem

rem是CSS3中引入的单位，rem是相对于根元素的字体大小来进行计算的，它可以避免em因为层级嵌套太多，字体设置变的难易维护的问题，目前主流的浏览器除了IE8以外，大部分浏览器都支持rem。

实例

这里我主要展示下% em rem相对长度单位的使用和计算理解，对于px绝对单位就直接略过。

/* em 使用 
  注意：em相对于本身元素字体大小计算，如果本身元素没有定义字体大小，那就逐级向上查找计算，如果最高级也没有定义，则使用默认值计算，一般浏览器的默认字体大小为12px*/
    body {
        font-size: 20px;
    }
    .div1 {
        font-size: 1.5em; /*30px*/ 

        /*由于本身元素div1没有设置字体大小，而上级body中定义了字体大小，所以计算方式就是font-size:20 * 1.5 = 30px */
    }
    .div2 {
        font-size: 0.8em; /*24px*/

        /*由于本身元素div2没有设置字体大小，而父级元素div1中定义了字体大小为1.5em即30px，所以计算方式就是font-size:30px * 0.8 = 24px */
    }
    .div3 {
        font-size: 2em; /*48px*/

        /*由于本身元素div3没有设置字体大小，而父级元素div2中定义了字体大小为0.8em即24px，所以计算方式就是font-size:24px * 2 = 48px */
    }

小结：想必通过简单例子，大家已经完全理解了em的计算原理，也肯定感觉出一个问题，就是如果我们页面设计中嵌套的元素关系太多，使用em就需要一级一级查找计算，这使得页面元素字体大小难以维护和把握，所以也就有了rem的出现，很好解决了em的这个问题。

/* rem 使用 
注意：rem相对于根元素字体大小计算，如果根元素字体大小没有定义，则使用默认值计算，一般浏览器的默认字体大小为12px */

    * {
        font-size: 20px; /* 根元素字体*/
    }
    .div1 {
        font-size: 1rem; /*20px*/ 

        /*由于根元素定义了字体大小20px，所以计算方式就是font-size:20 * 1.5 = 30px */
    }
    .div2 {
        font-size: 1.5rem; /*30px*/

        /*由于根元素定义了字体大小20px，所以计算方式就是font-size:20 * 1.5 = 30px */
    }
    .div3 {
        font-size: 2rem; /*40px*/

        /*由于根元素定义了字体大小20px，所以计算方式就是font-size:20 * 2 = 40px */
    }

/* % 使用介绍
注意：%相对于父元素尺寸大小计算*/
    body {
        width: 500px;
        height: 200px;
        border: 1px solid green;
    }
    .div1 {
        width: 100%; /*500px*/
        border: 1px solid yellow;

        /*由于父元素body定义了绝对高度，宽度，所以计算方式就是width:500px * 1 = 500px */
    }
    .div2 {
        width: 80%; /*400px*/
        border: 1px solid blue;

        /*由于父元素div1定义了宽度100%即500px，所以计算方式就是width:500px * 0.8 = 400px */
    }
    .div3 {
        width: 50%; /*200px*/
        border: 1px solid red;

        /*由于父元素div2定义了宽度80%即400px，所以计算方式就是width:400px * 0.5 = 200px */
    }
    .div1,.div2,.div3 {
        height: 100%; /*200px*/

        /*由于父元素body定义了高度200px，所以计算方式就是height:200px * 1 = 200px */
    }

总结

从理论上来说,四种尺寸都可以用来设置元素的尺寸和字体大小，但是也会给元素的样式上带来混乱，所以借鉴一些大牛的经验用于你实际项目中参考：

1. 尽量设置相对尺寸

2. 只有在预知元素尺寸下，才使用决定尺寸

3. 使用em 或者 rem 设置页面字体大小

---

咳咳，还是那句话

还是要不断学习，因为自己还很年轻