温馨提示:这篇文章已超过798天没有更新,请注意相关的内容是否还可用!
摘要:本文介绍了CSS单位及其使用,涵盖了常见的CSS单位类型,包括像素(px)、百分比(%)、em、rem、pt等,并详细解释了它们的含义和用法。文章强调了单位选择的重要性,并提供了在不同场景下选择适当单位的建议。通过阅读本文,读者可以快速理解CSS单位的基本知识,并掌握在实际开发中的使用方法。
前言
好久没给大家更新文章了。也没什么原因就是比较懒,今天耐着性子要给大家更新一篇关于CSS单位的文章,个人觉得这篇还是比较齐全的。有不足欢迎提出来。
正文
CSS 有几种表示长度的不同单位。
许多 CSS 属性接受“长度”值,诸如 width
、margin
、padding
、font-size
等。
长度是一个后面跟着长度单位的数字,诸如 10px
、2em
等。
这一篇将从四个方面给大家分析CSS单位的选择
1.绝对长度
2.相对长度
3.浏览器的支持情况
4.实例代码解析
绝对长度
绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位看输出介质而定,不依赖于情形(显示器、分辨率、操作系统等)。
单位 | 描述 | 源自 |
---|---|---|
cm | 厘米 | w3school |
mm | 毫米 | w3school |
in | 英寸 (1in = 96px = 2.54cm) | w3school |
px * | 像素 (1px = 1/96th of 1in) | w3school |
pt | 点 (1pt = 1/72 of 1in) | w3school |
pc | 派卡 (1pc = 12 pt) | w3school |
相对长度
相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。
单位 | 描述 | 源自 |
---|---|---|
em | 相对于元素的字体大小(font-size)(2em 表示当前字体大小的 2 倍) | w3school |
ex | 相对于当前字体的 x-height(极少使用) | w3school |
ch | 相对于 "0"(零)的宽度 | w3school |
rem | 相对于根元素的字体大小(font-size) | w3school |
vw | 相对于视口*宽度的 1% | w3school |
vh | 相对于视口*高度的 1% | w3school |
vmin | 相对于视口*较小尺寸的 1% | w3school |
vmax | 相对于视口*较大尺寸的 1% | w3school |
% | 相对于父元素 | w3school |
提示:em 和 rem 单元可用于创建完美的可扩展布局!
浏览器的支持情况
长度单位 | 铬 | IE | 火狐 | 野生动物园 | 歌剧 |
---|---|---|---|---|---|
全美、ex、%, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
通道 | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
雷姆 | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
VH, 大众 | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
维明 | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
最大 | 26.0 | 不支持 | 19.0 | 不支持 | 20.0 |
实例代码解析
h1 {
font-size: 60px;}p {
font-size: 25px;
line-height: 50px;}
标红的就是我们要改动的尺寸【根据上面的支持情况来做自适应】
相关阅读:
1、wordpress阿里百xiu主题破解版,WordPress阿里百秀主题破解版,涉及违法犯罪的警示,WordPress阿里百秀主题破解版警示,涉及违法犯罪风险,谨慎使用
2、个人博客网站页面优化,开启OCSP装订(OCSP Stapling),个人博客网站页面优化,开启OCSP装订提升安全性能,个人博客网站页面优化,开启OCSP装订提升安全性能
3、云服务器ecs配置教程(ECS云服务器可以挂载什么数据盘),云服务器ECS配置教程,挂载数据盘指南
4、闲谈云服务器ecs的一些优缺点的简单介绍,云服务器ECS优缺点的简要解析,云服务器ECS优缺点的简要解析与介绍,云服务器ECS优缺点的深度解析与简要介绍
还没有评论,来说两句吧...