CSS响应式布局学习笔记四

理解css单位px，em，rem的区别

1. Px是css中最基本的长度单位，在PC端，设计稿多少像素，页面css就写多少像素。
2. em 是相对单位，相对于上下文元素而言，一般情况下，浏览器默认的字体大小是16px，也就是1em等于16px；比如：
3. rem也是相对单位。rem是相对于html根元素来计算的，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同 em，默认1rem=16px; 同理你可以 设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。

比如设置html根元素 如下代码：

html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}

当一个p元素是24px的话，那么转换成rem为单位的话，那么只需要如下这样写即可：

p {font-size: 2.4rem; /*2.4 × 10px = 24px */ }

元素未知宽度居中

我们先来介绍一下未知宽度，元素居中的方法，对于响应性web设计是有帮助的，我们可以来了解下。
第一种方法：
假如页面html结构如下：

<div>
<p>What is CSS?</p>
</div>

只需要给父级元素div 设置 文本对齐是 居中对齐。子元素设定display:inline-block即可。如下代码：

div{text-align:center}
p{display:inline-block}

第二种方法如下：

div{position:relative; left:50%; float:left;}
p{position:relative; left:-50%;}

---

以上就是知道不介绍的《CSS响应式布局学习笔记四》，希望对你有所帮助。

接下来您可以移步看一下一篇《CSS响应式布局学习笔记五》。
或上一篇《CSS响应式布局学习笔记三》。