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.survivalescaperooms.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 全部選擇提示：你可先修改部分代碼，再按運行]