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;
}
相关推荐
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
想自律的露西西★4 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
彪8255 小时前
第十章 JavaScript的应用 习题
javascript·css·ecmascript·html5
旧林8435 小时前
第八章 利用CSS制作导航菜单
前端·css
asleep7017 小时前
第8章利用CSS制作导航菜单
前端·css
风尚云网13 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
酷酷的威朗普15 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
渊兮兮15 小时前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
土豆湿16 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
鸽鸽程序猿19 小时前
【前端】CSS
前端·css