了解如何使用CSS中的单元
您每天在CSS中将使用的一件事是单位。它们用于设置长度,填充,边距,对齐元素等。
像px
,em
,rem
或百分比。
他们无处不在。也有一些相对未知的。
像素
使用最广泛的测量单位。像素实际上与屏幕上的物理像素不相关,因为设备之间的差异很大(请考虑高DPI设备与非视网膜设备)。
有一个约定可使本机在设备之间一致地工作。
百分比
另一个非常有用的度量,百分比使您可以以该父元素的相应属性的百分比来指定值。
例子:
.parent {
width: 400px;
}
.child {
width: 50%; /* = 200px */
}
实际测量单位
我们拥有从外界翻译而来的度量单位。它们通常在屏幕上无用,对于打印样式表很有用。他们是:
cm
一厘米(映射到37.8像素)mm
一毫米(0.1厘米)q
四分之一毫米in
一英寸(映射到96像素)pt
一分(1英寸= 72分)pc
1点(1点= 12点)
相对单位
em
是分配给该元素的值font-size
,因此其确切值会在元素之间变化。它不会根据所使用的字体而改变,而仅取决于字体大小。在版式中,这测量的是宽度m
信。rem
类似于em
,但它不会改变当前元素的字体大小,而是使用根元素(html
) 字体大小。您只需设置一次该字体大小,然后rem
将是所有页面上一致的度量。ex
就好像em
,但已插入以测量宽度m
,它测量的高度x
信。它可以根据所使用的字体和字体大小而变化。ch
就好像ex
但不是测量高度x
它测量宽度0
(零)。
视口单位
vw
这视口宽度单位代表视口宽度的百分比。50vw
表示视口宽度的50%。vh
这视口高度单位代表视口高度的百分比。50vh
表示视口高度的50%。vmin
这视口最小单位代表高度或宽度之间的最小值(以百分比表示)。30vmin
是当前宽度或高度的30%,具体取决于哪一个较小vmax
这视口最大单位代表高度或宽度之间的最大值(以百分比表示)。30vmax
是当前宽度或高度的30%,取决于哪一个更大
分数单位
fr
是分数单位,它们用于CSS网格将空间分成几部分。
免费下载我的CSS手册
更多CSS教程:
- Flexbox指南
- CSS网格教程
- CSS变量(自定义属性)
- PostCSS简介
- CSS保证金属性
- 如何使用CSS将元素居中
- CSS系统字体
- 如何使用样式打印HTML
- CSS过渡入门指南
- CSS动画教程
- CSS简介
- CSS指南
- 如何使用PurgeCSS和PostCSS设置Tailwind
- 尾风备忘单
- 如何使用CSS连续旋转图像
- 使用CSS使表响应
- 如何通过二等分来调试CSS
- CSS选择器
- CSS级联
- CSS特异性
- CSS属性选择器
- CSS颜色
- CSS单位
- CSS url()
- CSS排版
- CSS Box模型
- CSS位置属性
- CSS媒体查询和响应式设计
- CSS功能查询
- CSS转换
- 如何使用CSS设置列表样式
- CSS供应商前缀
- CSS继承
- CSS伪类
- CSS伪元素
- 用CSS样式化HTML表
- CSS Display属性
- CSS calc()函数
- CSS边框
- 使用@import导入CSS文件
- CSS错误处理
- CSS过滤器
- CSS Box大小
- CSS背景
- CSS注释
- CSS字体
- CSS填充
- CSS float属性和清除
- CSS规范化
- CSS z-index属性
- 如何使用CSS禁用文本选择
- 如何使用CSS将项目放在其容器的底部
- 如何使用CSS反转颜色
- CSS中的响应式前置标签
- 自适应YouTube视频嵌入
- 响应式设计的良好CSS断点值是多少?
- 如何在Flexbox中对齐中心