当前位置: 首页 > Web前端 > CSS

CSS中常用的长度单位

时间:2023-03-30 13:47:17 CSS

px-像素px是CSS中最常用的长度单位,可以用来指定字体大小、元素宽度、高度、边框、内边距、外边距大小等。它是A虚拟长度单位,即计算机系统的数字图像长度单位。如果要将px转换为物理长度,则必须指定精度DPIpx。单位的值必须是整数值。在CSS中直接映射到px;转换方式为1in=96pxcm-表示厘米,生活中常用的单位,也映射为px;换算方式为1cm=37.8pxmm-代表毫米,类似于cm,换算方式为1mm=0.1cm=3.78pxem并且remem单位等于基础或父元素的字体大小。例如,如果父元素的字体大小为16px,则所有直接子元素中的1em值将计算为16px。基于基本单元的知识,可以很方便的增加或减小子元素的字号。这里的值不需要是整数。使用em可以很容易地将各种元素的字体大小保持在固定比例。例如,如果父元素的字体大小值为50px,则将子元素的字体大小设置为2em相当于将其设置为100px。同样,将其设置为0.5em将使子元素的字体大小为25px。还有一点要注意:如果要通过em设置当前元素的size值,而且不是相对于直接父元素,而是相对于父元素或者父元素的根元素,会变得很复杂,因为每层都有例如:

.parent{font-size:20px;}.child1{font-size:1.5em;}.child2{font-size:1.2em;}然后需要计算:child1的字体大小为20x1.5=30px,child2的字体大小相等to20x1.5x1.2=36pxrem也是一个相对单位,和em的区别在于rem的长度总是相对于根元素,而不是像em一样使用级联的方式来计算大小。这种单位使用起来要简单得多。同样是上面的例子,但是使用的单位是rem
。parent{font-size:20px;}.child1{font-size:1.5rem;}.child2{font-size:1.2rem;}然后需要计算:child1的字体大小为16x1.5=24px,child2的字体大小等于16x1.2=19.2px;为什么这里用16乘而不是20?这是因为rem的长度总是相对于根元素,即html,而html文档中默认的字体大小是16px,所以这里使用16来计算可见区域的相对长度。可见区域的相对长度是基于视图窗口或视口(Viewableareaorframeonthescreen)的宽度和高度。可视区域高度单位(vh)和可视区域宽度单位(vw)vh单位与可视区域的高度有关。vh的值等于视口高度的1/100。如果我们想根据浏览器窗口的高度调整元素的大小,这个单位很有用。例如,如果视口的高度为400px,则1vh等于4px。如果视口高度为800px,则1vh等于8px。同样,vw单位是相对于视口宽度的。因此可以推断出1vw的值。1vw等于可见区域宽度的1/100。例如,如果窗口的宽度为1200px,则1vw将为12px。vmin和vmaxvmin是当前vm和vh中较小的值,即可见区域较小边的1/100的长度;例如:可见区域的大小为1000x800,则wmin=800/100=8px;如果可视区域的大小是600x800,那么wmin=600/100=6px;同理,wmax为当前vm和vh的较大值,即可视区域较大边的1/100的长度;例如:可见区域的大小为1000x800,则wmin=1000/100=10px;如果可见区域的大小是600x800,那么wmin=800/100=8px;以百分比表示的长度是以百分比表示的长度值是基于具有相同属性的父元素的长度值。因此,它会随着父元素对应的长度值的变化而变化。例如:设置父元素的宽度为100px,设置直接子元素的宽度为50%,则子元素的宽度为50px;