CSS学习六：布局剖析

1. CSS+DIV布局方案剖析

1.1. CSS排版观念

1. 比较新的版本方式，一般是将页面经过DIV进行分块，然后对各个块进行CSS定位。然后再在各个块中增加相应的内容。通过CSS排版，更新特别容易，甚至是页面的拓扑结构，都可以通过CSS属性来重新定位。

2. 将页面用DIV分块，首先要求对整体的框架有个定义，包括整个页面有哪些模块，各个模块的父子关系等。一般排版是都在外面加一个父DIV, 这样便于控制整个布局，对于每个DIV，还可以再加入块元素和行内元素。

3. 在设计网页时，首先应该先明确页面的框架，并且在HTML中建好框架，然后再考虑排版和各个细节。

1.2. 设计块的位置

1. 确定页面版型，包括Logo，状态信息，导航信息，用户信息，版权信息，内容区等。

2. CSS定位

整理好页面的框架后便可以利用CSS对各个块进行定位，首先实现页面的整体规划，然后往各个模块中添加内容，一般首先对body标记和container标记添加内容。

CSS时定位的时候，非常容易实现两个块的调动，主要设置float就可以了。

如果links的内容比content长，IE中footer就会贴在content下面，与links重合。这样的问题出现后，一般是将二者的float都设置为left，然后调整他们之间的距离。如果links在content的左方，就调整为右浮动。

1.3. 固定宽带居中板式

1. 方法1

设置固定宽度，将margin设置为0 auto，意味着块的上下为0，左右自动调整。

2. 方法2

使用left属性将块的左边框移动到页面的50%地方，然后再用margin-left将页面拉回固定宽度的一半距离。

1.4. 左中右板式

1. 一般来说，左栏和右栏固定，中间栏自动扩展。Left和right都采取绝对定位，因为不需要为middle设置实际宽度，因此他的实际宽度是100%，会占据整个页面。因此需要设置middle的margin-left和marin-right分别为左右框的宽度。这样可以解决中间栏的随意变更。

1.5. 块的背景色

1. 背景色不会自动的完全覆盖，需要特殊处理

2. 通用的解决办法是：

将body的颜色设置的和右侧的颜色一致，然后制作一个和左边一样的宽度和颜色的图片，然后作为container的背景色，在y轴重复。

3. 利用父块的背景色和背景图片来修改子块的方法在CSS排版中还有很多。

案例：电子相册

1.6. 表格与CSS排版的区别

表格的优势

1. 制作容易

2. 不存在背景色问题

3. 块与块之间的排版很清楚。

表格的缺点：

1. 很难升级

2. 轻松实现动态界面，可以调整各个块的位置。

3. 表格必须全部下载才能显示。而div可以分别的下载。

4. 数据与样式耦合在一起

案例：http://115.com/file/cl1khi5m#

转载于:https://www.cnblogs.com/kevinhigher/archive/2011/10/14/2211065.html