提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

<length>数据类型

gt 数据类型 lt length
2023-09-11 14:15:02 时间

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

<length>是表示距离尺寸的一种css数据格式。它由一个<number> 后紧随一个长度单位（px，em，pt，in，mm，...）组成。和任何 CSS 尺寸一样，数字和单位之间没有空格。<number>之后的长度单位是可选的。

许多CSS属性使用<length>值，比如width、margin、padding、font-size、border-width、text-shadow等等。

对于某些属性，长度使用负值会有语法错误，但是有一些属性是允许负长度的。请注意虽然<percentage>也是CSS尺寸并且可以被一些 CSS属性接受为<length>值，但它们本身不是<length>值。

相对长度单位

相对字体大小单位

  • em
    相对长度单位，这个单位表示元素的font-size的计算值。如果用在font-size属性本身，它会继承父元素的font-size。
  • rem
    这个单位代表根元素的font-size大小（例如<html> 元素的font-size）。当用在根元素的font-size上面时 ，它代表了它的初始值(译者注:默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面中1rem的大小相当于html的根字体默认大小的2倍,当然此时页面中字体的大小也是html的根字体默认大小的2倍)。
  • lh
    等于元素行高line-height的计算值
  • rlh
    等于根元素行高line-height的计算值。当用于设置根元素的行高line-height或是字体大小font-size时，该rlh指的是根元素行高line-height或字体大小font-size的初始值
  • ex
    这个单位表示元素font的 x-height 。在含有“X”字母的字体中，它是该字体的小写字母的高度；对于很多字体， 1ex ≈ 0.5em。
  • ch
    这一单位代表元素所用字体 font中“0”这一字形的宽度（“0”，Unicode字符U+0030），或更准确地说是“0”这一字形的预测尺寸（advance measure）。

视口比例的长度

视口比例长度定义了相对于视口的长度大小，视口即文档可视的部分。 当视口的大小被修改（通过更改桌面计算机窗口大小或旋转手机或平板设备的方向）时，只有基于Gecko的浏览器才动态更新视口值。

如果html和body设置了overflow:auto，滚动条占据的空间不会从视口中减去（译者注：大概就是说会算在视口里，视口大小是包括滚动条的），但当设置为overflow:scroll时，滚动条占据的空间反而会从视口中减去（译者注：大概就是此时视口大小不包括滚动条）。

  • vw
    视口宽度的 1/100。
  • vh
    视口高度的 1/100。
  • vmin
    视口高度和宽度之间的最小值的 1/100。
  • vmax
    视口高度和宽度之间的最大值的 1/100。
  • vi
    在根元素的水平轴上，等价于1%初始包含块的大小。
  • vb
    在根元素的垂直轴上，等价于1%初始包含块的大小。

绝对长度单位

  • px
    与显示设备相关。
    对于屏幕显示，通常是一个设备像素（点）的显示。
    对于打印机和高分辨率的屏幕，一个CSS像素意味着多个设备像素，因此，每英寸的像素的数量保持在96左右。
  • mm
    毫米
  • cm
    厘米
  • in
    英寸（2.54厘米）
  • pt
    磅（1/72英寸）
  • pc
    12点活字（1pc等于12点）

 

相关文章