CSS 尺寸 单位
有几种 CSS 属性用到了 尺寸单位：
font-size定义文字大小border-width定义边框的宽度margin定义元素间的间距left/right/top/bottom定位和移动元素
最常用的单位是：
px像素%百分比em相对于父级的font-size来显示尺寸
像素
因为计算机屏幕使用像素来展示内容，所以像素是最常用的尺寸单位。
它可以用来设置元素的宽：
body{ width: 400px;}
设置文字大小：
body{ font-size: 20px;}
像素在CSS很直观，因为它们定义一个绝对的值：它们不受其它CSS属性的影响。
它被广泛的用在设置定位和间距上。
百分比
百分比是相对单位：它依赖它的父级或祖先元素。
比如，块级元素像段落，它会占据整个可用宽度。使用 CSS 来设置它只占50%可用宽度。
p{ width: 50%;}
百分比可以设置其它的CSS属性，像文字大小：
strong{ font-size: 150%;}
<p>There are <strong>important</strong> challenges ahead of us.</p>
There are important challenges ahead of us.
Em
em 是一个相对 单位：它依赖于元素的 font-size.
比如，如果父级元素的 font-size 是 20px，给子元素设置 font-size: 0.8em，子元素的 font-size 将被渲染成 16px。
不要把emCSS 尺寸单位和 CSS 选择器里的em弄混，em选择器是选择 HTML<em>元素的。
当你根据其它元素定义 HTML 元素文字大小事，em 单位就显得非常有意思。设计一个简单令人愉悦的网页，需要统一的视觉深度。你想让 <h1> 是正常文字大小的两倍，<h2>是1.5倍，而侧边栏偏小。用CSS实现起来很简单：
body{ font-size: 16px;}
h1{ font-size: 2em;} /* = 32px */
h2{ font-size: 1.5em;} /* = 24px */
aside{ font-size: 0.75em;} /* = 12px */
如果你决定更换页面正常的文字大小，标题和侧边栏的会相应的变化，你的网页将会保持视觉平衡，
通过修改一个值，所有的值都会被修改：
body{ font-size: 20px;}
h1{ font-size: 2em;} /* = 40px */
h2{ font-size: 1.5em;} /* = 30px */
aside{ font-size: 0.75em;} /* = 16px */
Rem
rem 单位和 em 相似， 但它不是依赖_父级_的值，而是依赖根元素的值，也就是 <html> 元素。
html{ font-size: 18px;}
body{ font-size: 1rem;} /* = 18px */
h1{ font-size: 2rem;} /* = 36px */
h2{ font-size: 1.5rem;} /* = 27px */
rem 和 em的不同点是，rem 的值是固定的，em 的值在不同元素之间展现出来的尺寸是不同的。
如果你设置 html{ font-size: 18px;}：
2rem它总是和36px是相等的。不管你在 CSS 的什么位置使用2em它总是父元素font-size的两倍，不一定是36px
简单的例子展示 2em 和 2rem 的区别：
html{ font-size: 20px;}
p{ font-size: 0.8rem;} /* = 16px */
p span{ font-size: 2em;} /* = 16px * 2 = 32px */
p strong{ font-size: 2rem;} /* = 20px * 2 = 40px */
span 依赖 p 的 font-size 的值，strong 依赖 html 的 font-size。
我们使用哪一种单位？
我推荐像素，像那些绝对值以及不依赖其它元素的设置。它很简单，可以用于设置文字大小，图片尺寸，表格宽度，定位…
百分比和 em 可以用来配合像素，尤其是相对的文字大小。
版权声明
本博客文章均为 范明非 原创或翻译，采用知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
原文地址： https://fanmingfei.com/posts/CSS_Size_Unit.html