《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爲負值時，有必要將放文字的容器的內邊距設置大於等於縮進的絕對值，以避免文字顯示在區域外。