【CSS】CSS的相对单位

em

很多同学会认为em相对于父元素的字体大小,但是实际上,相对于谁取决于应用在什么CSS属性上。对于font-size来说,em是相对于父元素的字体大小;在line-height中,em却是相对于自身的字体大小。

rem

rem 相对于根节点html的字体大小。

vw

vw 相对于视口宽度。

vh

vh与vw同理

vim

vmin 相对于视口的宽度或高度中较小的那个。

%

postion: absolute 中的 %

对于设置绝对定位元素,我们可以使用left, top表示其偏移量,我们把这个元素的祖先元素中第一个存在定位属性的元素当做参照物,其中%是相对于参考物的, left 相对于参照物的width, top相对于参照物的height。

position: relative 中的 %

对于设置相对定位的元素,% 的数值是相对于自身的。

postion: fixed 中的%

对于设置固定定位的元素,%的数值是相对于视口的。

margin 和padding中%

margin和padding中的%非常特殊,它是相对于父元素的宽度的。

border-radius中的 %

我们就经常对一个正方形元素设置border-radius:50%来得到一个圆形,因此不难发现这里的%是相对于自身宽高的。

background-size 中的 %

background-size中的%和border-radius中的一样,也是相对于自身宽高的。

transform 中的%

transform 中的%也是相对于自身宽高的。

text-indent中的 %

text-indent这个属性可以用来设置首行锁进,其中%是相对于元素的width的。

font-size中的%

当前元素的字体大小用%设置时,会相对于父元素的字体大小进行换算。

line-height中的 %

使用line-height设置行高时,如果单位是%,则是相对于该元素的font-size数值的。

calc

calc 是一个响应式布局计算单位

posted @ 2021-08-15 15:42  攀登高山  阅读(199)  评论(0编辑  收藏  举报