你的位置:首页 > 软件开发 > 网页设计 > CSS3单位

CSS3单位

发布时间:2016-07-28 18:00:03
em做前端的应该对em不陌生,不是什么罕见的单位,是相对单位,参考物是父元素的font-size,具有继承的特点。如果字体大小是16px(浏览器的默认值),那么 1em = 16px。不过,这样使用很复杂,很难很好的与px进行对应,因此,前端开发的前辈们总结了一个经验body { ...

前端的应该对em不陌生,不是什么罕见的单位,是相对单位,参考物是父元素的font-size,具有继承的特点。如果字体大小是16px(浏览器的默认值),那么 1em = 16px。不过,这样使用很复杂,很难很好的与px进行对应,因此,前端开发的前辈们总结了一个经验

body {font-size: 62.5%;}
百分比相信大家更不会陌生了,百分比一般宽泛的讲是相对于父元素,但是并不是十分准确。

  1、对于普通定位元素就是我们理解的父元素  2、对于position: absolute;的元素是相对于已定位的父元素(offset parent)  3、对于position: fixed;的元素是相对于 ViewPort
例外情况

  1、使用了padding、margin 等,实际百分比和你想要的百分比是有区别的。(关于这个,解决方法之一,就是我们可以使用css3的calc()属性,具体,您请继续往下看,在文章最后我会解释。)  2、line-height百分比的一些情况,通常结果是百分比 计算后的值。(关于这个,您请继续往下看。。。)
rem

rem支持IE9及以上,意思是相对于根元素html(网页),不会像em那样,依赖于父元素的字体大小,而造成混乱。使用起来安全了很多。html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5%  1rem = 10px  **/}  body {font-size: 1.4rem; /**1.4 × 10px = 14px **/}h1 { font-size: 2.4rem; /**2.4 × 10px = 24px**/}这样整个网页都会比较统一!不会造成混乱!
IE10+ 和现代浏览器都支持这两个单位。

  vw Viewport宽度, 1vw 等于viewport宽度的1%  vh Viewport高度, 1vh 等于viewport高的的1%
甚至有些人丧心病狂的字体大小都用vw和vh控制,来达到字体和viewport大小同步的效果。

IE10+ 和现代浏览器都已经支持vminwebkit浏览器之前不支持vmax,新版已经支持,所有现代浏览器已经支持,但是IE 全部 不支持vmax

  vmin vw和vh中比较 小 的值  vmax vw和vh中比较 大的值
IE9+ 和现代浏览器都已经支持,这两个单位时根据 当前font-family 的相对单位。

  ch 字符0的宽度  ex 小写字符x的高度
当font-family改变的时候这两个单位的值也会变化,不同字体表现的样式不一样。


原标题:CSS3单位

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。