一文读懂CSS单位以及使用,一文详解CSS单位及其应用指南

马肤

温馨提示:这篇文章已超过798天没有更新,请注意相关的内容是否还可用!

摘要:本文介绍了CSS单位及其使用,涵盖了常见的CSS单位类型,包括像素(px)、百分比(%)、em、rem、pt等,并详细解释了它们的含义和用法。文章强调了单位选择的重要性,并提供了在不同场景下选择适当单位的建议。通过阅读本文,读者可以快速理解CSS单位的基本知识,并掌握在实际开发中的使用方法。

前言

好久没给大家更新文章了。也没什么原因就是比较懒,今天耐着性子要给大家更新一篇关于CSS单位的文章,个人觉得这篇还是比较齐全的。有不足欢迎提出来。

一文读懂CSS单位以及使用,一文详解CSS单位及其应用指南 第1张

正文

CSS 有几种表示长度的不同单位。

许多 CSS 属性接受“长度”值,诸如 widthmarginpaddingfont-size 等。

长度是一个后面跟着长度单位的数字,诸如 10px2em 等。

这一篇将从四个方面给大家分析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, pc1.03.01.01.03.5
通道27.09.01.07.020.0
雷姆4.09.03.64.111.6
VH, 大众20.09.019.06.020.0
维明20.09.0*19.06.020.0
最大26.0不支持19.0不支持20.0

实例代码解析

h1 {
 font-size: 60px;}p {
 font-size: 25px;
 line-height: 50px;}

标红的就是我们要改动的尺寸【根据上面的支持情况来做自适应】


0
收藏0
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

  • 显示器黑屏但是主机正常怎么办(显示器黑屏没反应怎么回事),解决显示器黑屏问题,主机运行正常但显示器无反应怎么办?,主机运行正常但显示器黑屏无反应,原因解析与解决方案,主机运行正常但显示器黑屏无反应,原因解析、解决方案与应对方法,主机运行正常但显示器黑屏无反应,原因解析与解决方案大全
  • 手机站域名怎么选择(手机使用域名访问网站怎么打开),如何选择手机站域名及在手机上使用域名访问网站的打开方式,手机站域名选择指南,如何挑选域名及在手机上使用域名访问网站的步骤,手机站域名选择指南,如何挑选域名及在手机上使用域名访问网站的步骤,手机站域名选择指南,如何挑选域名及在手机上使用域名访问网站的步骤与技巧
  • 豫保通没社会保障卡怎么备案(豫保通为什么认证不了),豫保通未绑定社保卡如何备案及认证问题解析
  • 腾讯云服务器设计方案怎么写(腾讯云服务器架构),腾讯云服务器设计方案详解,构建高效云服务器架构,腾讯云服务器设计方案详解,构建高效云服务器架构与架构部署策略
  • 主机紫色的线怎么连接蓝牙音响(主机里蓝色的线怎么插),如何连接主机紫色线与蓝牙音响,主机蓝色线插口指南,主机紫色线与蓝牙音响连接教程,紫色与蓝色线插口指南,主机紫色与蓝色线连接蓝牙音响教程,插口指南与连接步骤详解,主机紫色与蓝色线连接蓝牙音响教程,详细步骤与插口指南,主机线路连接指南,紫色与蓝色线如何正确连接蓝牙音响,主机线路连接指南,紫色与蓝色线连接蓝牙音响的详细步骤与插口指南
  • 北大青鸟主机多线盘怎么启动(北大青鸟主机多线盘怎么启动的),北大青鸟主机多线盘启动指南,操作方法与步骤解析
  • 广州异地就医备案门诊保销比例怎么算(广州异地就医备案表怎么办理),广州异地就医备案详解,门诊报销比例及备案表办理流程,广州异地就医备案详解,门诊报销比例与备案表办理流程全攻略,广州异地就医备案详解,门诊报销比例与备案表办理流程指南,广州异地就医备案详解,门诊报销比例及备案表办理流程指南
  • 万网的域名怎么(万网域名怎么注销),万网域名操作指南,如何注销域名?,万网域名操作指南,如何注销域名?全面解析域名注销流程与操作细节。,全面解析万网域名注销流程与操作细节指南,从注册到注销一网打尽
  • 发表评论

    快捷回复:表情:
    评论列表 (暂无评论,436人围观)

    还没有评论,来说两句吧...

    目录[+]

    取消
    微信二维码
    微信二维码
    支付宝二维码