Position方式构建Browser/Server结构

2024-07-21 02:30:28

字体：大中小

来源：转载

供稿：网友

html+css 在网页构建（web page building）中的应用已经不是什么新鲜事了。轻盈的 div布局方式替换了笨重 table布局方式。而在 div布局方面多数人使用的是 float方式，div 在 float 的控制下忽左忽右好不自在。但我们今天要说的不是网页构建，而是 b/s结构软件界面构建。所以我想介绍另外一种方式 position方式。我个人比较喜欢这种方式，虽然很多人认为把 div 的 position属性设置为 absolute 后用 top属性和 left属性在页面中随意定位进行布局是一种极端菜鸟的方式，但在 b/s结构软件界面构建过程中这种 position方式的灵活绝对会给你带来意想不到的效果。当然我所说所写 position方式还存在很多的不足之处，这只是为了抛砖引玉，来给大家打开一个话题。

闲话：

既然我们是在说 b/s结构软件界面的构建，那就先来介绍一下 b/s结构吧！

b/s结构（browser/server结构）即浏览器和服务器结构。它是随着internet技术的兴起，对 c/s结构（client/server结构）的一种变化或者改进的结构。在这种结构下，用户工作界面是通过浏览器来实现（也就是说 b/s结构软件界面可以被理解为是建立在现有浏览器所能解释的 html；css；scrip等基础之上特殊的网页），这也就使得其具有了 c/s结构所不能比拟的跨平台性等优势…… （详见： http://www.VeVb.com/program/otherweb/other_web_2007_12_26_2534.html）

说完 b/s结构让我们来说说既然 b/s结构软件界面（其实就是一种特殊用途的网页）和普通网页有什么根本性的区别呢？

整页滚动。我个人不建议在 b/s结构软件界面中使用整页滚动。因为浏览器滚动条的实在是为了当初方便阅读那些绵长的文章，这样的阅读习惯也促使了之后的网页也变得绵长。不过作为网页这也没什么不好（你完全可以将这理解为现实生活中把小说印在卫生纸上来供人们阅读，拉动滚动条就好像是向上抽出更长的卫生纸），但作为软件界面，其强调的更多是控制而不是阅读，整页滚动条就显得不那么合适宜了。在我的观念中软件界面设计时应尽可能的将一类操作在一个界面上显示出来，而不是还有一部分（也许这是更重的功能）隐藏在下面需要拉动滚动条（试想某个核大国的总统在按动核按钮后才发现滚动条，而下边的页面是警告说对方遭受核打击后很快会进行核报复…… 所以我们要坚决反对使用核武器：p）。即便是受到屏幕尺寸的制约也尽可能的使用局部滚动条或者干脆使用 step-by-step方式来解决。你什么时候看见操作系统（不论是糟糕的win或是优秀的mac）中在设置的界面中使用滚动条（有一个例外是iphone，它在很多的设置界面中都使用了滚动条，但它有让人叫绝手指控制滚动的方式来弥补这一点）。
尺寸适应。分辨率一直是困扰网页设计者的问题，在网页设计中大多还是集中在页面宽度的问题上。适应800px还是1024px，这就好像当年哈密雷特口中的 "to be or not to be"，近年来随着显示器的变革这个问题还在愈演愈烈，除了刚刚说的2种分辨率，也许很多设计师脑中已经开始考虑1280px这个宽屏分辨率甚至更高的分辨率。当然也有的设计师干脆就只为800px，说这也是个不错的兼容性考虑，可惜我那1920px的显示器啊整天闲着两边。在 b/s结构软件界面中从来没有这么简单的办法，因为复杂的功能可能有着大量的操作设置或数据显示，一丝一毫的空间都不容的浪费。并且上一条也指出我们不想用整页滚动条来解决问题，这带来的不单是显示面积的限制，还有就是我们需要考虑的是宽度和高度双重尺寸适应问题。不单单是显示器分辨率，当浏览器不是最大化时界面同样要适应（mac系统根本就不存在最大化），也就是说界面要时时应对浏览器窗口尺寸大小而调整。所以利用一切可能的手段使页面可以自动适应浏览器窗口尺寸就成为了棘手但却是必须去做的事情。又由于这个问题同时又衍生出的新问题是软件界面在自动适应时不同区域不会是等比缩放尺寸的，势必有些区域随之放大缩小而有些区域固定不变。这一点可以参照 c/s结构软件界面，以大家常用的网页制作工具dreamweaver为例，主要的代码显示区域是随窗口尺寸的调整而调整，但上边的菜单及功能按钮区域、下边的属性及结果区域、右边的功能区域都是固定不变的或者单方向调整的（只调整宽度或者高度）。
布局结构。在布局上 b/s结构软件界面和网页设计上有相同的地方，结构无非就是"上-中-下" "左-中-右"，更复杂的结构也可由这2种衍生出来。但由于上一条后半段的所指出的问题，在布局时我一般倾向于将区域分成两类来对待：一类是主区域，页面中一般只有一个主区域，用来显示主要数据，当应对浏览器窗口尺寸变化时界面主区域随之变化尺寸；另一类是辅区域，页面中可以有多个辅区域，当应对浏览器窗口尺寸变化时界面辅区域固定不变或单方向调整。另外还有被我之前迫害了半天的滚动条。在 b/s结构软件界面中我建议尽量在同一界面上只使用一个滚动条或一对滚动条（x轴和y轴），因为在同一界面上出现的多个滚动条会让用户感到茫然。如果其他区域有滚动显示的需求时尽量用一些其他的方式来替代系统提供的滚动条。这唯一的滚动条一般被使用在主区域中，因为主区域即作为应对浏览器窗口尺寸变化而变化的区域，就表明了它可能对显示内容有较大量的要求，在低分辨率或窗口尺寸较小下的情况下滚动条会帮助其来完成任务。有了这些只是x轴和y轴的问题解决了，有时在 b/s结构软件界面实现中还要涉及z轴的问题，这是网页设计中一般较少见的。

开篇还没写什么呢就写了这么多的闲话，我这个人就是这个优点：比较能跑题！闲话还是留着以后再说，先转入正文吧！

|||

解释 position方式

position方?在根本上是利用了 html+css 的盒模型，在这里我就不过多的解释盒模型了。但要说的是由于不同浏览器或相同浏览器不同版本（且不说哪个浏览器的好坏，但同浏览器不同版本的极大差别只有某公司的某种浏览器的6.0版本和7.0版本才有这样的如黄色粘稠物一样的问题）之间的兼容性问题我们是采用了2种方式利用盒模型的。这2种方式分别来自 ie6.0 的非标准盒模型及 firefox 为代表的标准盒模型。

说道解释盒模型我们不能不提一下 doctype，因为 doctype 对浏览器解释盒模型有着非常大的影响。尤其体现在 ie6.0 的非标准盒模型的解释上。这其中的差异我就不多说了，这样的文章远有比我写的好的。在这里我只说一下我的做法：

代码1-1

很多人可能会说我的 doctype 写的有问题，因为按照标准 doctype 必须要书写在文件的首行。这可不是我发明的写法，最早看到这种写法是在 adobe.com（最近改版的版本已经放弃了这样的写法）。第一行是声明 xml文档编码为utf-8，第二行是声明 doctype 类型为 xhtml1-strict 。其实这算是 doctype 的一种hack写法，由于 doctype 没有写在第一行 ie6.0 及以下版本浏览器不解释，而 ie7.0/firefox/opera/safari 却可以解释。我测试了很久发现这确实是一种不错的选择，因为 doctype 没让ie6.0变得更好反而更糟。所以我之后的盒模型都是基于这种 doctype 写法基础来解释的。

先来说 ie6.0 的非标准盒模型，让人郁闷的是这个非标零件因为他的广泛使用却成为了我们必须考虑的标准。ie6.0在解释双盒嵌套（<div><div></div></div>）中，子div宽度被设置为100% 时其真实宽度为父div 宽度 – 父div 边线宽度 - 父div 内补丁宽度。父div 真实宽度为设置宽度。

代码1-2

以上边代码为例（见代码1-2），父div testdiv1 的真实宽度为设置的宽度600px，子div testdiv2 的真实宽度为600px - padding-left:100px - padding-right:100px = 400px
这代码对我们有什么意义呢？看一下代码1-2 的页面（ie6.0浏览器），从左到右分别是黄-蓝-黄，这有没有点像是”左-中-右”的布局结构呢？让我们修改一下代码再看看。

代码1-3

看一下代码1-3 的页面（ie6.0浏览器），从上倒下分别是黄-蓝-黄，这有没有点像是”上-中-下”的布局结构呢？可能你会想我是不是疯了！这个谁不知道啊！这是最简单不过的代码了……

让我们来让这些代码变得更有意义吧！在这之前我们需要先要引入一段基础代码。这段代码是我在做 b/s结构软件界面时所倾向于的做法。它可以帮助我们将页面格式化为无整页滚动条，并根据浏览器窗口尺寸时时自动适应。

|||

代码1-4

看一下代码1-4 的页面，并试着改变你浏览器的窗口尺寸。你会发现你得到了一个我许诺给你的。这段代码兼容 ie6.0/ie7.0/firefox/opera/safari 。其实这个是我对 body标签利用 position方式的重构。你也可以记住这种方法，因为接下来我们很多时候都会用这种方法。

好了，让我们利用这段基础代码使之前再简单不过的代码变得有意义吧！'

代码1-5

运行代码框
<?xml version="1.0" encoding="utf-8"?><!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>wiseinfo</title><style type="text/css"></style></head><body><div id="maindiv"><div id="leftdiv"></div><div id="middlediv"></div><div id="rightdiv"></div></div></body></html>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

看一下代码1-5 的页面（ie6.0浏览器），展现在你面前的是一个标准的”左-中-右”布局结构。maindiv 是父div，middlediv 是子div 也是主区域，middlediv 利用了其父div 的 padding属性来为两边的 leftdiv rightdiv 子div 也是辅区域 div留出空白。maindiv 相对 body 宽度值是100%，middlediv 相对 maindiv 宽度值是100%，这就使得 middlediv 的宽度相对浏览器窗口尺寸是自动调整的，高度亦同。leftdiv rightdiv 分别利用 left:0px; 和 right:0px; 来相对定位居左或居右对齐。试着改变你浏览器的窗口尺寸，看看效果吧！

你可能会说：”这算什么？ float方式也可以啊！css的代码还比这个简单呢！”

那让我们来修改一下代码吧！这样可以实现的”上-中-下”布局结构，并且相对浏览器窗口尺寸是自动调整。这是 float方式不能实现的。

代码1-6

运行代码框
<?xml version="1.0" encoding="utf-8"?><!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>wiseinfo</title><style type="text/css"></style></head><body><div id="maindiv"><div id="topdiv"></div><div id="centerdiv"></div><div id="bottomdiv"></div></div></body></html>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

这里要说明的是在代码1-6 中的 bottom:-1px; 这是因为ie6.0浏览器对css解释错误而产生的手动修复，当子div 使用 bottom属性并且其父div 的高度真实值为单数时，子div 的 bottom属性在浏览器表现出的真实值比设置值大1px。

不知道你看明白这些代码了没有，这些就是我所谓的 position方式来实现的结构布局。你可能要说：”拽什么拽啊！你看看你的方式在firefox中的样子吧！” 别急啊！之前不是说了么由于兼容性问题我们是采用了2种方式利用盒模型。现在让我们来说另外一种吧！

firefox 为代表的标准盒模型这才是未来的王道。现在的 ie7.0/opera/safari 都可以非常好的遵循标准盒模型。标准盒模型在解释双盒嵌套（<div><div></div></div>）中，子div 宽度被设置为100% 时其真实宽度为父div 的设置宽度。父div 真实宽度为设置宽度 + 父div 内补丁宽度 + 父div 边线宽度。也就是说父div 的盒被撑大了。并且在标准盒模型中通常 height属性是无效的。那我们有什么办法能解决这样的问题呢？看下边这段代码。

|||

代码1-7

看一下代码1-7 的页面（firefox浏览器），发现 maindiv 并没有被 padding 和 border 撑大了。这正是利用了 body>#maindiv 这一种css的hack写法来解决了问题。具体的我就不多说了，想必大家一眼就能看明白（其实就相当于你告诉浏览器说：我要做一个盒子，盒子大小你看着办，但盒子的左边和右边都要距离墙0px远）。但 padding属性还是在很多时候影响了 position方式，所以我们尽量不在标准盒模型的布局中使用它。可回想一下在非标准盒模型中 padding属性可是非常重要的一部分。那么为了兼容2种模型，我们使用另一种css的hack写法，在css属性前边加”_”来使这一属性只有ie6.0才能识别并解释，而标准盒模型的浏览器都不能解释这一css属性。

应用 position方式

综合我们上边说过的方法来整理一下代码让我们看看 position方式能带给我们的效果吧！

代码1-8

运行代码框
<?xml version="1.0" encoding="utf-8"?><!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>wiseinfo</title><style type="text/css"></style></head><body><div id="maindiv"><div id="leftdiv"></div><div id="middlediv"></div><div id="rightdiv"></div></div></body></html>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

这段通过 position方式构建出的代码可以完美的运行在 ie6.0/ie7.0/firefox/opera/safari 浏览器中来实现布局结构。如果有天你想要对你的软件界面进行又改了那你也通过单纯修改css样式表的方式来

修改布局结构而不用变动丁点html代码。

代码1-9

运行代码框
<?xml version="1.0" encoding="utf-8"?><!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>wiseinfo</title><style type="text/css"></style></head><body><div id="maindiv"><div id="leftdiv"></div><div id="middlediv"></div><div id="rightdiv"></div></div></body></html>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

通过对布局结构的组合你还可以通过 position方式构建出更复杂的结构。

代码1-10

运行代码框
<?xml version="1.0" encoding="utf-8"?><!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>wiseinfo</title><style type="text/css"></style></head><body><div id="maindiv"><div id="leftdiv"></div><div id="rightdiv"><div id="topdiv"></div><div id="centerdiv"></div><div id="bottomdiv"></div></div></div></body></html>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]