CSS响应式布局学习笔记四

时间:2020-10-15 作者:WilliamChan

理解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响应式布局学习笔记三》

声明:若您对本文内容有任何意见,欢迎发送邮件至:admin@zhidaobu.com,本站会尽快回应并做出相应处理。