尺寸单位

本节内容,将讲述如何使用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表示每英寸的点数。

附:参考资料

(完)

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