CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )

px

像素 pixel 的缩写,即电子屏幕上的1个点,以分辨率为 1024 * 768 的屏幕为例,即水平方向上有 1024 个点,垂直方向上有 768 个点,则 width:1024px 即表示元素的宽度撑满整个屏幕。

随屏幕分辨率不同,1px 的大小也不同,所以严格来说,px 也是相对单位,但不考虑屏幕分辨率时,也可以把 px 当作绝对单位来看待。

% 百分比

通常百分比都是相对于父元素的 content box 计算,所以父元素必须有显式的值,若父元素 height 为 auto ,则百分比值将完全失效!

以下样式的百分比计算规则比较特殊,需特别留意:

  • widthheightfont-size 的百分比相对于父元素"相同属性"的值计算

  • line-height 的百分比相对于父元素的 font-size 计算

  • vertical-align 的百分比相对当前元素的 line-height 计算

  • position:absolute 绝对定位元素相对于第一个position不为 static 的祖先元素的 padding box 计算

  • position:fixed 悬浮定位元素的宽度相对于 html 计算(尺寸等同于浏览器可视窗口的大小)

【实战】撑满整个屏幕

html 复制代码
<div class="fullScreen" style="background-color: greenyellow"></div>
css 复制代码
html,
body {
  height: 100%;
  /* 清除浏览器的默认样式 */
  margin: 0px;
  padding: 0px;
}
.fullScreen {
  height: 100%;
}

解析:

  • 范例中 div 的高度 100% 会相对于父元素(body)的高度进行计算,所以 body 必须设置 height: 100% ,而 body 的父元素是 html 标签,所以 html 也必须设置 height: 100%
  • 宽度无需设置,因为 html , body , div 的都是 display:block 块级元素,宽度都是自动撑满整个屏幕。
  • 浏览器默认会给 html , body 添加 margin 和 padding (不同浏览器的默认样式不一样),此处需手动进行清除。

【实战】响应式布局

https://blog.csdn.net/weixin_41192489/article/details/136423056

em

相对于"当前元素"的字体大小来计算最终长度,以"当前元素" 的字体大小为 16px 为例,1em = 16px,2em 即 2*16 = 32px

最佳实践:用于维护某模块内元素间固定的比例关系,详见
https://blog.csdn.net/weixin_41192489/article/details/126118830

【实战】首行缩进两空格

html 复制代码
<template>
  <div style="background-color: greenyellow">
    <p>很久很久以前</p>
  </div>
</template>

<style lang="scss" scoped>
p {
  text-indent: 2em;
}
</style>

【实战】限定中文内容宽度

css 复制代码
article {
    max-width: 42em;
}

rem

相对于根元素的字体大小计算长度,以根元素( html 标签)的 font-size 为 16px 为例,2rem 即 2*16 = 32px。

【实战】响应式布局

https://blog.csdn.net/weixin_41192489/article/details/136423056

vw

相对于视口(浏览器的可视区域)宽度计算长度,1vw = 视口宽度的1%

  • 100 vw 即水平方向撑满屏幕

【实战】响应式布局

https://blog.csdn.net/weixin_41192489/article/details/136423056

vh

相对于视口(浏览器的可视区域)高度计算长度,1vh = 视口高度的1%

  • 100 vh 即垂直方向撑满屏幕

【实战】响应式布局

https://blog.csdn.net/weixin_41192489/article/details/136423056

vmin

相对于 vw 和 vh 中较小的计算长度,如手机竖屏时,1vmin = 1vw ; 手机横屏时,1vmin = 1vh ;

vmax

相对于 vw 和 vh 中较大的计算长度,如手机竖屏时,1vmax = 1vh ; 手机横屏时,1vmax = 1vw ;

ex

相对于字符 x 的高度计算长度

【实战】文字和图标垂直居中对齐

https://blog.csdn.net/weixin_41192489/article/details/115218875

ch

相对于字符 0 的宽度计算长度

【实战】手机号的输入框

将手机号输入框的宽度设为11ch,同时让字体等宽,一眼就能看出是否输入了11位的手机号码。

html 复制代码
<template>
  <label for="phone">手机号:</label>
  <input id="phone" class="phone_input" type="text" />
</template>

<style lang="scss" scoped>
.phone_input {
  width: 11ch;
  /*等宽字体*/
  font-family: 'Courier New', Courier, monospace;
}
</style>

【实战】限定英文内容宽度

需配合等宽字体才精准。

css 复制代码
article {
    max-width: 68ch;
}
/* 等宽字体 */
.font-mono {
    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
相关推荐
黎金安1 小时前
前端第二次作业
前端·css·css3
阳光开朗大男孩 = ̄ω ̄=2 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
小马哥编程4 小时前
【前端基础】CSS基础
前端·css
Justinc.4 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge5 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
As977_5 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189115 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
我要洋人死8 小时前
导航栏及下拉菜单的实现
前端·css·css3
小白白一枚11119 小时前
css实现div被图片撑开
前端·css
@蒙面大虾19 小时前
CSS综合练习——懒羊羊网页设计
前端·css