css布局与table布局的区别

2016-07-07 16:39 来源：www.chinab4c.com 作者：ecshop专家

实际上，传统的table布局方式只是利用了html的table元素所具有的零边框特性。由于table元素在显示的时候，使得单元格的边框和间距被设置为0，既不显示边框，所以可以将网页中的各个元素按照版式划分后，分别放入表格的单元格中，从而实现了复杂的排版组合效果。
这是一段典型的表格布局的html源代码：
<table width="100%" border="0" cellspacing="3" cellpadding="3">
<tr>
<td width="51%" rowspan="2" background="#000000"
<font color="blue">文本显示</font></td>
<td width="30%" background="#00ffff"> </td>
<td width="19%" background="#00ffff"> </td>
</tr>
</table>

表格布局的最大缺陷为大量样式设计代码混杂在表格单元格之中，使得可读性降低，维护成本也很高，加上大量的图片以及其他元素会导致网页文件量庞大，最终导致浏览器下载及解析速度很慢。

利用css来布局的代码：
<div class="content">内容</div>
在表示页面中定义个div，并使用此div的class名称：
.example{
float:left;/*表示div在页面中浮动在当前位置的左侧;*/
margin-top:10px;; /*表示div距上方有10像素的外边距;*/
margin-right:20px;/*表示div距右侧有20像素的外边距;*/
margin-bottom:10px; /*表示div距下侧有10像素的外边距;*/
margin-left:10px; /*表示div距左侧有10像素的外边距;*/
background-color:blue; /*表示div背景为蓝色;*/
text-align:center;/*表示div里的文字居中显示;*/
line-height::160%;/*表示div中的文字行高为原告的160%;*/
width:50%; /*表示这个div的宽度为所处的上一层位置的50%;*/
}
css布局实现了表现与内容的分离。更加便于维护与修改。

回答：
其实层布局很早就是一种推荐的排版选择，我记得最早接触的DW4就有层、表格两个操作习惯界面了，不过过去大家用得比较多的是表格，这两年比较流行DIV+CSS罢了