CSS常见布局样式-有什么样式-样式具体介绍

较为常见的CSS布局样式主要是有两种：一是两列布局样式;二是三列布局样式;其中三列布局样式又分为“两列定宽、中间列自适应”的三列结构和三列自适应结构。

1、两列布局样式

许多网站都有一些共同的特点，即页面顶部放置一个大的导航或广告条，右侧是链接或图片，左侧放置主要内容，页面底部放置版权信息等。

在一般情况下，此类页面布局的两列都有固定的宽度，而且从内容上很容易区分主要内容区域和侧边栏。页面布局在整体上分为上、中、下三个部分，即header区域、container区域和footer区域。

其中的container又包含mainbox(主要内容区域)和sidebox(侧边栏)。

2、三列布局样式

三列布局在网页设计时更为常用。对于这种类型的布局，浏览者的注意力最容易集中在中栏的信息区域，其次才是左、右两侧的信息。

三列布局与两列布局非常相似，在处理方式上可以利用两列布局结构的方式处理。三列布局仅比两列布局多了一列内容，无论形式上怎么变化，最终还是基于两列布局结构演变出来的。

(1)“两列定宽、中间列自适应”的三列结构。

设计人员可以利用负边距原理实现“两列定宽、中间列自适应”的三列结构。

这里负边距值指的是将某个元素的margin属性值设置成负值，对于使用负边距的元素可以将其他容器“吸引”到身边，从而解决页面布局的问题。

(2)三列自适应结构。

实现三列自适应结构，要从改变列的宽度入手。首先，要将submainbox和sidebox两列的宽度设置为自适应;其次，要调整左、右两列有关负边距的属性值;最后，要对内容区域content容器的外边距margin值加以修改。