学习DIV+CSS网页布局之混合布局

学习DIV+CSS网页布局之混合布局是网页开发的基本技能之一，下面是混合布局的完整攻略：

学习DIV+CSS网页布局之混合布局是网页开发的基本技能之一，下面是混合布局的完整攻略：

什么是混合布局？

混合布局是指在网页布局设计中，既有定宽布局，又有流式布局（即根据浏览器窗口大小的变化自动调整布局），它结合了它们的优点从而设计出来的一种布局方式。混合布局还包含了多种不同的布局方式，例如固定宽度+流式布局、流式宽度+自适应布局等。

设计混合布局步骤

要实现混合布局，可以从以下几个步骤入手：

1.设计布局样式

混合布局的关键在于将网页分为几个不同的区块，并为每个区块设置相应的宽度（当它需要定宽的时候），或者将其宽度设置为自适应（当它需要流式布局的时候）。要注意在设计布局样式的时候，需要使用常见的分栏布局方式，例如列优先布局、行优先布局、漏斗布局等。

2.设置样式

在设计布局样式之后，需要设置相应的样式来控制元素的位置和布局。这包括设置元素的定位方式、宽度、最小和最大宽度、边框、填充和外边距等。

3.HTML结构

最后，在HTML文件中包含相应的CSS代码，为页面元素设置相应的样式。要注意，在CSS文件中，需要为不同的元素设置不同的类名或ID，以便在CSS中针对每个元素进行样式设置。为了实现混合布局，可以使用多种CSS技术，如 清除浮动、绝对定位、缩放等

示例1：固定宽度+流式布局

考虑如下为一个基本模型。

<div class="container">
    <div class="content">
        <h1>Title</h1>
        <p>This is some text.</p>
    </div>
    <div class="sidebar">
        <h2>Sidebar</h2>
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
        </ul>
    </div>
</div>

对于这个模型可以使用以下的CSS代码：

.container {
    width: 960px;
    margin: 0 auto;
}

.content {
    width: 620px;
    float: left;
}

.sidebar {
    width: 300px;
    float: left;
}

这个CSS代码将页面分为三个区块：容器、内容和侧边栏。

• 容器的宽度为固定宽度960px，并通过 margin: 0 auto; 将容器居中放置。
• 内容区块宽度固定为620px。（当屏幕宽度小于620px时，出现滚动条）
• 侧边栏的宽度为300px，同时将其浮动到左边。

示例2：流式宽度+自适应布局

将浮动改为display:inline-block，根据视口宽度自适应。

.container {
    display: block;
    margin: 0 auto;
    text-align: justify;
}

.content {
    width: 620px;
    display: inline-block;
    margin-right: -4px;
    vertical-align: top;
}

.sidebar {
    display: inline-block;
    width: 300px;
    vertical-align: top;
    zoom:1;
    *display:inline; /* IE6,7专用 */
}

这里的 CSS 代码将浮动改为了 inline-block。text-align: justify 设置了每行文字对齐，可以更好地体现流布局的特点。同时，由于 inline-block 会存在留白的问题，因此也为容器和内容之间设置了负外边距和 zoom：1 触发 haslayout 以清除留白。*display:inline; /* IE6,7专用 */ 用来修复 IE6/7 下 inline-block 的问题。

以上两个示例分别展示了混合布局中的固定宽度+流式布局和流式宽度+自适应布局两种布局方式。通过学习这些示例，我们可以掌握混合布局的基本方法和技巧，以及如何在实际项目中应用这些技能，实现更加复杂和灵活的混合布局。