您的位置：首页 > Web前端 > CSS

CSS中你可能不知道的单位

2016-03-22 15:04 381 查看

关于界面的布局是做前端的一个永恒的话题，无论你是用哪一种语言做何种产品，都离不开界面，那在界面布局里扮演重要角色的自然要属设定UI的长宽高的单位了，在xaml里设计的时候对于长宽高的单位并没有界定，然而CSS中就有着天差地别，本次主要探讨这个问题，ps:说了这么多还没开始，真是啰嗦，哈哈，例行惯例啦，就像武侠片一下，开打前都会有一段对白的啦。

1.话不多说，首先要说的单位是px（Pixel），像素。这个单位我们在实际操作过程中算是用到最频繁的了，它是一个相对值，它的大小取决于屏幕的分辨率，好比一个800*600的屏幕，1px就是一个像素点大小，指的就是把屏幕分成480000（800*600）份等面积中的一份大小，如果这时候把屏幕分辨率调大的话例如1366*768，那1px就又会相对会变得小一点了。

2.pt（point），与px不同pt是一个绝对单位，长度等于1/72英寸，也就是0.39/72厘米，这是印刷业常用的的单位，一般用于已经明确知道的设备中。由于是绝对单位，它不会随着屏幕分辨率或者大小变化而变化，1pt始终会占据1/72英寸。

3.em，它是一个相对长度单位，是一个比率1em=100%，但是它是相对于当前对象内文本的尺寸，如果文本对象内文本尺寸被设置为12px，则1em=100%*12px。如果对行内字体的尺寸未被设置，则默认为浏览器的默认字体尺寸16px。

<body style="font-size:16px;">
<p style="font-size:1em;">This is a paragraph.</p>
<p style="font-size:2em">This is a paragraph.</p>
<div style="width:3em;height:3em;background:red;font-size:0.2em">
<p style="font-size:2em">This is a paragraph inside div.</p>
</div>
</body>

如上面的例子，给body设置的font-size是16px，第一个<p>的font-size=1*16px；第二个<p>的font-size=2*16px；第三个<p>由于对其父对象<div>设置了文本尺寸为2em,所以其尺寸将为16px*0.2*2。

4.rem，即是Root em，是CSS3中新定义的一种单位，它也是一个相对长度，与em不同的是rem相对的只是html的根元素。

<body style="font-size:16px;">
<p style="font-size:1em;">This is a paragraph.</p>
<p style="font-size:2em">This is a paragraph.</p>
<div style="width:3em;height:3em;background:red;font-size:0.2em">
<p style="font-size:1rem">This is a paragraph inside div.</p>
</div>
</body>

此时第三个<p>的font-size为1*16px;

5.vw，即view width是基于窗口的宽度大小的单位，css3引入的新单位，例如当你的窗口宽度为100mm时，1vw=100mm/100*1=1mm，目前该单位适用于所有主流浏览器，但是IE必须要在10以上。

6.vh，即view height是基于窗口高度大小的单位，同vw一样，当你窗口高度为100mm时，1vw=100mm/100*1=1mm，在实际运用中，制作可随窗口大小变化的轮播图是极为有效的。

7.vmin，vmin指相对于视窗高度宽度中最小的一个值，即为vw和vh中较小的值，假如视窗高度为200mm，宽度为100m，则1vmin=100mm/100*1。

8.vmax，vmax指相对于视窗高度宽度中最大的一个值，即为vw和vh中较大的值，假如视窗高度为200mm，宽度为100m，则1vmin=200mm/100*1。

9.ex，ch，ex为小写字母x的高度，ch为数字零的宽度，与em，rem相同的是他们都依赖于font-size，但ex，ch还依赖于字体的font-family。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航