目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度
如果我们给body标签设置文字大小为100%，给其他文字都使用相对单位em，那这些文字都会受body上得初始声明的影响。这样做的好处就是，如果在完成了所有文字排版后，客户提出将页面文字统一放大一点，我们就可以只修改body的文字大小，其他所有文字也会相应变大
现代浏览器的默认文字大小都是16像素。因此一开始给body标签应用下列任何一条规则所产生的效果都一样：
font-size:100%;
font-size:16px;
font-size:1em;
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } #wrapper { width: 96%; margin-right: auto; margin-left: auto; background-color: #DDD; } #header { width: 97.9166667%; padding-right: 1.0416667%; padding-left: 1.0416667%; background-color: #FF0; } #header li { display: inline-block; margin-right: 2.6595745%; font-size: 2em; } #logo img { width: 33%; max-width: 300px; } </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"> <img src="http://pic002.cnblogs.com/images/2012/382256/2012080118323766.gif" alt="" /> </div> <div id="navigation"> <ul> <li><a href="">WHY?</a></li><li><a href="">SYNOPSIS</a></li><li><a href="">STILLS/PHOTOS</a></li><li><a href="">VIDEOS/CLIPS</a></li><li><a href="">QUOTES</a></li><li><a href="">QUIZ</a></li> </ul> </div> </div> <div id="sidebar"></div> <div class="content"></div> <div class="footer"></div> </div> </body> </html>