五个常用的CSS单位

最新推荐文章于 2023-07-26 17:22:10 发布

xiaoyaopikaqiu

最新推荐文章于 2023-07-26 17:22:10 发布

阅读量305

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/xiaoyaopikaqiu/article/details/102749710

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

px
相对单位，一个px是一个点的意思，如果使用1920*1080这种16：9的解析度，代表屏幕横向由1920个光点组成，纵向由1080个光点组成。在设定段落的样式时，除了字体大小外，还经常设置行距，如果使用px这个绝对单位设定字体大小和行距，在更改字体大小时还要更改行距大小，否则会有行距过大或过小的情况。
em
相对单位，基于当前容器的大小，再乘以em的值得到最终的大小，可以理解为倍数。使用em设置段落中的字体大小和行距，在改变容器字体大小时，段落的字体大小和行距可以按比例缩放。
例1：

<body>
<p>first paragraph</p>  <!--20px-->
<div class="size-10"><p>second paragraph</p></div> <!--20px-->
<div class="size-20"><p>third paragraph</p></div> <!--40px-->
</body>

body {
    font-size: 10px;
}

p {
    font-size: 2em;
}

.size-10 {
    font-size: 10px;
}

.size-20 {
    font-size: 20px;
}

例2：

<body>
<div>
  one<!--20px-->
  <div>
    second <!--40px-->
    <div>
      third<!--80px-->
    </div>
  </div>
</div>
</body>

body {
    font-size: 10px;
}

div {
    font-size: 2em;
}

例3：

body {
    font-size: 10px;
}

p {
    font-size: 1em;
    line-height: 1.2em;/*行距始终是字体大小的1.2倍*/
}

rem
root em，基于root元素，即根据html元素的大小来计算，不受容器本身字体大小的影响，全部根据html的字体大小重新计算。rem比em计算更方便，可以避免html元素在多层嵌套后难以预测实际大小。

<body>
<div>
  one<!--20px-->
  <div>
    second <!--20px-->
    <div>
      third<!--20px-->
    </div>
  </div>
</div>
</body>

html {
    font-size: 10px;
}

div {
    font-size: 2rem;
}

vw & vh
viewport width & viewport height，viewport代表看到的画面大小。这两种长度的值只能是1-100，50vw代表画面宽的的一半，50vh代表画面高度的一半，100vw画面会出现横向的卷轴，100vh比较常用，容器占满画面后，非常容易做水平和垂直居中。
vmin&vmax
vmin代表屏幕较短的一边，vmax代表屏幕较长的一边。
主要用于手机屏幕的旋转，vmin 和vmax 配合媒体查询(Media Query) 在响应式布局(Responsive)时很有用。如果将图片的宽度设置为100vmin，就会以屏幕较短的一边的总边长作为宽度，无论怎样旋转图片都不会超屏幕。但是将图片的宽度设置为100vmax，就会以屏幕较长一边的总边长作为图片的宽度，当手机横向时会出现垂直卷轴，纵向时就会有水平卷轴。

xiaoyaopikaqiu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
五个常用的CSS单位

px绝对单位，一个px是一个点的意思，如果使用1920*1080这种16：9的解析度，代表屏幕横向由1920个光点组成，纵向由1080个光点组成。在设定段落的样式时，除了字体大小外，还经常设置行距，如果使用px这个绝对单位设定字体大小和行距，在更改字体大小时还要更改行距大小，否则会有行距过大或过小的情况。em相对单位，基于当前容器的大小，再乘以em的值得到最终的大小，可以理解为倍数。使用em...
复制链接

扫一扫