px
像素 pixel 的缩写,即电子屏幕上的1个点,以分辨率为 1024 * 768 的屏幕为例,即水平方向上有 1024 个点,垂直方向上有 768 个点,则 width:1024px
即表示元素的宽度撑满整个屏幕。
随屏幕分辨率不同,1px 的大小也不同,所以严格来说,px 也是相对单位,但不考虑屏幕分辨率时,也可以把 px 当作绝对单位来看待。
% 百分比
通常百分比都是相对于父元素的 content box
计算,所以父元素必须有显式的值,若父元素 height 为 auto ,则百分比值将完全失效!
以下样式的百分比计算规则比较特殊,需特别留意:
-
width
、height
、font-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;
}