css中的单位

最新推荐文章于 2024-10-31 14:03:24 发布

学习前端的渣渣

最新推荐文章于 2024-10-31 14:03:24 发布

阅读量164

点赞数

分类专栏：前端面试题 html+css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/fangqi20170515/article/details/126844405

版权

前端面试题同时被 2 个专栏收录

103 篇文章 2 订阅

订阅专栏

html+css

12 篇文章 0 订阅

订阅专栏

css中的单位

1、%
2、px
3、vw、vh
4、rem
5、em

1、%

是一个相对单位，相对于父元素；

<div style="width: 50%;height: 100px;background-color: blueviolet">50%</div>

在这里插入图片描述

2、px

绝对单位，不会随父元素大小改变而改变，大小固定；

<div style="width: 500px;height: 100px;background-color: darkcyan">500px</div>

在这里插入图片描述

3、vw、vh

viewport width、viewport height的缩写，视口的宽度、高度，相对单位，1vw=1%

<div style="width: 50vw;height: 50vh;background-color: salmon">50vw,50vh</div>

在这里插入图片描述
与百分比%的区别

<div style="width: 200px;height:300px;border: 1px solid black">
    200px的高度，300px宽度
    <div style="width: 50%;height: 50%;background-color: blueviolet">50%的宽高=宽100px，高150px，相对于父元素的宽高</div>
    <div style="width: 50vw;height: 50vh;background-color: salmon">50vw,50vh=相当于浏览器窗口宽高的50%，</div>
</div>

在这里插入图片描述

4、rem

相对于根元素的单位，即html中body中的font-size

5、em

相对于父元素

<body style="font-size: 30px">
<div style="font-size: 1rem">1rem</div>
<div style="font-size: 1em">1em</div>
<div style="width: 50%;height: 100px;border: 1px solid red;font-size: 50px">
    <div style="font-size: 1rem">1rem：相对于根元素</div>
    <div style="font-size: 1em">1em:相对于父元素</div>
</div>
</body>