美文网首页
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 计量长度单位

    css中常用字体长度单位有 px em rem vh vw 百分数,都表示尺寸。可以用于...

  • 几个CSS的单位你需要了解一下

    css长度单位 css 长度单位一般我们分为绝对长度单位和相对长度单位 绝对长度单位 绝对长度单位是一个固定的值,...

  • CSS之长度单位

    CSS之长度单位 很多CSS属性要靠长度度量衡才能正确显示元素。因此,CSS中有许多长度单位。CSS中的长度单位分...

  • css 单位和值

    css 单位和值 一、绝对长度单位 常用的绝对长度单位: px pixel 是 CSS 中最常用的长度单位,可以用...

  • css长度单位

    CSS有两种类型的单位长度:相对和绝对。相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备,相对长度...

  • CSS - 长度单位

    研究背景 一般用于描述 font-size、padding 或者 border 的长度都使用 px 单位。但最近看...

  • css长度单位

    字体相关相对长度单位 em、ex、ch、rem是字体相关的相对长度单位 em em表示元素的font-size属性...

  • CSS长度单位

    像素 px em 百分比 注意但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 ...

  • CSS长度单位

    前言 说到css的单位,大家应该首先想到的是像素单位px,我们在网页布局中一般都是用px,但是近年来自适应网页布局...

  • Css单位

    CSS 单位——来自菜鸟教程 CSS 有几个不同的单位用于表示长度。 一些设置 CSS 长度的属性有 width,...

网友评论

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

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