DIV+CSS布局和TABLE布局详解

htmlgood 2016-07-21

DIV+CSS布局和TABLE布局详解

1.1TABLE布局

1.1.1概述

HTMLtable元素渲染到网页上,其单元格的边框和间距均为0。传统TABLE布局方式就是利用table元素的这个特性,将网页中的各个元素按版式划分放入表格的各个单元格中,从而实现复杂的排版组合。

table布局的核心在于设计一个能满足版式要求的表格结构,将内容装入每个单元格中,间距及定格则通过gif占位图进行占位来实现。

表格布最常见的编码方式是混合式的,即在HTML标签<>之间嵌入一些样式代码。

1.1.2布局劣势

TABLE布局的最终结构是一个复杂的表格,不利于设计与修改。

TABLE布局的混合式编码,使得最后生成的网页代码除了表格本身的代码,还有许多无意义的透明gif占位图及其他元素,文件量庞大,最终导致浏览器下载及解析速度变慢。同时,大大降低了代码的可读性,增加了维护成本。

1.2Div+CSS布局

1.2.1概述

div标签是一种比表格简单的元素。语法简单,即<div></div>;功能单一,仅仅是用于将一段信息给标记出来用于后期的样式定义。通过div的使用,可以将网页中的各个元素划分到各个div中,成为网页中的结构体,而样式表现则由CSS来完成。

1.2.2布局优势

实现了表现与内容分离的布局目标。充分提高了代码的利用率,效率大大提高,后期维护成本显著降低。

Div+CSS布局不需要像表格一样通过其内部的单元格来组织版式,而是通过CSS强大的样式定义功能,这样可以比表格更简单更自由地控制页面版式及样式。

相关推荐

jiong / 0评论 2020-09-17