欢迎来到 jackNEss'窝窝
I like simple mind

栅格化布局技术分析——坍塌式布局

2011年09月03日

坍塌式布局

在我们日常的项目中,web designer 们都按照着网页栅格化来进行设计页面,然后交给我们前端进行页面制作等,

基于栅格化布局,仔细分析各种方法的技术实现,可以发现下面三种技术被经常使用:

  • 浮动 float
  • 负边距 negative margin
  • 相对定位 relative position

这是实现布局的三个最基本的技术层面。只要巧妙运用,就能“拼”出各种布局的实现方案。

在选用布局的时候应该考虑的因数有:

  • 实现了内容与布局的分离,即Eric提到的Any-Order Columns.
  • 确保任何一栏为最高栏时不会出问题。
  • 良好的兼容性。
  • 易于修改。
  • 重要的内容放前面(书写HTML文档有个非常重要的原则)。

下面我就以三栏布局为例对我了解到的几种布局进行分析:

坍塌式布局(Collapse Layout)

这种布局是无意中在浏览国外的网站的时候发现的,粗略看了下觉得还ok。

技术层面:

  • 浮动 float
  • css hack


下面是代码部分:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Collapse layout</title>
<style type="text/css">
<!--
*{ margin:0; padding:01;}
.content_box{
	height:50px;
	padding:10px;
	background:#e1e1e1;
	border:1px dotted #ccc;
}
.bodyArea{ background:#f0f0f0;}

/*-- 关键部分代码 --*/
.bodyArea{ width:950px; margin:50px auto; height:1%;}
.bodyArea:after{ content:"."; display:block; clear:both; height:0; overflow:hidden;}
.side{ float:left; width:230px;}
.extra{ float:right; width:190px;}
.main{ margin:0 200px 0 240px; _margin:0 197px 0 237px;}
-->
</style>
</head>
<body>

<div class="bodyArea">
	<div class="side">
		<div class="content_box">side:230px;</div>
	</div>
	<div class="extra">
		<div class="content_box">extra:230px;</div>
	</div>
	<div class="main">
		<div class="content_box">main:510px;</div>
	</div>
</div>
</body>
</html>

演示地址:http://www.jackness.org/lab/2011/grid_layout/example_collapse_layout.html

这种可以说是 浮动布局的升级版。

优点:

  1. 确保任何一栏为最高栏时不会出问题。
  2. 实现了内容与布局的分离。
  3. 能再定宽布局和流体布局之间切换

缺点:

  1. 主体内容展现顺序偏后

    • 从seo角度出发,我们是希望主体内容越靠前越好的,而这个坍塌式布局 主体内容层摆在了 2个侧栏之后,不太好;
    • 从用户角度去看,如果用户当前网速不给力的时候,那么展现给用户的页面顺序是:左侧栏 =》 右侧栏 =》主体,这样就有点儿主次不分了;
  2. 采用了 css hack 技术,而且个人感觉还是比较恶心的那种 数值的 hack,我个人宗旨是,这种数值的hack…能不用就不用,因为,有可能你现在弄得好好的,因为你熟悉你自己的代码,但是如果交给别人的话,没事还好好的,一旦出现问题,调试的过程中,调了半天 没动静,结果一看,尼玛原来是 用了 css hack 针对性地 对ie6进行了个别处理(@#¥%…#¥%),所以这种事情,能不做就不做呗
  3. 兼容性也存在隐患,在主体中 如果有内容模块比 main 容器要宽的时候,那么 main 容器就会往下掉,造成页面错版。

    演示地址:http://www.jackness.org/lab/2011/grid_layout/example_collapse_layout_bug.html

结语:

可以使用,但是就是有日后的隐患。

分类HTML + CSS
阅读 3,653
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS