本文共 746 字，大约阅读时间需要 2 分钟。

固定布局与栅格系统概述

一、概念理解

固定布局是一种基于固定宽度的页面布局设计。在页面缩放至宽度小于页面宽度时，内容部分将不可见，需要通过滚动条查看全部内容。这类布局适用于需要严格控制容器宽度的场景。

二、栅格系统基础

固定列宽的栅格系统通常由列（Column）、槽（Gutter）和外边距（Margin）三个部分构成。列宽决定了容器内部的宽度，槽宽决定了列与列之间的固定间距，而外边距则是指容器边界与内容之间的间隔。

要构建栅格系统，首先需要明确容器的宽度和所需的列数。

三、CSS栅格系统实现

固定列宽的栅格系统主要包含以下内容：

容器设置：960像素宽度的容器通常采用居中布局，需设置 width: 960px，同时左右外边距可设置为 auto，或简单地使用 margin: auto。

栅格命名：栅格命名一般采用“grid”或“column”作为前缀，数字作为后缀表示栅格列数。例如，grid_1、grid_2 等命名方式。

栅格属性设置：栅格需要设置 float: left 属性，并配置栅格之间的间距。例如，960gs设置左右外边距为10像素，类似于 Bootstrap 2 的实现方式，只需设置一侧边距即可完成。

列宽计算：基于12列栅格系统，grid_1 栅格的宽度为60像素，加上左右外边距80像素。对于第 n 列，宽度计算公式为 (80*n - 20) 像素。

注意事项

1. 某些栅格系统（如 Bootstrap 2）需要在容器内增加一层，通过设置 `margin-left: -10px` 等方式弥补列宽和外边距的差异。 2. 完善的栅格系统通常会提供辅助功能，如偏移量、清除浮动等，提升开发效率。

通过以上方法，可以轻松构建固定列宽的栅格系统，满足多种页面布局需求。

转载地址：http://oqoy.baihongyu.com/