css绝对单位是什么

在css中,绝对单位全称“绝对长度单位”,是一个固定的值,它反应一个真实的物理尺寸;绝对单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。css绝对单位有cm(厘米)、mm(毫米)、in(英寸)、px(像素)、pt(点)、pc(派卡)。

css绝对单位是什么

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css长度单位可分为:相对长度单位 和 绝对长度单位。

相对单位

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设配相对长度更加适用。

立即学习“前端免费学习笔记(深入)”;

单位 描述

em它是描述相对于应用在当前元素的字体尺寸,所以它是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32pxex依赖于英文字母小x的高度ch数字0的宽度remrem是根(root em)的缩写,相对于根元素字体大小(相对的只是HTML根元素);vwviewpoint width,视窗宽度,1vw = 视窗宽度的1%vhviewpoint height,视窗高度,1vh = 视窗高度的1%vminvw和vh中较小的一个vmaxvw和vh中较大的一个

绝对单位

绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)

单位 描述

cm厘米mm毫米in英寸(1in= 96px = 2.54cm)px像素ptpoint (1pt = 1/72in)pcpica 大约12pt(1pc = 12pt)

css px单位—最经常使用的长度单位

px又名为:像素,是屏幕媒体(即在电脑屏幕上读取)固定大小的单元,是一个按角度度量的单位。一个像素等于电脑屏幕上的一个点 (即:屏幕分辨率的最小分割),web页面可以精确按像素完美呈现的。我们看看如何设置,例:

.demo{  font-size: 40px; }

登录后复制

1.png

css pc单位

pc:派卡(Pica),相当于我国新四号铅字的尺寸。

.demo{  font-size: 4pc; }

登录后复制

2.png

css pt单位

pt:点(Point),绝对长度单位

.demo{  font-size: 40pt; }

登录后复制

3.png

css in单位

in:英寸(Inch),一个物理度量单位,但是在CSS领域,英寸只不过被直接映射成像素罢了。

.demo{  font-size: 0.5in; }

登录后复制

4.png

css mm单位

mm:毫米(Millimeter),是个小数量级的物理度量单位。

.demo{  font-size: 10mm; }

登录后复制

5.png

css cm单位

cm:厘米(Centimeter),对于世界上大多数的人来说,是比较熟悉有用的物理度量单位。在css中它也映射成像素。

.demo{  font-size: 1cm; }

登录后复制

6.png

扩展知识:

我们来看看这些长度单位是如何换算的:

1in = 2.54cm = 25.4 mm = 72pt = 6pc=96px

登录后复制

下面我们给出pt与px的相互转换的公式:

px = pt *(96/72)pt=px*(72/96)

登录后复制

(学习视频分享:web前端入门)

以上就是css绝对单位是什么的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2927764.html

(0)
上一篇 2025年3月11日 19:28:56
下一篇 2025年3月11日 19:29:06

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何解决PHP中HTML解析的复杂问题?使用voku/simple_html_dom可以!

    可以通过以下地址学习 Composer:学习地址 在我的项目中,我需要从 html 页面中提取特定内容并进行操作。起初,我尝试使用正则表达式和手动解析,但这不仅耗时,而且容易出错。幸运的是,我找到了 voku/simple_html_dom…

    编程技术 2025年4月5日
    200
  • 使用Composer解决CSS前缀问题:padaliyajay/php-autoprefixer库的实践

    可以通过一下地址学习composer:学习地址 在前端开发中,处理不同浏览器的兼容性问题一直是开发者们的一大挑战。特别是当你需要为 css 属性添加前缀以确保在旧版浏览器中也能正常显示时,这个过程往往是繁琐且容易出错的。最近,在开发一个新项…

    编程技术 2025年4月5日
    300
  • 关于HTML5和CSS替换使用

    听到html5的都知道它的强大,如更多的描述性标记、较少依赖于插件的多媒体支持、跨文档消息通信、web sockets、客户端存储、更强大的表单、提升可访问性、先进的选择器、强大的视觉效果。费话不多说,细细说来 被废弃的标签和属性 废弃的标…

    编程技术 2025年4月4日
    100
  • 跨平台开发中的Java框架选择

    跨平台 java 应用程序开发的最佳框架选择取决于项目需求。原生开发框架 (swift、kotlin) 提供最佳性能,但需要针对每个平台单独编写代码。跨平台框架 (react native、flutter) 允许代码重用,但性能可能受限。选…

    2025年4月2日
    100
  • eclipse怎么改黑色主题

    要将 Eclipse 的主题更改为黑色,请按照以下步骤操作:1. 打开主题菜单;2. 选择黑色主题;3. 应用更改;4. 重启 Eclipse。使用第三方插件或自定义 CSS 可以进一步自定义主题。 如何修改 Eclipse 为黑色主题 要…

    2025年4月2日
    200
  • eclipse怎么安装emmet

    Emmet 的 Eclipse 安装分以下步骤进行:安装 Emmet 插件:转到菜单栏中的“帮助”>“市场”,搜索并安装“Emmet for Eclipse”。启用 Emmet:重新启动 Eclipse,转到“窗口”>“首选项”…

    2025年4月2日
    200
  • idea怎么刷新项目

    直接刷新项目方法:1. 单击“Reload”按钮(Ctrl + F5);2. 右键单击项目,选择“Reload All from Disk”。强制刷新项目:1. 单击“Invalidate Caches / Restart”按钮(Ctrl …

    2025年4月2日
    300
  • yii框架怎么引用css

    yii框架引用css的方法:1、内联样式,将CSS样式直接写在视图文件中的HTML元素上;2、内部样式表,在视图文件的head标签内使用style标签来定义CSS样式;3、外部样式表,创建一个独立的CSS文件,并在视图文件中使用link标签…

    2025年4月2日
    100
  • 解决Laravel项目中CSS文件无法加载的问题

    解决Laravel项目中CSS文件无法加载的问题,需要具体代码示例 在开发Laravel项目的过程中,有时候会遇到CSS文件无法加载的问题,这可能会导致页面样式混乱或者无法正常显示页面内容。这个问题通常是由于文件路径配置或者缓存导致的,接下…

    2025年4月2日
    200
  • 如何解决Laravel无法加载CSS样式的情况

    标题:如何解决Laravel无法加载CSS样式的情况 在使用Laravel进行Web开发的过程中,有时候会遇到CSS样式无法加载的情况,这可能会导致页面显示效果不正常。本文将介绍一些常见的原因以及解决方法,同时提供具体的代码示例供大家参考。…

    2025年4月2日
    100

发表回复

登录后才能评论