美文网首页
CSS 计量长度单位

CSS 计量长度单位

作者: Qingelin | 来源:发表于2019-08-25 12:21 被阅读0次

    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. 百分比 —— 主要用于盒子宽高,不用于字体大小,当那些盒子的宽高总是被调整到其父容器的宽高的一定百分比的时候用到。

    相关文章

      网友评论

          本文标题:CSS 计量长度单位

          本文链接:https://www.haomeiwen.com/subject/tnchectx.html