分享几种传统CSS布局方法[上]
作者：admin 发布时间：2022-10-12 点击数：
<p>
本章主要探讨 HTML5 中 CSS 早期所使用的传统布局，很多情况下，这些布局方式还是非常有用的。
</p>
<h2>
一．布局模型
</h2>
<p>
在早期没有平板和智能手机等移动设备大行其道的时期，Web 页面的设计主要是面向PC 端电脑分辨率展开的。这种分辨率比例比较单一，基本上只要满足最低分辨率设计即可。一般来说有 4:3、16:10、16:9 这样的主要分辨率。那么，从这种比例上来看，长度总是大于宽度的。从最低分辨率 1024 * 768 设计即可。为了使浏览器底部不出现滚动条，需要减去适当的宽度，比如减去 28，最终固定长度设置为 996 即可。当然，也有一些网站在近两年讲最低分辨率设置为 1280 减去滚动条宽度，因为大显示器逐步主流。
</p>
<p>
除了刚才所说的固定长度的布局，还有一种是流体布局，就是布局的长度为百分比，比 如 100%。不管你是什么分辨率，它都能全屏显示，当然，局限性也特别大，只适合一些单一页面，复杂的页面，会随着不同浏览器产生各种阅读障碍。
</p>
<p>
我们创建一个三行两列模型。并采用表格布局和浮动布局，构建固定和流体布局的方式，模型图如下：
</p>
<p>
<img style="max-width:100%!important;height:auto!important;" src="/uploads/allimg/20221012/1-221012142423108.jpg" title="分享几种传统CSS布局方法[上](图1)" alt="1.jpg"/>
</p>
<h2>
二．表格布局
</h2>
<p>
表格布局，就是通过设定固定的单元格，去除表格边框和填充实现的布局。当然这个布局非常不建议使用，只是教学了解。表格应该用它最为语义的地方，就是二维表的数据显示。
</p>
<p>
<strong>1.固定布局</strong>
</p>
<p>
HTML 部分
</p>
<pre class="brush:html;toolbar:false"><table border="0">
<tr><td colspan="2" class="header">header</td></tr>
<tr>
<td class="aside">aside</td>
<td class="section">section</td>
</tr>
<tr><td colspan="2" class="footer">footer</td></tr>
</table></pre>
<p>
CSS 部分
</p>
<pre class="brush:css;toolbar:false">body {margin:0;}
table {margin:0 auto; width: 960px; border-spacing: 0;}
.header {height: 120px; background-color: olive;}
.aside {width: 200px; height: 500px; background-color: purple;}
.section {width: 760px; height: 500px; background-color: maroon;}
.footer {height: 120px; background-color: gray;}</pre>
<p>
<img style="max-width:100%!important;height:auto!important;" src="/uploads/allimg/20221012/1-221012142450933.gif" title="分享几种传统CSS布局方法[上](图2)" alt="2.gif"/>
</p>
<p>
<strong>2.流体布局</strong>
</p>
<p>
表格的固定布局改成流体布局非常简单，只需要设置 table 为 100%即可。
</p>
<pre class="brush:css;toolbar:false">table {
width: 100%;
}</pre>
<p>
<img style="max-width:100%!important;height:auto!important;" src="/uploads/allimg/20221012/1-221012142511J4.jpg" title="分享几种传统CSS布局方法[上](图3)" alt="3.jpg"/>
</p>
<h2>
三．浮动布局
</h2>
<p>
浮动布局主要采用 float 和 clear 两个属性来构建。
</p>
<p>
<strong>1.固定布局</strong>
</p>
<p>
HTML 部分
</p>
<pre class="brush:html;toolbar:false"><header>header</header>
<aside>aside</aside>
<section>section</section>
<footer>footer</footer></pre>
<p>
CSS 部分
</p>
<pre class="brush:css;toolbar:false">body { width: 960px; margin: 0 auto; color: white;}
header {height: 120px;background-color: olive;}
aside {width: 200px; height: 500px; background-color: purple; float: left;}
section { width: 760px; height: 500px; background-color: maroon; float:right;}
footer { height: 120px; background-color: gray; clear:both;}</pre>
<p>
<img style="max-width:100%!important;height:auto!important;" src="/uploads/allimg/20221012/1-221012142550c8.jpg" title="分享几种传统CSS布局方法[上](图4)" alt="4.jpg"/>
</p>
<p>
<strong>2.流体布局</strong>
</p>
<p>
流体布局只要更改 body 元素的限定长度为 auto 或 100%。然后左右两列分别设置 20%和 80%即可。
</p>
<p>
CSS 部分
</p>
<pre class="brush:css;toolbar:false">body {width: auto;}
aside {width: 20%;}
section {width: 80%;}</pre>
<p>
<img style="max-width:100%!important;height:auto!important;" src="/uploads/allimg/20221012/1-221012142603542.jpg" title="分享几种传统CSS布局方法[上](图5)" alt="5.jpg"/>
</p>
