CSS中的长度单位有很多,觉得有必要整理备忘。
概览
CSS中的长度单位有很多,觉得有必要整理备忘。
网上介绍的也比较多和全,详见参考资料。
单位大体分为两大类:
-
绝对单位 ,不会因为其他元素的尺寸变化而变化。
-
相对单位 ,没有一个固定的度量值,而是由其他元素尺寸来决定的相对值。
px |
Absolute | 像素 (计算机屏幕上的一个点),1px = 1/96in
|
pt |
Absolute | Points, 1pt = 1/72in
|
pc |
Absolute | Picas, 1pc = 12pt
|
in |
Absolute | Inches, 1in = 96px = 2.54cm
|
cm |
Absolute | Centimeters, 1cm = 96/2.54px
|
mm |
Absolute | Millimeters, 1mm = 1/10cm
|
q |
Absolute | Quarter-millimeters, 1q = 1/4mm
|
% |
Relative | 相对于父元素的宽度或字体大小 |
em |
Relative | 相对于父元素的字体大小 |
rem |
Relative | (即root em) 相对于html标签的字体大小 |
ex |
Relative | 当前字体环境中 x 字母的高度 |
ch |
Relative | 当前字体环境中 0 数字的高度 |
vw |
Relative | 1% 视口(浏览器可视区域)的宽度 |
vh |
Relative | 1% 视口(浏览器可视区域)的高度 |
vmin |
Relative | 1% 视口(浏览器可视区域)的宽度和高度中较小的尺寸 |
vmax |
Relative | 1% 视口(浏览器可视区域)的宽度和高度中较大的尺寸 |
由于绝对单位是固定值,没什么要介绍的,下面主要介绍相对单位。
%
相对于父元素的相同属性的大小。这个其实谈不上单位,但它毕竟可以作为长度单位来使,所以在此列出。
如果用来设置字体,则相对的就是父元素的字体大小。
大多数浏览器中<html>
和<body>
标签中的默认字体尺寸是100%
.
html {font-size: 100%;}
body {font-size: 100%;}
100% = 1em = 16px = 12pt
如果用来设置宽和高等非字体尺寸,则以百分比为单位的长度值是基于具有相同属性的父元素的长度值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
div.parent {
margin:150px;
width: 200px;
height: 200px;
border: 1px solid blue;
}
div.child {
width: 50%;
height: 50%;
border: 1px dashed black;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
再啰嗦一点关于父元素的问题:何为父元素,相对定位(relative
),绝对定位(absolute
),浮动(float
),固定(fixed
)中如何找寻父元素?
由于HTML是树形结构,标签套标签,一般情况下的父子关系很明朗。
<div class="parent">
<div class="child"></div>
</div>
相对定位元素,它的父元素符合标签嵌套。
绝对定位元素,它的父元素是离它最近的定位元素(绝对定位,相对定位,固定,但不包括浮动)或者视窗尺寸(没找到定位元素时)。
浮动元素,它的父元素也符合标签嵌套。
固定元素(特殊的绝对定位),它的父元素是视窗(浏览器默认用来展示内容的区域的尺寸,不是html
或body
的尺寸)。
注意一下绝对定位就行了,其他的相对简单。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html {
width:1000px;
}
body {
width:800px;
}
#box {
width:50%;
height:300px;
position: absolute;
margin-left: 200px;
border: 1px solid red;
}
#can {
position:absolute;
top:100px;
left:100px;
width:50%;
height:50%;
border:1px solid black;
}
</style>
</head>
<body>
<div id="box">
<div id="can"></div>
</div>
</body>
</html>
box
宽度为视窗的一半,can
的宽高是 box
的宽高的一半。
将 can
设置为 position: fixed;
则其父元素将不再是 box
而是浏览器视窗。
can
的宽高是视窗宽高的一半。
浮动元素的父元素跟普通元素的父元素是一样的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html {
width:1000px;
}
body {
width:800px;
}
#box {
width:50%;
height:300px;
position: absolute;
margin-left: 200px;
border: 1px solid red;
}
#can {
float:left;
width:50%;
height:50%;
border:1px solid black;
}
</style>
</head>
<body>
<div id="box">
<div id="can"></div>
</div>
</body>
</html>
注意: padding
、 margin
如果设置了百分比,上,下,左,右 用的都是父元素宽度 的值为标准去计算。
em
和 rem
两者都是基于字体尺寸的,区别在于 em
是相对于当前父元素的字体大小为标准,而 rem
是相对于 html
元素的字体大小为标准。
举个例子你就明白了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html {
font-size: 30px;
}
body {
font-size: 14px;
}
div.em {
font-size: 1.2em;
}
div.rem {
font-size: 1.2rem;
}
</style>
</head>
<body>
<div class="em">
Test <!-- 14 * 1.2 = 16.8px -->
<div class="em">
Test <!-- 16.8 * 1.2 = 20.16px -->
<div class="em">
Test <!-- 20.16 * 1.2 = 24.192px -->
</div>
</div>
</div>
<div class="rem">
Test <!-- 30 * 1.2 = 36px -->
<div class="rem">
Test <!-- 30 * 1.2 = 36px -->
<div class="rem">
Test <!-- 30 * 1.2 = 36px -->
</div>
</div>
</div>
</body>
</html>
ex
和 ch
ex
和ch
单位,依赖于当前字体font-family
和字体大小 font-size
。 ex
指当前字体环境中小写字母x
的高度,ch
指当前字体环境中数字 0
的宽度。
IE9+ 和现代浏览器都已经支持。
vw
和 vh
响应式网页设计技术很大程度上依赖于比例规则。然而,CSS比例不总是每个问题的最佳解决方案。如果想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样?这正是vh
和vw
单位所提供的。
vh
等于视窗高度的 1/100
.例如,如果浏览器的高是 900px
, 1vh
求得的值为 9px
。同理,如果显示窗口宽度为750px
, 1vw
求得的值为 7.5px
。
IE10+ 和现代浏览器都支持这两个单位。
vmin
和 vmax
这两个单位是针对vw和vh
vmin
是vw
和vh
中比较 小 的值
vmax
是vw
和vh
中比较 大 的值
.box {
height: 100vmin;
width: 100vmin;
}
.box {
height: 100vmax;
width: 100vmax;
}
IE10+ 和现代浏览器都已经支持 vmin
webkit浏览器之前不支持vmax
,现在已经支持,所有现代浏览器已经支持,但是IE不支持 vmax
.
总结
尺寸单位虽然说不是很难的内容,但能够做到精准理解和熟练使用也是极其难得的,也许随着CSS的发展会有更多有用的单位引进。
对单位斤斤计较是一个优秀CSS使用者应该具备的品质,赶紧去挑选合适的单位去开发你的NB产品吧。
下面的代码用来检测您的浏览器是否支持常用单位:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
body {
padding: 20px;
}
div {
background: #99ff99;
padding: 5px;
margin-bottom: 10px;
white-space: nowrap;
width: 0;
}
div:after {
content: " (supported)";
}
div.fail {
width: 100% !important;
background: #ff6666 !important;
}
div.fail:after {
content: " (NOT supported)";
}
</style>
</head>
<body>
<div id="percentage">50% - percentage</div>
<div id="pixel">400px - pixels (device pixels)</div>
<div id="em">20em - relative unit</div>
<div id="rem">20rem - root em</div>
<div id="vw">15vw - viewport width</div>
<div id="vh">60vh - viewport height</div>
<div id="vmin">60vmin - smaller of vw or vh</div>
<div id="vmax">60vmax - larger of vw or vh</div>
<div id="inch">4in - inches</div>
<div id="cm">20cm - centimeters</div>
<div id="mm">200mm - millimeters</div>
<div id="pt">120pt - points</div>
<div id="pc">40pc - picas</div>
<div id="ex">60ex - x-height</div>
<div id="ch">60ch - based on width of zero (0) character</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script>
// 给指定元素设置宽度
var percentage = $("#percentage").css("width", "50%");
// 如果宽度值为0,即不支持,为此元素添加fail类
if (percentage.width() == 0) percentage.addClass("fail");
var pixel = $("#pixel").css("width", "400px");
if (pixel.width() == 0) pixel.addClass("fail");
var em = $("#em").css("width", "20em");
if (em.width() == 0) em.addClass("fail");
var rem = $("#rem").css("width", "20rem");
if (rem.width() == 0) rem.addClass("fail");
var vw = $("#vw").css("width", "15vw");
if (vw.width() == 0) vw.addClass("fail");
var vh = $("#vh").css("width", "60vh");
if (vh.width() == 0) vh.addClass("fail");
var vmin = $("#vmin").css("width", "60vmin");
if (vmin.width() == 0) vmin.addClass("fail");
var vmax = $("#vmax").css("width", "60vmax");
if (vmax.width() == 0) vmax.addClass("fail");
var inch = $("#inch").css("width", "4in");
if (inch.width() == 0) inch.addClass("fail");
var cm = $("#cm").css("width", "20cm");
if (cm.width() == 0) cm.addClass("fail");
var mm = $("#mm").css("width", "200mm");
if (mm.width() == 0) mm.addClass("fail");
var pt = $("#pt").css("width", "120pt");
if (pt.width() == 0) pt.addClass("fail");
var pc = $("#pc").css("width", "40pc");
if (pc.width() == 0) pc.addClass("fail");
var ex = $("#ex").css("width", "60ex");
if (ex.width() == 0) ex.addClass("fail");
var ch = $("#ch").css("width", "60ch");
if (ch.width() == 0) ch.addClass("fail");
</script>
</body>
</html>
相关推荐
html、css网页制作收藏、颜色表、css单位
Atom-atom-css-unit-converter.zip,在不同的css单位之间执行转换。原子css单元转换器,atom是一个用web技术构建的开源文本编辑器。
CSS单位转换器 使用CSS单位转换器在几乎每个CSS 单位之间转换值。 请通过进行实际检查。 建造 确保已安装 安装所有依赖项 npm install 建立一切 npm run build 观看所有内容(并根据更改进行重建) npm run ...
PostCSS 自定义 CSS 单位 定义自定义 css 单元并将它们转换为 CSS 变量。 输入: : root { --cusomt-base-unit : 1 vw ;}div { width : 100 rpx ;} 输出: div { width : calc ( var ( --cusomt-base-unit ) * 100 )...
css-绝对单位 绝对长度的 CSS 单位列表。 安装 npm install --save css-absolute-units 用法 var cssAbsoluteUnits = require ( 'css-absolute-units' ) ; cssAbsoluteUnits ( ) ; // => ['px', 'mm', 'cm', 'in',...
作为视口百分比的 CSS 单位列表。 安装 npm install --save css-viewport-units 用法 var cssViewportUnits = require ( 'css-viewport-units' ) ; cssViewportUnits ( ) ; // => ['vh', 'vw', 'vmin', 'vmax' ] ...
使用 vw 或 vh CSS 单位设置字体大小? 为您的类型设置最小或最大字体大小。 设置 在 HTML 页面的末尾添加mm-fontsize.js ,就在结束body标记之前。 … < script src =" ./path-to-js/mm-fontsize.js " type...
字体属性 颜色及背景属性 文本属性 方框属性 分类属性 CSS 单位
在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位。它们各是什么意思,有什么区别呢?在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等,绝对长度单位,如pt,mm等。
与他们的音乐同伴不同,它们在深度睡眠期间被称为“快速眼动”,而CSS rem则代表“ root em”。他们不会使您失去宗教信仰,也不会相信月球上的男人。他们可以做的是帮助您实现和谐均衡的设计。 根据W3C规范,一个rem...
Sublime Text插件,可将像素CSS单位转换为rem和back。 安装 cd "~/Library/Application Support/Sublime Text 2/Packages" git clone https://github.com/cruncher/CSSPxToRem.git 用法 选择一块CSS 点击Cmd-alt-r...
本书详细介绍了层叠样式表单的基本要素,包括CSS的基本概念、CSS属性、格式化模型以及CSS单位等。
CSS 2.0样式表中文手册手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 ...
PX-REM翻译保罗·王(Paul Wang) 2015年6月17日电子邮件:paulwang [at] vip [dot] qq [dot] com Sublime Text...支持的功能批量将px值转换为rem 批量将rem值转换为px 检查以确保该值是有效的px单位,可以转换为rem,
今儿,我就准备向大伙儿介绍一些你们之前可能很少见过CSS家伙们。他们每个都是度量的单位,类似pixel 和 em 这样的,但是很有可能你之前从来就没听过这些家伙们!就让我们一起来交个朋友吧
CSS中常用的单位,值得一看
本篇主要介绍了CSS的概念、CSS文件的导入方法、CSS中的注释、CSS中的单位,还介绍了CSS的选择符以及CSS中的伪类和伪元素。 第二篇:CSS中级篇(第4~8章)。本篇着重介绍了CSS的文本属性、背景属性、边框属性、块...
本文介绍了css3新单位vw、vh、vmin、vmax的使用详解,分享给大家,具体如下: 1,vw、vh、vmin、vmax 的含义 (1)vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由...