一文读懂CSS单位以及使用

马肤
这是懒羊羊

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

前言

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

一文读懂CSS单位以及使用,屏幕截图 2022-12-11 200312.png,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;}

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


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

发表评论

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

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

目录[+]

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