《css網站布局實錄》（李超）——讀書劄記

標籤：

1.web表現層技術

2.HTML連結設計思想

3.對資訊進行合理的分析、分類與處理來創造商業價值。

4.頭部描述瀏覽器所需資訊，主體包含所需要展現的具體內容。

5.HTML（XHTML）XML

6.良好的css代碼設計可以使代碼之間產生繼承及重載關係，能夠達到最大限度地代碼重用，從而降低代碼量及維護成本。

7.由於不同品牌瀏覽器及不同版本之間的渲染方式不同，各自解析css也存在一些差異。

8.css hack可以簡單地翻譯為css駭客程式，它是一個被設計者們習慣使用的名稱。它表現一種類似於欺騙瀏覽器的編碼手段，由於存在瀏覽器安全色性問題，A瀏覽器不支援某些標籤而B瀏覽器支援，因此使用這種欺騙方法，可以編寫一段樣式只被B瀏覽器解析，而A瀏覽器則會忽略，反之亦然。

9.隨著硬體水平提高，未來的介面設計必將豐富多彩。

10.選擇符優先權：id>class

11.兩行相同類型的css，一般執行後者，如

div{background:#666;      background:#fff;}

12.div的最終目的是合理的標識出我們的內容地區。

13.在適當情況下應該儘可能減少嵌套的使用，以保證瀏覽器不用過分的消耗資源來對嵌套關係進行解析，簡單的嵌套結構更有利於我們對版式的理解與控制。

14.選擇符合需求的其他XHTML標籤，合理的替代div。

 

 

第三章 css網頁布局與定位

1.浮動是一種非常有用的布局方式，它能夠改變頁面中對象的前後流動順序。這樣做的好處是，使得內容的排版變得簡單，具有良好的伸縮性。

2.左欄固定（設定寬度）右欄自適應（不設定寬度）。

3.絕對位置：它將從本質上與其他對象分離出來，它的定位元模式不會影響其他對象，也不會被其他對象的浮動定位所影響。從某種意義上來講，使用絕對位置之後，對象就像一個圖層一樣漂浮在網頁之上。

3.三列浮動中間列寬度自適應：

#left{width:100px;height:300px;position:absolute;top:0px;left:0px;}#right{width:100px;height:300px;position:absolute;top:0px;right:0px;}#center{height:300px;margin-left:104px;margin-right:104px;}//margin-left和margin-right用於讓出兩側列的寬度

4.使用浮動對齊排列的核心技術在於對於寬度的合理控制。

5.上下margin疊加（空白邊疊加規則）：當兩個對象為上下關係時，而且都具備margin屬性時，此時以較大的邊距為主。注意：一旦把某個元素設定了float屬性，那麼它們將不再進行空白邊疊加。

6.IE6左右邊距加倍問題：當我們的盒對象為浮動時，在IE6之中，盒對象的左右margin會加倍。這是IE6的CSS解析問題，我們可以通過設定對象的display:inline;來解決。

7.css網頁布局只能以兩種方式存在：一種是浮動式布局，另一種則是定位布局。這兩種定位方式的核心都為脫離於文檔流的控制。

8.文檔流：對於一個XHTML網頁，body元素下的任意元素，根據其前後順序，組成一個個上下關係，這便是文檔流。瀏覽器根據這些元素的順序去顯示它們在網頁之中的位置。文檔流是瀏覽器的預設顯示規則。

9.浮動的清理：

10.當網站有較強的對解析度及內容大小的適應能力的時候，就需要採用浮動定位。

11.一些看似固定式配置的網站，如果需要採用margin來控制對象佔位，由於空白邊距疊加規則，需要使用浮動來定位。

補：float更適合對象的配置模式，而不是資訊的組織（資訊的組織可用display:inline）。

12.相對定位就是浮動定位與絕對位置的擴充方式。相對定位使得被設定元素保持與原始位置相對，並不破壞其原始位置的資訊。

13.b嵌套c，b相對定位，c絕對位置或相對定位時：c的相對定位是相對與b而言，並且在b元素之中仍然保留著c的佔位資訊。

14.不佔位的相對定位：父級相對定位，寬高明確，不設top和left，子級絕對位置，如：

<div id="divGroup"><div id="a">a</div><div id="b">b</div><div id="c">c</div></div>

#divGroup{margin:50px 0 0 50px;position:relative;border:1px solid #000;width:400px;height:200px;}#a,#b,#c{border:1px solid #000;width:100px;height:100px;margin:2px 2px 2px 0;float:left;}#b{position:absolute;left:10px;top:30px;}

15.絕對位置用於網頁位置固定，而且不希望採用margin，padding，border等屬性控制。

（1）不規則網頁設計

由於設計需要，有些網頁設計不會走分欄或塊狀布局的路線，而是隨機地布置位置。在這種情況下，它們往往採用絕對位置或相對定位的各種組合方式來進行布局。

（2）在畫面上的設計

如果需要一個元素覆蓋在整個畫面之上，但不希望破壞原有的結構，這時可以採用絕對位置或相對定位，使得某個或者某些對象覆蓋在畫面之上。

（3）互動式設計

下拉式功能表是一種互動式設計，由於其菜單子項只有在滑鼠移上時才出現，因此是一種需要覆蓋在畫面上方的設計。

當子功能表需要根據父級的滑鼠位置而發生改變，所以需要根據父級的滑鼠位置行進定位。

（以上兩種情況的原則就是當子功能表出現時，不破壞其他元素的布局結構，所以需要它們浮於畫面之上，這時便可以採用絕對或者相對定位）

第4章 CSS網站元素設計

1.div應當重點放在大面積塊狀地區，對於簡單的只有文字的導航來說，ul更為輕巧靈活。

2.當文字縮排text-indent為負值時，有必要將放文字的容器的內邊距設定大於等於縮排的絕對值，以免文字顯示在地區外。

 

《css網站布局實錄》（李超）——讀書劄記