css 长度单位的理解

简介：CSS 中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。

一、绝对长度单位

以下都是绝对长度单位——它们与其他因素之间都没有关系，通常被认为总是相同的大小。

单位	名称	等价换算
`cm`	厘米	`1cm = 96px/2.54`
`mm`	毫米	`1mm = 1/10 * 1cm`
`Q`	四分之一毫米	`1Q = 1/40 * 1cm`
`in`	英寸	`1in = 2.54cm = 96px`
`pc`	十二点活字	`1pc = 1/6 * 1in`
`pt`	点	`1pt = 1/72 * 1in`
`px`	像素	`1px = 1/96 * 1in`

注意： 以上的单位被使用的通常只有px，在蓝湖上的设计图会使用到pt 单位，这时可以根据上面的等价换算进行转化

二、相对长度单位

相对长度单位相对于其他因素，比如父元素的字体大小，或者视图端口的大小来响应式的改变自身的大小。下表列出了 web 开发中一些最有用的单位。

单位	含义
`em`	在 `font-size` 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 `width、height`等
`ex`	字符“`x`”的高度
`ch`	数字“`0`”的宽度
`rem`	根元素的字体大小
`lh`	元素的 `line-height`
`vw`	视窗宽度的 `1%`
`vh`	视窗高度的 `1%`
`vmin`	视窗较小尺寸的 `1%`
`vmax`	视图较大尺寸的 `1%`
`rpx`	微信小程序定义的，可以根据屏幕宽度进行自适应、规定屏幕宽为`750rpx`。

注意：
1、rem是相对根元素例如html元素大小，而em是相对于父元素或自身元素大小。
2、rpx的计算方式，如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px，1rpx = 0.5px。

css 长度单位的理解相关推荐

css的长度单位没有哪些,css 长度单位知多少
写在前面:在这个是个 coder 都会写两行前端代码的年代下,几乎都对 css 不是很陌生,但是真正能写好的确需要对 css 深入学习了,做为一个不称职的后端,我觉得我也有必要多了解一下. css 中 ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
一文搞懂像素（px）、分辨率、CSS长度单位
博主目前在蚂蚁集团-体验技术部,AntV/S2 是博主所在团队的开源项目--多维交叉分析表格,欢迎使用,感谢到 S2 github 仓库点赞 star,有任何关于前端面试.就业.技术问题都可给在文章后 ...
HTML绝对单位,CSS长度单位有绝对单位和相对单位，其中px就是绝对单位，em就是相对单位。...
CSS长度单位有绝对单位和相对单位,其中px就是绝对单位,em就是相对单位. 妊娠12周内,胚胎自然殒堕者称() 某苛性钾样品中含有不与酸反应的杂质,为了测定苛性钾的纯度,取样品0.5600g溶于水制 ...
CSS 长度单位的详解『你还是只会使用PX吗？(╬▔皿▔)╯』
CSS 长度单位的详解『你还是只会使用PX吗?』文章目录 CSS 长度单位的详解『你还是只会使用PX吗?』一.CSS的长度单位
认识css长度单位 px % em rem vh vw
目录长度单位 px % em rem vh.vw 总结长度单位在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
前端4-2-5：关于CSS 长度单位总结，有你就够了！
目录一.长度单位二.简单介绍三.详细介绍 1.相对长度单位 2.绝对长度单位 3.长度单位总结四.五个可能你不太了解的CSS单位 1.em 和 rem 2.对网络布局的好处(对H5页面做兼容) ...
混合app用百分比还是rem_一次搞懂前端所有CSS长度单位，px、em、rem、rpx、%....
前端就是一个大杂烩,做为前端工程师需要掌握的知识点太多了.各种长度单位需要我们去了解除了这些还有印刷单位 pt pc pt cm mm in.... 毫无疑问现在统治前端的长度单位还是px, 一个相 ...
css display属性理解
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

css 长度单位的理解

一、绝对长度单位

二、相对长度单位

css 长度单位的理解相关推荐

最新文章

热门文章