CSS是如何控制布局的，与表格有什么不同？

html-css040

CSS是如何控制布局的，与表格有什么不同？,第1张

css与表格不同，css是样式和代码分离也就是一个页面或几个页面对应一个样式表或者多个样式表。而表格是所见即所得，样式在表格里面写。因此当一个页面需要做局部的调整，如果是css写的只需要找到css文档，找到所修改的内容所对应的样式表直接修改就好了。而table的则需要找到页面的对应位置(table页面代码好乱的，你懂得)，然后修改样式。再有如果所应用的页面是静态的例如cms(内容管理系统)所生成的页面是静态页面，如果用css做只需要修改css，那么所有引用css的都自动改变样式了，而是用table的则需要找到每个页面，都进行修改。

这样说你应该懂了吧。来点简单的添加长宽高吧。

css的：

样式表：

#wrap{width:100pxheight:50px}

页面代码：

<div id="wrap">内容</div>

table的

页面代码

<table width="100px" height="50px">

<tr><td>内容</td></tr>

</table>

1、一列布局：一般都是固定的宽高，设置margin : 0 auto来水平居中，用于界面显著标题的展示等。

2、两列布局：说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。

3、三列布局：两侧定宽中间自适应,首先设置父级元素的宽度，可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动，设置margin，调整间距。同样注意清除浮动的影响。

4、混合布局：在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局，小的模块可以再逐级同理划分。