新的CSS开发人员常常并不真正了解所使用技术的工作原理,CSS框架的出现进一步恶化了这种局面.CSS框架试图通过标记和表现之间建立强耦合来简化CSS布局,但是这种耦合正是我们抛弃基于表格布局的主要原因.这种方法可能会让人迅速地得到想要的结果,但是最终会阻碍开发人员理解这种语言和实现修改的能力.
所有CSS布局技术的根本都是3个基本概念: 定位/浮动/外边距操控.
8.1 计划布局
在开始把设计转换为功能完整的模板时,设计者往往很想马上开始编写和处理图像.但是,这样很快就会遇到麻烦.相反,先做一点儿计划可以避免许多问题.
要想创建可伸缩且容易维护的CSS系统,首先应该检查设计,寻找重复的模式,这包括页面结构中的模式或在站点中元素反复出现的方式.在这个阶段,不应该太关注表现方式,而是应该注意结构和意义.
先把页面划分为大的结构性区域,比如容器/页眉/内容区域/页脚.这些区域在整个站点中往往是一致的,很少改变.如果用建筑来类比,可以把这些区域看做是建筑物的外墙.
然后将注意力转移到内容区域本身,开始建立网格结构.设计有多少个不同的内容区域?它们有什么差异?从布局角度来说,内容区域是确实不一样,还是可以被同等看待?大多数设计只几个独特的内容区域,所以应该寻找共同的特征而不是视觉表现.你可以把这些内容区域看做是建筑物的内部承重墙.
最后,在各个区域内容中寻找不同的布局结构.是否需要把某些信息分为两列/三列/四列?与前面不同,这些布局结构往往非常灵活,在各个页面之间常常有变化.可以把它们看做建筑物的隔断墙.将这些结构与前一步相结合,可以形成每个页面的结构计划.现在,要拿起绘图纸和彩色铅笔来,开始详细设计结构和尺寸.
结构设计完之后,现在可以开始关注不同类型的内容.内容是新闻稿文章还是公告?给每个内容块起一个有意义的名字,然后分析它们之间的关系.可能新闻稿和公告实际上没有什么区别,在这种情况下,把它们组合成一个内容类型是有道理的.
查看每个内容块的结构,看看不同的类型是否有共同的模式.例如,文章和新闻稿可能都有醒目的页眉和页脚,所以可以加上相应的标识.即使页眉和页脚看起来不一样,实际上也没关系,因为以后可以根据上下文应用样式.对于错误信息/搜索框/菜单项也是这样.因该尽量采用一般的类名,然后根据上下文应用样式.
找出模式病确定命名约定之后,最好马上开始定义将使用的元素,这是有好处的.例如,链接列表可能是一个无序列表,而文章可能是个div,其中包含h2/段落/锚元素.与几位同事提前定义元素,比随时添加元素容易得多.我们还发现应该记下颜色编码/尺寸等信息,这在开发阶段会有帮助.另外,可以在设计的打印稿上添加批注以便快速参考.
8.2 设置基本结构
假设我们要开发一个典型的三列设计模板.
通过分析设计发现,我们需要用一个容器元素让设计居中,其中包含页眉/内容区域/页脚.因此,标记应像下面这样:
<body>
<div class="wrapper">
<div class="header">
<!--Your header content goes here -->
</div>
<div class="content">
<!--Your page content goes here-->
</div>
<div class="footer">
<!--Your footer content goes here-->
</div>
</div>
</body>
因为最后3个区域放在容器中,我们先设置容器元素样式.
使外边距让设计居中
长文本行可能阅读起来很困难,让人厌恶 .现代显示器的尺寸越来越大,屏幕可读性问题变得越来越重要.缓解这个问题的一种方法是让设计居中.居中是指只占据屏幕的一部分,而不是横跨整个屏幕的整个宽度,这样就会创建比较短的容易阅读的行.
假设有一个典型的布局,希望让其中的容器div在屏幕上水平居中:
<body>
<div class="wrapper">
<div>
</body>
为此,只需定义容器div的宽度,然后将水平外边距设置为auto:
.wrapper {
width: 920px;
margin: 0 auto;
}
在这个示例中,我决定以像素为单位指定容器div宽度,让它适合分辨率为1024*768的屏幕.但是,也可以将宽度设置为主题的百分之几,或者使用em相对于文本字号设置宽度.
8.3 基于浮动的布局
用CSS进行布局有几种不同的方式,包括绝对定位和使用负的外边距值.我发现基于浮动的布局是最容易使用的,也是最可靠的.顾名思义,在基于浮动布局中,只需设置希望定位的元素的宽度,然后将它们向左或向右浮动.
因为浮动的元素不在占据文档流中的任何空间,它们就不再对包围它们的块框产生任何影响.为了解决这个问题,需要对布局中各个点上的浮动元素进行清理.非常常见的做法不是连续地浮动和清理元素,而是浮动几乎所有东西,然后在整个文档的"战略点"(比如页脚)上进行一次或两次清理.还可以使用溢出方法清理某些元素的内容.这是我目前最喜欢的方法,所以在后面的示例中都是用这种方法.
8.3.1 两列浮动布局
要在内容区创建一个两列布局,首先要创建一个基本的HTML结构.
<div class="content">
<div class="primary">
<!--main content goes here-->
<div>
<div>
<!--navigation and seconddary content goes here-->
<div>
</div>
这个设计得次要内容区域(包含站点导航)将位于页面的左边,主内容位于右边.但是,为了提高易用性和可访问性,我选择在源代码中将主内容区域放在次要内容的前面.首先,主要内容是页面上最重要的东西,所以在文档中应该出现.其次,这样可以方便屏幕阅读器用户,他们用不着经过可能很长时间的链接列表和不太重要的内容(比如站点宣传)就能找到主内容部分.
在创建基于浮动布局的布局时,一般将两列都向左浮动,然后使用外边距或内边距在两列之间创建一个隔离带.在使用这种方法时,列在可用空间内包得很紧,没有喘息的空间.如果浏览器表现好的话,这不是问题;但是差劲的浏览器会打乱紧密的布局,迫使一列退到另一列下面.
为了防止发生这种情况,需要避免浮动布局在包含它们的元素中太挤.可以不使用水平外边距或内边距来建立隔离带,而是让一个元素向左浮动,另一个元素向右浮动,从而创建视觉上的隔离.如果一个元素的尺寸意外地增加了几个像素,那么它不会立刻占满水平空间并下降,而只是扩展到视觉隔离带中.
实现这个布局的CSS非常简单.只需为每列设置想要的宽度,然后将次要内容向左浮动,将主内容向右浮动.还需要主内容中添加一点儿内边距,以避免其中包含的文本紧挨着元素的右边缘.注意,我还在所有浮动元素添加了display:inline.这个预防措施用来防止IE中的双外边距浮动产生的bug.
.content .primary {
width: 650px;
padding-right: 20px;
float: right;
display: inline;
}
.content .secondary {
width: 230px;
float: left;
display: inline;
}
因为总宽度是920像素,这些设置在每个浮动元素之间留出20像素宽的隔离带.正如前面提到的,这可以防止内容扩展导致浮动元素下降.
因为这些元素是浮动的,它们不在文档流中占据任何空间,这会导致页脚向上升.为了避免这种情况,需要对它们的父元素(div)应用溢出方法,从而清理浮动元素.
.content {
overflow: hidden;
}
现在你看到效果了:一个简单的两列CSS布局.
注意.第一个示例中主div中添加的右内边距现在要应用在第二个示例div上.因此,需要从一般样式中删除内边距,把它应用于特定样式
.content .primary {
width: 670px; /* width increased and padding remove */
float: right;
display: inline;
}
.content .primary {
width: 230px;
flaot: left;
display: inline;
}
.content .primary .primary {
width: 400px;
float: left;
display: inline;
}
.content .primary .secondary {
width: 230px;
padding-right: 230px; /* padding applied here instead */
float: right;
display: inline;
}
这样就形成了一个漂亮的三列布局.
