css中的单位换算_css绝对长度单位主要有哪些？绝对长度单位之间如何换算？

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

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

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

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

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

.demo{ font-size: 40px; }

css pc单位

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

.demo{ font-size: 4pc; }

css pt单位

pt：点(Point)，绝对长度单位

.demo{ font-size: 40pt; }

css in单位

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

.demo{ font-size: 0.5in; }

css mm单位

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

.demo{ font-size: 10mm; }

css cm单位

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

.demo{ font-size: 1cm; }

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

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

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

px = pt *(96/72)

pt=px*(72/96)

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

阅读全文

1 个人已赞赞一个收藏 (0)打赏

您入群打赏务必备注QQ号

支付宝扫一扫赞助

微信钱包扫描赞助

分享到：

生成海报

评论抢沙发

评论前必须登录！

css中的单位换算_css绝对长度单位主要有哪些？绝对长度单位之间如何换算？相关推荐

css单位计算方法,CSS中的单位和百分比计算
CSS中的单位和百分比计算发布时间:2020-05-23 15:53:59 来源:亿速云阅读:217 作者:鸽子 CSS中的单位绝对单位 in-英寸: cm; mm; pt-磅相对单位 em- ...
css中的单位换算_CSS中各种长度单位总结
在前端开发工作过程中曾碰到这样一问题: .parent{ width:400px; height:300px; border:1px solid #ccc; } .child{ margin:10%; ...
css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
css中的单位换算_CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
1.PX(CSS pixels) 1.1 定义虚拟像素,可以理解为"直觉"像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. ...
css中的单位换算_CSS单位px、em、rem及它们之间的换算关系
作者:WangMin 格言:努力做好自己喜欢的每一件事国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者的区别与优势是什么?接下来我们就来学习一下吧! 单位px.em.rem分 ...
css中的单位换算_金蝶ERP入门教程：动态换算率及辅助计量单位的应用
金蝶ERP入门教程:动态换算率及辅助计量单位的应用关注我,我将定期分享更多的ERP解决方案如果您喜欢且觉得内容有用,请点击分享转发如果你有什么关于ERP系统的问题和疑问,可私信联系我大家好,我 ...
css中调整高度充满_CSS(十三).高度如何铺满全屏
该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...
css中的媒体查询_CSS中的媒体查询
css中的媒体查询 CSS | 媒体查询 (CSS | Media Queries) Creating a web page is not an easy task as it requires lo ...
HTML文本下划线效果,聊聊CSS中文本下划线_CSS, SVG, masking, clip-path, 会员专栏, text-decoration 教程_W3cplus...
在Web中给文本添加下划线常常出现在链接的文本上,早期一般使用text-decoration属性给文本添加下划线.删除线等.除了text-decoration之外,CSS还有很多技术方案可以给文本添加 ...

css中的单位换算_css绝对长度单位主要有哪些？绝对长度单位之间如何换算？

css中的单位换算_css绝对长度单位主要有哪些？绝对长度单位之间如何换算？相关推荐

最新文章

热门文章