当前位置:首页 > 开发 > Web前端 > Css > 正文

你可能没注意的CSS单位

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
css
摘要: 原文: 你可能没注意的CSS单位 扶今追昔 CSS中的单位我们经常用到px、pt、em、百分比,px和pt不用多说 em em是相对单位,参考物是父元素的font-size,具有继承的特点 如果字体大小是16px(浏览器的默认值),那么 1em = 16px 这样使用换算很复杂,尤其是和px对应,大家总结出了经验 body { font-size: 62.5%; } 这样之后 1
原文: 你可能没注意的CSS单位

扶今追昔

CSS中的单位我们经常用到pxptem百分比,px和pt不用多说

em

em是相对单位,参考物是父元素的font-size,具有继承的特点

如果字体大小是16px(浏览器的默认值),那么 1em = 16px

这样使用换算很复杂,尤其是和px对应,大家总结出了经验

body {
font-size: 62.5%;
}

这样之后 1em = 10px 在布局等使用的时候好换算了很多

百分比

百分比也是很常见的用法,看似简单其实有些初学者可能注意不到的知识

相对于谁

首先要明确百分比是相对于谁,宽泛的讲是父元素,但是并不是十分准确

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

viewport:可视窗口,也就是浏览器的window那么大

意外

  1. padding、margin 如果设置了百分比,会发现左右和预期一样,用的父元素宽度的百分比,但是用的也是 ** 宽度 ** 百分比,而不是想象中的高度的百分比
  2. 后代元素继承的是百分比 计算后的值 ,而不是原百分比,这个对于line-height的时候经常会遇到坑,还有这样的面试题问你line-height设置为120%1.2的区别

CSS3开启新时代

rem

em是个很不错的单位,但是有个问题就是可能会带来混乱,因为em依赖于父元素的字体大小,各个元素父元素的字体尺寸不一定一样,会带来布局上很大的不确定性

rem font size of the root element

rem相对于根元素html(网页),这样使用起来就安全了很多

html {font-size: 62.5%; /10 ÷ 16 × 100% = 62.5%/}
body {font-size: 1.4rem; /1.4 × 10px = 14px /}
h1 { font-size: 2.4rem; /2.4 × 10px = 24px/}

IE9+ 和现代浏览器都已经支持了

vw和vh

  • vw Viewport宽度, ** 1vw ** 等于viewport宽度的1%
  • vh Viewport高度, ** 1vh ** 等于viewport高的的1%

vw和vh会随着viewport变化自动变化,再也不用js控制全屏神马的了

甚至有些人丧心病狂的字体大小都用vw和vh控制,来达到字体和viewport大小同步的效果

IE10+ 和现代浏览器都支持这两个单位

vmin和vmax

这两个单位是针对vw和vh

  • vmin vw和vh中比较 ** 小 ** 的值
  • vmax vw和vh中比较 ** 大 ** 的值

这两个属性也会随着viewport变化

IE10+ 和现代浏览器都已经支持vmin

webkit浏览器之前不支持vmax,现在已经支持,所有现代浏览器已经支持,但是IE ** 全部 ** 不支持vmax

ch和ex

这两个单位时根据 ** 当前font-family ** 的相对单位

  • ch 字符0的宽度
  • ex 小写字符x的高度

image

font-family改变的时候这两个单位的值也会变化,不同字体表现的样式不一样

IE9+ 和现代浏览器都已经支持

浏览器兼容性

写的时候介绍了一些,大神写了测试页面可以帮我们直观的看到

http://s.codepen.io/chriscoyier/fullgrid/CiwFD?type=embed&safe=true

参考

7 CSS Units You Might Not Know About

CSS的长度单位

你可能不知道的7个CSS单位

你可能没注意的CSS单位

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
等价颜色表 什么叫Web安全色 所谓的“web安全”颜色是指在256色计算机系统上总能避免抖动的颜色。 W
转载:http://www.html5cn.org/article-5357-1.html 问题:虽然已经开发前端n些日子了,可是对一些
1:px: 这个应该是国内使用较多的单位,意思为像素。因此,其视觉的呈现效果是与分辨率相关的。例
概述:W3C正不断致力于为设计师、开发人员和用户开发新的CSS特性,最新的CSS3为web设计增添了许多令
概述:W3C正不断致力于为设计师、开发人员和用户开发新的CSS特性,最新的CSS3为web设计增添了许多令
CSS3为web设计增添了许多令人惊叹的特性,这其中你经常会用到box-shadow(图层阴影),border-radiu
来谈谈SQL数据库中"简单的"SELECT TOP—可能有你从未注意到的细节 首先从博客园的Jerome Wong网友说
首先从博客园的Jerome Wong网友说起 他提出了一个这样的问题 本人写了好几年SQL语句了,从来没注意
先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;而pt就是point,是印刷行
下面的这篇文章,看着看着我感觉眼有些湿。。过年了,老大难,找黄牛继续中。。。。。 上周六我在广
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号