CSS 计量长度单位

css中常用字体长度单位有 px em rem vh vw 百分数,都表示尺寸。可以用于表示字体大小,也可以用于宽高等属性。
以下介绍的css计量单位无论是字体还是div宽高都一视同仁。

  1. px
    css中使用的唯一绝对单位(absolute units),像素pixel, 因为无论其他相关的设置怎么变化,像素指定的值是不会变化的。css中基本上使用px就能解决全部长度相关问题。
  2. em
    1. 相对长度单位,相对于当前元素(自身)的字体大小相同,一个大写字母 M 的宽度为为
    em,浏览器给网页设置的默认基础字体大小是16像素,这意味着对一个元素来说1em的计算
    值默认为16像素。但是[font-size] em单位会继承父元素的[font-size]字体大小。em是Web开
    发中最常用的相对单位。
    2. 如果父级元素的大小以百分比表示的,则先根据父父级元素的值把父元素的值得大小换算成具体数值的px,再乘以自身的em值,就会得到自身的绝对值了。
  3. rem
    全称为 root em,相对于根元素的长度单位,rem 和 em以同样的方式工作,html文档相对的根元素的font-size大小默认为16px。比如子元素font-size:2rem;那么其大小为32px;
  4. vh vw
    视窗单位,分别是视口(viewport)高度的1/100和适口宽度的1/100;所以设置页面大小与视窗大小一样时width:100vw;heigth:100vh; 这个相对单位其他情况下不常使用。
  5. 无单位的值
    1. 0 —— 在CSS中,你有时会遇到一些无单位的数值——这并不总是意味着错误,比如你想去除边距或边框,可以使用无单位值 0 ,不管单位是什么 ,0 永远是 0 。
    2. 百分比 —— 主要用于盒子宽高,不用于字体大小,当那些盒子的宽高总是被调整到其父容器的宽高的一定百分比的时候用到。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。