无意中翻到一个博客，提出了一个关于CSS的疑问，如何在不变动HTML布局模型的前提下，通过修改CSS改变布局的表现样式（原文在此：一个CSS的小问题）。解决这样的问题不难，不过没有什么实质意义（为何这么说？最后描述）。而且好像对方提出的HTML的布局模型也不太合理，稍作修改如下：
按照对方提出的三种表现形式：
第一种，最基本的
第二种，嗯
第三种，好像没什么难度吧？
以上三种基本布局的表现方式都在IE6、7，FF上通过。
多的不想说了，关键问题，为什么说解决这个没有什么意义呢？因为这些研究在大体上的研究能够通过，却会因为一些细节上的问题很难与标准化兼容，嗯，这个是实际工作的体验，好了，废话不多说了。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html>
3 <head>
4 </head>
5 <body>
6 <!-- 正式内容 -->
7 <div class="layout">
8 <div class="header">页头</div>
9 <div class="sidebar">
10 <div class="stats">
11 <ul><li>主页</li><li>目录1</li><li>目录2</li></ul>
12 </div>
13 <div class="other">
14 <p>这是其它内容</p>
15 <p>这是其它内容</p>
16 <p>这是其它内容</p>
17 </div>
18 </div>
19 <div class="content">
20 <p>正文内容</p>
21 <p>正文内容</p>
22 </div>
23 <div class="footer">页脚</div>
24 </div>
25 <!-- 内容结束 -->
26 </body>
27 </html>
2 <html>
3 <head>
4 </head>
5 <body>
6 <!-- 正式内容 -->
7 <div class="layout">
8 <div class="header">页头</div>
9 <div class="sidebar">
10 <div class="stats">
11 <ul><li>主页</li><li>目录1</li><li>目录2</li></ul>
12 </div>
13 <div class="other">
14 <p>这是其它内容</p>
15 <p>这是其它内容</p>
16 <p>这是其它内容</p>
17 </div>
18 </div>
19 <div class="content">
20 <p>正文内容</p>
21 <p>正文内容</p>
22 </div>
23 <div class="footer">页脚</div>
24 </div>
25 <!-- 内容结束 -->
26 </body>
27 </html>
按照对方提出的三种表现形式：
第一种，最基本的
1 body { margin: 0; }
2 * { margin: 0; padding: 0; }
3 .layout { width: 970px; margin: 0 auto; }
4 .header { height: 80px; clear: both; background: #CCC; line-height: 80px; }
5 .footer { height: 60px; clear: both; background: #CCC; line-height: 60px; }
6 .sidebar { float: left; width: 200px; background: green; }
7 .content { background: red; margin: 0 0 0 200px; }
2 * { margin: 0; padding: 0; }
3 .layout { width: 970px; margin: 0 auto; }
4 .header { height: 80px; clear: both; background: #CCC; line-height: 80px; }
5 .footer { height: 60px; clear: both; background: #CCC; line-height: 60px; }
6 .sidebar { float: left; width: 200px; background: green; }
7 .content { background: red; margin: 0 0 0 200px; }
第二种，嗯
1 body { margin: 0; }
2 * { margin: 0; padding: 0; }
3 .layout { width: 970px; margin: 0 auto; }
4 .header { height: 80px; clear: both; background: #CCC; line-height: 80px; }
5 .footer { height: 60px; clear: both; background: #CCC; line-height: 60px; }
6 .sidebar { float: left; width: 200px; background: green; }
7 .content { background: red; margin: 30px 0 0 200px; }
8
9 .other { margin-top: 30px; }
10 .stats { float: clear; background: blue; width: 970px; height: 30px; line-height: 30px; position: absolute; }
11 .stats ul li { display: inline; }
2 * { margin: 0; padding: 0; }
3 .layout { width: 970px; margin: 0 auto; }
4 .header { height: 80px; clear: both; background: #CCC; line-height: 80px; }
5 .footer { height: 60px; clear: both; background: #CCC; line-height: 60px; }
6 .sidebar { float: left; width: 200px; background: green; }
7 .content { background: red; margin: 30px 0 0 200px; }
8
9 .other { margin-top: 30px; }
10 .stats { float: clear; background: blue; width: 970px; height: 30px; line-height: 30px; position: absolute; }
11 .stats ul li { display: inline; }
第三种，好像没什么难度吧？
1 body { margin: 0; }
2 * { margin: 0; padding: 0; }
3 .layout { width: 970px; margin: 0 auto; }
4 .header { height: 80px; clear: both; background: #CCC; line-height: 80px; }
5 .footer { height: 60px; clear: both; background: #CCC; line-height: 60px; }
6 .sidebar { }
7 .content { background: red; margin: 0 220px 0 180px; }
8
9 .stats { width: 180px; background: green; float: left; }
10 .other { width: 220px; background: blue; float: right; }
2 * { margin: 0; padding: 0; }
3 .layout { width: 970px; margin: 0 auto; }
4 .header { height: 80px; clear: both; background: #CCC; line-height: 80px; }
5 .footer { height: 60px; clear: both; background: #CCC; line-height: 60px; }
6 .sidebar { }
7 .content { background: red; margin: 0 220px 0 180px; }
8
9 .stats { width: 180px; background: green; float: left; }
10 .other { width: 220px; background: blue; float: right; }
以上三种基本布局的表现方式都在IE6、7，FF上通过。
多的不想说了，关键问题，为什么说解决这个没有什么意义呢？因为这些研究在大体上的研究能够通过，却会因为一些细节上的问题很难与标准化兼容，嗯，这个是实际工作的体验，好了，废话不多说了。
