一起来看看css中的单位

一起来看看css中的单位

由于一直以来对于css中的百分比单位究竟是相对于谁的比例，这个问题不是很了解，所以就专门找资料看了一下。

<div class="container w500">
    .container的高度是被内容撑开的。
    <div class="test w50p h50p pt10p mt10p">w:250px, h:16px, mt:50px, pt:50px</div>
    <p>由于.container没有指定的高度，所以.test的h50p无效，.test的高度有内容撑开</p>
    <p>.test的margin-top:10%  padding-top:10%, 是相对于父元素的宽度而言的</p>
</div>

CSS还支持下列三种长度的相对单位：

• em 当前字体中字母M的宽度
• ex 当前字体中字母X的高度
• px 一个象素的大小
• rem 根元素(html标签)的字体大小
• 百分比

使用em和ex的目的就是为所给的字体设置合适的宽度，而没有必要知道字体有多大，在显示时，可通过比较当前字体中的M和X来确定。字体越大，所对应的em和ex也就越大。

px 像素，这个没什么好说的了。要知道像素也是个相对长度单位，比如用户显示器的物理分辨率是固定的，但是可以手工设置分辨率为800600 或 1024768 两种情况下 1像素的大小是不一样的

百分比总是相对于另一个值来说的。那个值可以是长度单位或是其他的。每一个可以使用百分比值单位指定的属性同时也自定义了这个百分比值的参照值。大多数情况下，这个参照值是此元素本身的字体大小。

好像 %单位是以最近的父容器的宽高为参考值的。 line-height 才是以字体的高度为参考值的

转载于:https://www.cnblogs.com/stephenykk/p/5406585.html