分类:CSS
日期:2021年8月2日

尺寸单位

本节内容,将讲述如何使用css调整元素的大小,提高页面的美观性。

一. 数字(Numbers)

数字可以用来定义opacityline-height,还可以用于定义rgb颜色中的大小。这里指的数字是无单位的。例如(1, 2, 3, 100)和小数(.1, .2, .3)。

数字所处的上下文不同,它的意义也不一样。例如当定义line-height时,一个无单位的数字表示的是一个比例值:

p {
    font-size: 24px;
    line-height: 1.5;
}

这个例子中,line-height为1.5,但是最终行高结果为24px的1.5倍大小,即36px。

line-height提供一个无单位的数字值(即字体大小的倍数)是一个不错的选择。正如之前在继承中说过,font-size是可继承属性。定义无单位的line-height,保证行高永远是相对于font-size的。如果你定义line-height: 15px, 在某些字体大小的情况下,最终页面可能会看起来比较奇怪。

数字还可以使用在以下几种情形:

  • filte: filter: speia(0.5), 给元素添加一个50%的褐色滤镜。
  • opacity: opacity: 0.5, 50%不透明度。
  • color: rgb(50, 50, 50), 分别设置r、g、b的颜色值,允许范围为0-255。
  • transform: transform: scale(1.2), 将元素放大1.2倍。

二. 百分比(Percentages)

当使用百分比设置css属性值时,你需要知道百分比是如何用于计算的。例如width的百分比是相对于父元素的宽度进行计算的。

div {
    width: 300px;
    height: 100px;
}
div p {
    width: 50%; // 最终结果为150px
}

上面的例子中div p的宽度为150px。

如果设置marginpadding百分比值,不论marginpadding的方向如何,它们的百分比都是相对于父元素的width的。

div {
    width: 300px;
    height: 100px;
}

div p {
    margin-top: 50%; /* calculated: 150px */
    padding-left: 50%; /* calculated: 150px */
}

三. 尺寸和长度单位

如果在数字后面添加一个单位,那么它就变成了尺寸,例如1rem

绝对长度

所有绝对长度都基于相同的基础进行解析,使它们在CSS中使用的任何地方都是可预测的。例如使用cm单位设置一个元素的width,那么这个元素将呈现4cm的宽度,这个值是一个精确值,可以用尺子去测量的。

div {
    width: 10cm;
    height: 5cm;
    background: black;
}

绝对长度非常适合设计用于打印的页面。

绝对长度尺寸表:

单位 名称 公式
cm Centimeters 1cm = 96px/2.54
mm Millimeters 1mm = 1/10th of 1cm
Q Quarter-millimeters 1Q = 1/40th of 1cm
in Inches 1in = 2.54cm = 96px
pc Picas 1pc = 1/6th of 1in
pt Points 1pt = 1/72th of 1in
px Pixels 1px = 1/96th of 1in

相对长度

相对长度是基于基础值进行计算的,与百分比有点类似。和百分比之间的区别在于,您可以根据上下文来确定元素的大小。如果尺寸单位为ch,表示使用文字大小作为计算的基础值,单位vw表示使用viewport的宽度作为计算的基础值。相对值在响应式布局中很有用。

字体大小相对单位

css提供了一些相对于元素字体大小的相对单位。

单位 相对于
em 在 font-size 中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小,如 width
ex 字符“x”的高度
ch 数字“0”的宽度
rem 根元素的字体大小
lh 元素的line-height
cap 当前元素字体的首字母大小
ic "水"字形
rlh 根节点行高

css尺寸单位

视口相对单位

你可以使用视口的大小作为相对值计算的基。

单位 相对于
vw 视口宽度的1%
vh 视口高度的1%
vi 等于初始包含块大小的 1%,在根元素的行内轴方向上。
vb 等于初始包含块大小的 1%,在根元素的区块轴方向上。
vmin 视口高度 vw 和宽度 vh 两者之间的最小值。
vmax 视口高度 vw 和宽度 vh 两者之间的最大值。

四. 其他单位

还有一些其他的单位已经被指定来处理特定类型的值。

角度单位

div {
    width: 150px;
    height: 150px;
    transform: rotate(60deg); // deg单位,旋转60度
}

分辨率单位

dpi表示每英寸的点数。

附:参考资料

(完)

留言(0
发表评论
邮箱地址不会被公开。*表示必填项。
评论(支持部分html标签)*
姓名*
站点