99久久精品免费观看国产_久久无码人妻一区二区三区_50岁熟妇的呻吟声对白_毛很浓密超多黑毛的少妇

具有靈活變(bian)動寬(kuan)度(du)(du)特性的(de)(de)布(bu)(bu)局，也被稱為流式布(bu)(bu)局，這種布(bu)(bu)局會根據網頁瀏(liu)(liu)覽器的(de)(de)窗(chuang)口(kou)大(da)小相應地(di)調整自(zi)(zi)己的(de)(de)寬(kuan)度(du)(du)。在(zai)這類布(bu)(bu)局中，容器中的(de)(de)主體部分的(de)(de)寬(kuan)度(du)(du)以(yi)當(dang)(dang)前瀏(liu)(liu)覽器的(de)(de)窗(chuang)口(kou)寬(kuan)度(du)(du)為基(ji)(ji)準(zhun)(zhun)，按照一定(ding)(ding)的(de)(de)百分比進行(xing)定(ding)(ding)義。當(dang)(dang)瀏(liu)(liu)覽器的(de)(de)尺(chi)寸(cun)發生(sheng)變(bian)化時，布(bu)(bu)局也發生(sheng)變(bian)化，因為用戶調整窗(chuang)口(kou)的(de)(de)操(cao)作已經改變(bian)了(le)布(bu)(bu)局所(suo)依賴的(de)(de)基(ji)(ji)準(zhun)(zhun)。換句話(hua)說(shuo)，這類布(bu)(bu)局中各(ge)區(qu)域的(de)(de)寬(kuan)度(du)(du)會隨(sui)著用戶瀏(liu)(liu)覽器窗(chuang)口(kou)的(de)(de)調整自(zi)(zi)動變(bian)化。所(suo)以(yi)，如果(guo)用戶覺得正在(zai)瀏(liu)(liu)覽的(de)(de)文章的(de)(de)行(xing)寬(kuan)不是很合適，通過(guo)簡(jian)單地(di)調整窗(chuang)口(kou)尺(chi)寸(cun)，內(nei)容區(qu)域就會自(zi)(zi)動進行(xing)調整。

這類布(bu)局中(zhong)(zhong)，布(bu)局元(yuan)素(su)之間的(de)(de)(de)(de)(de)關系至(zhi)關重要，因為布(bu)局中(zhong)(zhong)子元(yuan)素(su)的(de)(de)(de)(de)(de)寬(kuan)度(du)是(shi)(shi)以父(fu)元(yuan)素(su)的(de)(de)(de)(de)(de)百分比設(she)(she)(she)(she)置的(de)(de)(de)(de)(de)（不是(shi)(shi)相鄰的(de)(de)(de)(de)(de)元(yuan)素(su)）。例如(ru)，如(ru)果布(bu)局容器(qi)的(de)(de)(de)(de)(de)寬(kuan)度(du)設(she)(she)(she)(she)置為90%（他的(de)(de)(de)(de)(de)父(fu)元(yuan)素(su)為瀏覽器(qi)窗口），導(dao)航區(qu)的(de)(de)(de)(de)(de)寬(kuan)度(du)設(she)(she)(she)(she)置為80%，那么(me)導(dao)航區(qu)的(de)(de)(de)(de)(de)寬(kuan)度(du)就是(shi)(shi)瀏覽器(qi)寬(kuan)度(du)的(de)(de)(de)(de)(de)72%（1×0.9×0.8=0.72）。由此可見，設(she)(she)(she)(she)計流式布(bu)局需要對(dui)設(she)(she)(she)(she)計的(de)(de)(de)(de)(de)結(jie)構有深(shen)度(du)的(de)(de)(de)(de)(de)了解。對(dui)設(she)(she)(she)(she)計師而言，過程也許痛(tong)苦，但是(shi)(shi)成(cheng)功的(de)(de)(de)(de)(de)設(she)(she)(she)(she)計會讓網站更(geng)加(jia)靈活地面(mian)對(dui)使用不同終(zhong)端的(de)(de)(de)(de)(de)用戶(hu)[注釋]。

流式布局(ju)能夠盡可能多地使用瀏覽(lan)器的(de)可用空(kong)間，設計(ji)師可以有足夠的(de)空(kong)間來平(ping)均排布頁面中的(de)內容。設計(ji)得當的(de)布局(ju)可以保持空(kong)白區域始終一致，不管瀏覽(lan)器或者屏幕(mu)的(de)分辨(bian)率(lv)如何變化，這樣的(de)設計(ji)顯(xian)(xian)得更加一致并且對(dui)用戶友好。同時(shi)，這類布局(ju)也消除了低分辨(bian)率(lv)顯(xian)(xian)示器上刺眼(yan)的(de)水平(ping)滾動條。

和固定(ding)寬(kuan)度布局不(bu)同，流(liu)式(shi)布局賦予用戶(hu)更大的(de)自(zi)由來(lai)調整布局的(de)寬(kuan)度。

和固定寬度布局不同，流式布局賦予用戶更大的自由來調整布局的寬度。伴隨著這種自由，青島網站設計師將嚴格、一致的(de)像素布局轉移到一種更(geng)加靈活（也(ye)因(yin)此更(geng)有風(feng)險）的(de)環境中來。這(zhe)時對(dui)網(wang)站中特定(ding)元(yuan)素之間比例關系(xi)的(de)定(ding)義變得(de)相(xiang)當抽象(xiang)和困難(nan)。這(zhe)也(ye)正(zheng)是多數設計(ji)師避免使用流式布局的(de)原因(yin)，這(zhe)種布局剝奪(duo)了(le)設計(ji)師在像素級精度上(shang)預(yu)測定(ding)位元(yuan)素的(de)能力。

設(she)計(ji)師(shi)在用相對(dui)值替代絕對(dui)值的(de)過程中(zhong)，經常(chang)將這(zhe)些值進位或者去(qu)位（例(li)如，將15.43333% 變(bian)成15.43% 或者15%），這(zhe)樣設(she)計(ji)就變(bian)得更(geng)加不精確(que) 。最后的(de)設(she)計(ji)也許在一些低分辨率(lv)屏幕上表現良好，但是(shi)在高分辨率(lv)情況下會(hui)發生奇怪的(de)現象，諸如布(bu)局中(zhong)顯著的(de)空白(bai)、內(nei)容(rong)區(qu)太寬難以閱(yue)讀等。

事實上，內容區過寬的(de)(de)(de)結果是(shi)流(liu)式(shi)(shi)布局最顯(xian)著的(de)(de)(de)缺點(dian)。由(you)于內容區的(de)(de)(de)寬度取決(jue)于用戶(hu)視窗(chuang)的(de)(de)(de)大小，寬屏(ping)的(de)(de)(de)用戶(hu)會發現每一行(xing)都是(shi)如(ru)此(ci)的(de)(de)(de)長，以至于閱讀起來很不(bu)(bu)舒(shu)服(fu)。如(ru)果一個使用流(liu)式(shi)(shi)布局的(de)(de)(de)頁面中沒有(you)這么多的(de)(de)(de)文(wen)字，用戶(hu)將看到孤零(ling)(ling)零(ling)(ling)的(de)(de)(de)一行(xing)字，側邊欄高得非常不(bu)(bu)協調，周邊還充斥著大量的(de)(de)(de)空白(bai)。

為(wei)了獲得(de)最佳(jia)的閱讀效果（每行47 ;到86 個英文(wen)字母），設(she)(she)計師通常為(wei)內(nei)容(rong)區 #content-block[注釋]設(she)(she)置(zhi)在此基礎上加10% 的寬(kuan)度。除非設(she)(she)計的可讀性會(hui)(hui)在低分辨率情況下(xia)變(bian)得(de)很糟糕，一般不會(hui)(hui)設(she)(she)置(zhi)最小寬(kuan)度。

在CSS 中，使(shi)用CSS 屬(shu)性(xing)“max-width”來定義(yi)布(bu)局的最大(da)寬度(du)。幾乎所有(you)

的主(zhu)流瀏覽器都(dou)支持(chi)這(zhe)個屬性（IE 7+、Firefox 1+、Safari 2+、Opera 9.2+），當(dang)然IE 除(chu)外。

為解決這個(ge)(ge)問題，設計師通常會在(zai)內(nei)容區域設置(zhi)一(yi)個(ge)(ge)最大寬度，以(yi)此來將(jiang)布局限制到一(yi)個(ge)(ge)較為理(li)想的寬度。

代碼檢查用(yong)戶相對瀏覽器寬度的字體(ti)尺寸(cun)設置（以(yi)pt 為單位(wei)）。Tofte 認為，不管在(zai)什么情況下，使用(yong)默認12pt 的字體(ti)時，500px（像素）要(yao)比30em 寬，所以(yi)上面的代碼中使用(yong)了30em 作為布局的寬度。

其原理是，如果內容部分的寬度(du)大于500 像素與12 的比值(zhi)乘以用戶字體的設置(zhi)，就(jiu)將(jiang)寬度(du)設置(zhi)為30em。相反的情(qing)況(kuang)下(xia)，讓寬度(du)保(bao)持自動（ 使(shi)用了“auto”屬性） 。

由于動態樣式(shi)屬性沒有包含在W3C 的CSS2 規范中，使用這種方法會讓樣式(shi)表無法通過(guo)驗證。讀(du)者可以根據自(zi)身(shen)情況使用，能夠為市場上仍然是(shi)最(zui)流行的瀏覽器提供帶(dai)有最(zui)小(xiao)寬(kuan)度(du)和最(zui)大寬(kuan)度(du)的流式(shi)布局，付出這點(dian)代價(jia)也許是(shi)微不足道(dao)的。

Clearleft 山東網站制作就是使(shi)用了自(zi)適應寬度布局(ju)的(de)(de)例子(zi)。下面(mian)兩幅圖展示了網站在(zai)1280 和800 像素情況下的(de)(de)表(biao)現(xian)。注意看內(nei)容區域是如何自(zi)動(dong)調整(zheng)“We makewebsites better”這句話的(de)(de)，在(zai)1280 像素時的(de)(de)兩行變成了800 像素時的(de)(de)三行。

在為自適應(ying)(ying)布(bu)局(ju)選(xuan)擇一個合適的(de)(de)寬(kuan)(kuan)度(du)(du)時，使用(yong)(yong)“width ：auto”或者(zhe)其他的(de)(de)百分比值會(hui)非常合理(li)，這樣(yang)確保(bao)了布(bu)局(ju)自動占據瀏覽器(qi)的(de)(de)可(ke)用(yong)(yong)空間。對于最(zui)(zui)小寬(kuan)(kuan)度(du)(du)，可(ke)以使用(yong)(yong)像(xiang)素(su)值，例(li)如(ru)760（像(xiang)素(su)）。這個限(xian)制確保(bao)了所有自適應(ying)(ying)布(bu)局(ju)即使在最(zui)(zui)低的(de)(de)分辨率情(qing)況(kuang)下仍(reng)保(bao)持可(ke)讀。至于最(zui)(zui)大寬(kuan)(kuan)度(du)(du)，通常的(de)(de)做法(fa)是使用(yong)(yong)em 值（例(li)如(ru)90em），這樣(yang)就(jiu)能在文(wen)本寬(kuan)(kuan)度(du)(du)不(bu)(bu)失控的(de)(de)情(qing)況(kuang)下，保(bao)持不(bu)(bu)同分辨率情(qing)況(kuang)下的(de)(de)穩(wen)定(ding)。讓人高興的(de)(de)是，如(ru)果(guo)用(yong)(yong)戶調整(zheng)瀏覽器(qi)的(de)(de)字體設(she)置，最(zui)(zui)大寬(kuan)(kuan)度(du)(du)會(hui)發生相(xiang)應(ying)(ying)的(de)(de)變(bian)化(hua)。

一個(ge)經(jing)典(dian)的計算(suan)這(zhe)個(ge)比例的方(fang)法是(shi)，通過(guo)將給定像素高度元(yuan)素與容器的尺寸相除得(de)到的字(zi)體大(da)小（即上(shang)下文(wen)）。

在實(shi)現(xian)自適應布局時(shi)，我們使用了相對值來(lai)表(biao)示(shi)外(wai)邊(bian)距(ju)和(he)內(nei)(nei)邊(bian)距(ju)（當(dang)時(shi)，是相對于視口(kou)的(de)寬(kuan)度(du)），這樣(yang)當(dang)窗口(kou)尺寸(cun)變化(hua)時(shi)，外(wai)邊(bian)距(ju)和(he)內(nei)(nei)邊(bian)距(ju)同樣(yang)發生變化(hua)，同時(shi)保持了比例和(he)尺寸(cun)一直(zhi)靈活。這種技術(shu)被稱為“concertina padding”，由Richard Rutter 提出（“Web Standards Group ：Ten Questions for RichardRutter”, webstandardsgroup.org）。使用這種技術(shu)后(hou)，當(dang)頁面尺寸(cun)改變時(shi)，外(wai)邊(bian)距(ju)和(he)內(nei)(nei)邊(bian)距(ju)同樣(yang)發生變化(hua)，同時(shi)會(hui)檢查內(nei)(nei)容(rong)區以(yi)及(ji)文本行(xing)的(de)長度(du)。