萌发这篇文章名字的想法，是源自于在页面布局的过程中经常会使用到的一些css属性，看似熟悉，却又陌生。

css这东西真是，入门太简单，精通太难。指定尺寸时候的px、em、%、数字123，已经足够让人混乱了。，特别是%这个东西，相信很多做前端很久的人都不定清楚地知道css当中每个可以设置尺寸的属性当中，是相对于什么的百分比。这里做一下简单的归类解释。

我始终相信，基础知识真的很重要，看似牛逼复杂的布局，都是基础知识组合的结果。如果css和js基础不扎实，工具用的再溜也可能写的很蛋疼的代码。

说了一堆乱七八糟的，下面进入正题。

css当中常用属性的百分比：

---

上面这些都是我会经常用到的css属性的百分比。下面分别详细解释三个。以下例子皆是这种情况：父元素div1，嵌套一个子元素div2。

1. margin和padding

我想你已经发现一件很蛋疼的事情了，那就是margin和padding这两个鬼，不管你是写margin-top还是margin-left还是margin-right还是margin-bottom，都是基于父元素的width属性来设置的。比如当父元素div1的width等于20px，在给子元素div2的margin设置5%的时候，不管是上下左后，都会计算得到4px……这真是个蛋疼的东西，相信学习css的人都会遇到过信心满满地写margin-top:50%想实现垂直居中的效果，没想到顶距却是宽度的50%。。。

2. height

可以给子元素div2的height设置50%，会基于父元素div1的height来计算。但是注意了，必须是父元素div1显示地在css里面写上height等于多少多少，如果没写，那么父元素div1的高度就是自动撑开的，那么子元素div2里面height的50%将不会有任何效果。

然而width就不用，任何时候给div2的width设置50%，都会生效。

3. transform

上面的最后一个是transform，是css3的新属性。在这个属性出来之前，想要实现垂直居中是一件比较麻烦的事情，需要在父元素和子元素都写不少代码（有机会单独写一篇文章介绍垂直居中）。当然我说的难不是一个固定width和height的div里面放一个知道width和height的图片，这有太多方法实现垂直居中了。难就难在两个div，父div1和子div2宽度高度都不定的时候。

当我从别人的代码里发现css3新属性transform设置left和top是基于自身的width和height的时候，简直天哪！救星啊！这完全是来拯救我们前端工作人员垂直对齐的布局的。。。

那么问题来了，transform怎么简单地实现垂直居中呢？可以和position等于absolute的top相结合一下。例子还是父div1嵌套子div2，两个div宽度高度都不定，需求是把div2垂直居中显示在div1中。用transform可以简单地实现：

div1{position:relative;}
div2{position:absolute;top:50%;translate:transform(0, -50%);}

颤抖吧！就是这么强大！

当然和可以和其他苏醒结合，原理就是先向下偏移父元素的50%，在向上偏移自身的50%。

---

暂时就这样吧。。。敲完这篇文章再次发现，Always真的很不适合写技术文章。