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

html-css08

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>

左右定宽度，分布向两边浮动，中间如果没设置溢出处理默认宽度是100%，设置后就会截取两边的宽度从而实现中间自适应

左右两边定好宽度后，主要用flex:1来占满剩余空间从而实现中间自适应

使用table不仅可以在实现页面自适应的部分，还可以用table-cell来实现对行锤值对齐

4.float+margin实现三列布局

把左右两边的宽度固定然后左右浮动，中间自适应部分用margin：0 和 左右两边的宽度

给左右两边设置相对定位，并分别设置距离页面距离为0，中间自适应部分通过margin：0 左右宽度 来自适应

主要是使用grid-template-columns这一属性时中间的盒子自适应，这一属性定位列属性，比如要定义三列就写3个数值，每个数值代表每一个项目的宽度，auto是自适应占满剩余空间