主要是有三方面的优势：
搜索引擎友好，如果结构太深的话，不便于抓取，不利于seo蜘蛛对于网站结构的理解，从而影响收录或者排名；
代码的可维护度，如果太深的话，由于是多人开发，不便于同事读懂代码；
用js或jquery在操作dom的时候，方便理解和元素选取。
以上就是html页面中最好用扁平化的原因。
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.dow{display:blockwidth:202pxheight:52px line-height:52px text-align:center font-family:arial,verdana,sans-serif, '新宋体' font-weight:bold font-size:22px background:#428bcacolor:#fff text-decoration:none border: 3px solid #357ebd cursor:pointer}
.dow:hover{background:#1165ae}
.dow:active{background:#0d79d5}
</style>
</head>
<body>
<input name="xiazai" type="submit" class="dow" value="立即下载">
<br />
<br/>
<button name="xiazai" type="submit" class="dow">立即下载</button>
<br />
<br />
<a href="#" class="dow">立即下载</a>
</body>
</html>
效果图：
<input type="text" style="border:1px solid" />这个框就没有凹凸
你要是在样式表里写
input[type="text"]{border:1px solid}
那界面里所有的文本框就都没有凹凸样式。
