理解css单位px,em,rem的区别
- Px是css中最基本的长度单位,在PC端,设计稿多少像素,页面css就写多少像素。
- em 是相对单位,相对于上下文元素而言,一般情况下,浏览器默认的字体大小是16px,也就是1em等于16px;比如:
- 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响应式布局学习笔记三》。