CSS单位

0人阅读 评论(0) 收藏 举报
分类:

CSS 中的单位有很多,这里主要介绍目前常用的及未来必备的几个单位。

px

px 是 pixels(像素)的缩写,是一种绝对单位,用于屏幕显示器上,传统上一个像素对应于计算机屏幕上的一个点,而对于高清屏则对应更多。任何现代显示屏,不管是手机,平板,笔记本还是电视都是由成千上万的像素组成的,所以我们可以使用这些像素来定义长度。

另外 CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为“1px”。 一个“600x400”解析度的照片的长宽分别为“600px”以及“400px”,所以照片本身的像素并不会与显示装置像素(可能非常小)一致,而是与 px 单位一致。如此就可以将图像完整的与网页的其它元素排列起来。

下面我们使用 px 单位设置下元素的大小,如下:

.box {
 width: 200px;
 font-size: 16px;
}

%

%(百分比)应该是我们最好理解的单位了,这里就不多解释了,主要有一点需要注意:

  • 如果对 html 元素设置 font-size 为百分比值,则是以浏览器默认的字体大小16px为参照计算的(所有浏览器的默认字体大小都为 16px),如62.5%即等于10px(62.5% * 16px = 10px)。

em

em 也是一种相对单位,既然是相对单位,那么肯定有一个参照值。不过其参照值并不是固定不变的,而是不同的属性有不同的参照值。

font-size

对于字体大小属性(font-size)来说,em 的计算方式是相对于父元素的字体大小,1em 等于父元素设置的字体大小。如果父元素没有设置字体大小,则继续往父级元素查找,直到有设置大小的,如果都没有设置大小,则使用浏览器默认的字体大小。

下面我们举几个简单的例子说明下:

.parent {
 font-size: 14px;
}
.child1 {
 font-size: 1em; /* 1em = 1*14px*/
}
.child2 {
 font-size: 1.5em; /* 1.5em = 1.5*14px */
}
/* 父级元素都没有设置大小的 */
.no-parent-font-size {
 font-size: 0.8em; /* 0.8em = 0.8*16px */
}

其他属性(border, width, height, padding, margin, line-height)

在这些属性中,使用em单位的计算方式是参照该元素的 font-size,1em 等于该元素设置的字体大小。同理如果该元素没有设置,则一直向父级元素查找,直到找到,如果都没有设置大小,则使用浏览器默认的字体大小。

下面我们举几个简单的例子说明下:

p {
 font-size: 14px;
 width: 20em; /* 20em = 20*14px */
 padding: 1.5em; /* 1.5em = 1.5*14px */
}
/* 元素本身没有设置字体大小且父级元素也没有设置 */
.no-font-size {
 width: 40em; /* 40em = 40*16px */
 margin-bottom: 2em; /* 2em = 2*16px */
}

总之em的计算单位相对来说比较复杂,现在已经不建议使用,如果你要兼容的浏览器是现代浏览器的话,那么可以使用下面要介绍的 rem 单位。

rem

和 em 一样,rem 也是一种相对单位,不过不一样的是 rem 是相对于根元素 html 的 font-size 来计算的,所以其参照物是固定的。(rem的r就是表示root,虽然rem相对em进步了很多,但是由于是新技术,不支持IE8以下(包括IE8),不过幸喜的是移动端可以放心使用)

由于 rem 是基于跟元素 html 的 font-size 来计算的,所以如果改变 html 的 font-size 值,那么所有使用的 rem 单位的大小都会随着改变,这对于移动端适应各种屏幕大小来说还是有点作用的。

html {
 font-size: 625%; /* 相当于100px = 625% * 16px */
}
div {
 font-size: 20px; 
 width: 2rem; /* 2rem = 2 * 100px(根元素的font-size) */
 height: 4rem; /* 4rem = 4 * 100px(根元素的font-size) */
 padding: 0.1rem; /* 0.1rem = 0.1 * 100px(根元素的font-size) */
}

如果我们改变了 html 的 font-size 值,如设置为 80px,则相应的我们的 div 的 width,height 和padding 大小也随着改变了。

相对于 em 来说,rem 只需要修改 html 的 font-size 值即可达到全部的修改,即所谓的牵一发而动全身。

vw, vh, vmin, vmax

最后要介绍的这四个单位属于 v 系单位,它们也是相对单位,是基于视窗大小(浏览器用来显示内容的区域大小)来计算的。

网页中我们很多时候都需要用到满屏,或者屏幕大小的一半等,尤其是移动端,屏幕大小各式各样,而这个时候我们现有的单位就显得有点捉襟见肘,于是就诞生了这四个单位。

  • vw:基于视窗的宽度计算,1vw 等于视窗宽度的百分之一
  • vh:基于视窗的高度计算,1vh 等于视窗高度的百分之一
  • vmin:基于vw和vh中的最小值来计算,1vmin 等于最小值的百分之一
  • vmax:基于vw和vh中的最大值来计算,1vmax 等于最大值的百分之一

下面我们实例说明实现一个宽度为视窗宽度的 25%,高度为视窗高度 50% 的一个盒子:

.box {
 height: 50vh; /* 视窗高度的50% */
 width: 25vw; /* 视窗宽度的25% */
 background: red;
}

同样由于是新技术,还是有些浏览器不兼容,哪怕在移动端安卓4.3 以下也是不兼容,不过长远来说这也是必备的。

单位运算

除了设置以上的单位之外,我们还可以使用 calc 来进行单位运算,单位运算时可以使用各种单位进行加减乘除运算。

简单示例如下:

.box {
 height: calc(50vh - 20px); /* 50% 的视窗高度减掉20px */
 width: calc(100% / 3);  /* 三分之一的父容器宽度 */
 background: red;
}

可惜的是,calc 也存在兼容问题,详细介绍可参考:calc | MDN

注:chrome 浏览器最小的字体为 12px,如果设置 10px 也会渲染成 12px 。

查看评论

CSS 单位与属性

一:单位   px,em ,%(相对单位)   font-size:25不加单位的数字毫无意思   px像素,相对单位。和屏幕的分辨率有关。   em:一个字体高(1倍字体高),2em...
  • JLhaoran
  • JLhaoran
  • 2017年06月01日 14:41
  • 427

css中的百分比单位详解

CSS支持多种单位形式,如百分比、px、pt、rem等,百分比和px是常用的单位,随着移动端和响应式的流行,rem、vh、vw也开始普遍使用,这些单位你可能未必知道,想了解?可以戳此文: CSS:7个...
  • tianxieliuhong
  • tianxieliuhong
  • 2016年11月27日 15:16
  • 800

CSS中的em单位

CSS中有众多单位,常用的px是绝对单位,em则是相对单位。在响应式和移动端的大前提下,使用em能够更方便快捷的一次性调整web文档极其HTML元素的字体大小、宽度、边距、边框等一系列属性,可以说在某...
  • H_O_L_Y
  • H_O_L_Y
  • 2016年07月07日 16:20
  • 4276

CSS中你可能不知道的单位

关于界面的布局是做前端的一个永恒的话题,无论你是用哪一种语言做何种产品,都离不开界面,那在界面布局里扮演重要角色的自然要属设定UI的长宽高的单位了,在xaml里设计的时候对于长宽高的单位并没有界定,然...
  • LeyYang
  • LeyYang
  • 2016年03月22日 15:04
  • 838

CSS中惯用的字体单位:px、em、rem和%的区别

CSS中惯用的字体单位:px、em、rem和%的区别 CSS中常用的字体单位:px、em、rem和%的区别 在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在...
  • fanzh90
  • fanzh90
  • 2016年04月08日 14:28
  • 996

不要省略CSS中零值的单位!

在W3C的CSS2规范中规定长度值为零时候单位是可选的。只是可选而已,至于开发者加不加那就是自己的逻辑了。可是很多人建议在0值后面不加单位,理由是减小CSS文件大小。但我觉得即使是0值,单位也是很重要...
  • u014345677
  • u014345677
  • 2014年04月09日 15:14
  • 657

css3单位之间的换算

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了...
  • chenjing_amy
  • chenjing_amy
  • 2016年09月18日 16:38
  • 344

关于移动端css用rem单位的情况

写移动端的页面有一些了 试用过的方法大概总结一下: 1、字号单位px,宽度写百分数,高度写定值px 2、在css中用@media写媒体查询,以iphone6 为分界,字号单位用rem...
  • aamen1109
  • aamen1109
  • 2015年12月03日 13:03
  • 1368

CSS3中的rem单位

rem是CSS3新引入的单位,它改良了往期版本中em单位使用不方便的缺点。(如果想了解em单位的更多信息,可以查看之前的文章:CSS中的em单位)一、em单位带来的问题我们知道,em的长度是根据元素自...
  • H_O_L_Y
  • H_O_L_Y
  • 2016年07月07日 17:24
  • 856

css中字体单位px与em

css中字体单位px与empx是固定大小单位称为像素,em是非固定大小单位称为相对单位字。在ie中px单位的文本的字号不随浏览器字号设置的改变而改变。浏览器字号的设置将改变默认em的大小。例如:当ie...
  • newhappy2008
  • newhappy2008
  • 2007年02月22日 12:42
  • 3389
    个人资料
    持之以恒
    等级:
    访问量: 9518
    积分: 490
    排名: 10万+
    博客专栏
    最新评论