css中常见的单位

px

这个就不多说了,中最为常用的一种单位,传统上一个像素对应计算机屏幕上的一个点。

百分比%

子元素相对父容器的占比

设置子元素的为50%,那么子元素的等于父容器的。

em

是一个相对单位

等于其父元素设置的字体大小

例如下边这段代码,子元素的高度为也就是。

如果父元素没有设置字体大小,则继续查找父元素的父元素,直到有设置字体大小的父元素为止。如果都没有设置大小,则使用浏览器默认大小,例如Chrome默认字体大小为。

为什么使用,或者说相较于的好处

用户可以设置字体大小

如果使用为单位,用户在浏览器中设置字体大小,我们的页面字体也会相应的改变,使用则没有任何改变(很多国外的网站是这样做的,国内这样做的很少)

2.修改方便快捷

修改父容器的字体大小子元素的字体大小都会跟着改变,这一点是无法做到的

举一个例子可能更好理解,比如我们写一片文章的样式,有标题,二级标题,大纲,文本,现在要整体将字体放大,我们只需要修改或者的就可以了,如果使用作单位就需要每一处分别修改了。

rem

是对的改进,这里我们先讲一下的一个很烦人的缺陷,就是具有继承性,子元素的1个等于父容器的,这样一来,遇到嵌套很深的结构,我们就不容易立刻知道每个子元素的等于多个了,比如下面这个例子:

的为,我们没有给它以上的父容器设置,所以它的为,但是我们想知道的就比较复杂了。

如何解决这问题呢?这里css3引入了 的概念,与非常相似,最重要的不同是,不论在那一级元素上1个都等于跟元素的,这样不仅具有的优点,还不会造成混乱,不论结构嵌套多复杂我们都能轻松换算出当前元素的对应多少个px。

这里有一点建议,给根元素添加如下的样式:

这样一来根元素的就变成,也就是 。这样方便我们计算(与设计稿对照)

vw和vh

这里解释一下视口

这里视口的宽度和高度不是指屏幕的高宽,更不是浏览器的高宽,而是浏览器内部的可视区域大小,即

目前使用的场景并不多,因为使用百分比也可以实现相同的效果,我个人在制作幻灯片效果时,会选择使用,比较方便。

先写这些有时间再更

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180402G0KPEB00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券