css绝对长度单位主要有哪些?绝对长度单位之间如何换算?

本篇文章就给大家介绍css长度单位中绝对长度单位主要有哪些,它们之间是怎么换算的。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

css中的长度单位有很多,可谓五花八门,但基本上可分为三大类:相对长度单位、绝对长度单位和可视区百分比长度单位。其中绝对长度单位表示:彼此固定长度,不会因为其他元素的尺寸变化而变化的长度单位,主要包括:px,pc,pt,in,mm,cm。

首先我们来简单介绍一下这些长度单位。

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

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

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

.demo{  font-size: 40px; }

登录后复制

1.jpg

css pc单位

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

.demo{  font-size: 4pc; }

登录后复制

2.jpg

css pt单位

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

.demo{  font-size: 40pt; }

登录后复制

3.jpg

css in单位

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

.demo{  font-size: 0.5in; }

登录后复制

4.jpg

css mm单位

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

.demo{  font-size: 10mm; }

登录后复制

5.jpg

css cm单位

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

.demo{  font-size: 1cm; }

登录后复制

6.jpg

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

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

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

px = pt *(96/72)

pt=px*(72/96)

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 CSS基础视频教程, CSS3视频教程,bootstrap视频教程!

以上就是css绝对长度单位主要有哪些?绝对长度单位之间如何换算?的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月10日 21:59:59
下一篇 2025年2月25日 15:06:15

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

相关推荐

  • px,em,rem的区别

    它们都是用于设置字体的大小以及盒子的宽高,但是px不会因为浏览器尺寸的改变而改变,而em和rem会因为浏览器尺寸的变化而变化 在我们写代码的过程中,经常在CSS中定义字体的大小或者元素的宽高值时会使用到尺寸大小的单位,今天将要为大家详细介绍…

    2025年3月10日 编程技术
    200
  • pt是什么单位

    pt是字体单位。 pt全称为point,中文意思为“点”,常见于软件设计、排版印刷行业。(推荐学习:CSS视频教程) 在常规的排版中,字号以“点”来单位。活字的大小称为“字号”,而字母的宽度称作“字宽”,1点=0.376毫米=1.07英美点…

    2025年3月10日
    200
  • CSS中单位px、rem、em浅析

    绝对长度 px px是像素值,是一个固定的长度,比如我们的米,厘米一样。 相对长度 为什么我们需要相对长度rem em等? 固定长度已经不能满足我们现在的需求了。 立即学习“前端免费学习笔记(深入)”; 举例:比如我们在缩小我们屏幕的时候,…

    2025年3月10日
    200
  • css中px、em、rem的区别是什么?

    区别:px表示像素,是相对长度单位,是相对于显示器屏幕分辨率来设置字体大小的,不支持IE的缩放;em是相对长度单位,是相对于其父元素来设置字体大小的,支持IE的缩放;rem是相对长度单位,是相对HTML根元素来设置字体大小的。 推荐教程:C…

    2025年3月10日
    200
  • css 9pt等于多少px

    CSS 9pt等于12px。pt和px的计算公式为“pt=px*dpi/72”,而以Windows下的96dpi(默认)来计算,“9pt = 9 * 1/72 * 96 = 12px”。 本教程操作环境:windows7系统、css3版、D…

    2025年3月10日
    200
  • CSS布局单位的演变与应用:从像素到根据根元素字体大小的相对单位

    从px到rem:CSS布局单位的演变与应用 引言:在前端开发中,我们经常需要用到CSS来实现页面布局。在过去的几年间,CSS布局单位也经历了演变和发展。最开始我们使用的是像素(px)作为单位来设置元素的大小和位置。然而,随着响应式设计的兴起…

    2025年3月10日
    200
  • 常用的CSS长度单位有哪些?

    CSS 最常用的长度单位有像素 (px)、百分比 (%)、另外还有 rem、em、vh、vw、pt、cm、mm、in 等。这些单位可以用来设置元素的宽度、高度、边框尺寸、字体大小等。 像素 (px) 单位是最常用的单位之一。它是固定的长度单…

    2025年3月10日
    100
  • css中px与em以及rem的区别总结

    前言 em 和 rem 都是灵活可扩展的单位,由浏览器转换为像素值,取决于设计中的字体大小,如果使用值 1em 或 1rem ,它可以被浏览器转换为从 16px 到 160px 或其他任意值。浏览器使用 1px ,那么 1px 始终显示为完…

    编程技术 2025年3月9日
    200
  • 实现响应式布局的自适应效果,应该使用哪些单位?

    在响应式布局中,使用何种单位来实现自适应的效果? 随着移动设备的普及和各种尺寸的屏幕出现,响应式布局成为了现代网页设计与开发中一个重要的概念。通过响应式布局,可以使网页在不同设备上实现自适应的效果,提升用户体验。而在实现响应式布局的过程中,…

    2025年3月9日
    200
  • 荔枝和螃蟹可以一起吃吗

    荔枝和螃蟹是生活中比较常见的两种食物,它们都是比较美味的,都具有很好的营养价值,很多人都喜欢吃。荔枝和螃蟹是可以一起吃的,两者并不冲突,但是不能过多食用。 荔枝和螃蟹可以一起吃吗 螃蟹通常是可以和荔枝一起吃的,但是需要控制食用量,避免过量食…

    2025年2月21日
    69.1K00

发表回复

登录后才能评论