CSS備忘錄(090114更新ing……)

 padding設定框內的 margin設定框外的 設定float後要設定width 高度不夠設定float 撐開
float:left在一行顯示 clear:both;換行

DIV彈出 position: absolute; //絕對位置(關鍵) visibility:hidden; //隱藏

對齊文本與文本輸入框  vertical-align:middle;
block對象設定了float屬性之後，它將不再獨自佔據一行。可以浮動到左側或右側

固定寬度 width=200px  自適應 寬度 width=50%
固定寬置中 margin: 0px auto;  //div p 置中

block 塊狀 佔一整行 其他對象下一行顯示

inline 內聯 下一行對象在同行中顯示 內聯沒有寬高 隨內容而定
DIV DL H1-H6 hr ol ul li

使用float屬性 必須給元素定義一個寬度  不是浮動物件 設定 寬 高 無效

清除浮動 clear:left 清除左邊浮動物件 如果左邊有浮動物件 當前元素會在浮動物件底下顯示

一個元素定義了clear 不會對前後元素產生影響 隻影響自己的位置

元素加了float自動變成塊元素(<div>)
.clear{clear:both;}清除類(IE高度自適應)

Table 用來顯示和組織資料
所有圖片用背景顯示

z-index 值越大 層疊層級越高

首先是一個容器，可以是div,li,td等等，先定義寬度，“white-space:nowrap”是強制在一行內顯示所有文本，不回行。
“text-overflow:ellipsis”就是關鍵了。 text-overflow是CSS3新增的屬性，IE6以上版本支援。它可以帶2個參數：clip [不顯示省略標記（...），而是簡單的裁切]，ellipsis[當對象內文本溢出時顯示省略標記（...）

]。所以，這個方法是不支援Firefox的。因此，我們還要加上一句overflow: hidden，讓多餘文字在ff中隱藏。

 CSS控制的內容超過容器寬度後顯示省略符號

Code
li {}{ 
   width:50px; 
   white-space:nowrap; 
   text-overflow:ellipsis; 
   overflow: hidden; 
   }

ul, ol
ul和ol分別是什麼意思呢？ul和ol其實分別代表無序列表和有序列表。在語義上，它們都用於表示一類並列關係的內容，

例如我們去商店購物之前列一張shopping list，上面要買的東西就是並列關係，在中文可以用頓號隔開那種。

它們的差別在於是否有順序，例如shopping list是沒順序的，先買什麼後買什麼是沒關係的，但是一份旅遊行程安排上面的景點列表卻是有遊覽的先後順序的。

ul常用於導覽列，因為導航元素符合上面所說的並列關係，樹狀導航結構還可以通過嵌套ul來表述。在這裡，導航可以是我們常見的水平或豎直導覽列，甚至可以是地圖導航，例

如在中國地圖上不同的省份熱區其實是不同的li。如果我說，在主流瀏覽器上使用者看到了中國地圖和可以直接點擊省份熱區，在不支援CSS的瀏覽器上使用者能看到一份純文字的省份

名稱列表，使用的是同一份XHTML，而這完全通過CSS實現，甚至不依賴於JavaScript，你相信嗎？

另外，如果你要顯示一個圖庫的縮圖，這些圖片也可以放在ul中哦，因為這些圖片也是並列關係。它們可以自動先橫排，排滿一行就自動排第二行，CSS可以讓他們乖乖排隊，而

不需好像table那樣把圖片定死在一個格子裡。其實table用於布局就如同用監獄關押內容一樣，把內容鎖死在一個格子裡不讓它到處亂跑；符合語義的XHTML就如同一個開放的舞台

，你只要懂得利用CSS的規則，內容就自然會找一個適合表現自己的地方站著。

dl
沒有聽說過dl嗎？因為那些視覺化檢視產生的程式碼中從來不會出現dl？dl的意思是definition list，也就是定義列表。它包含的子項目不是li，而是dt和dd，也就是definition

term和definition description。dl本身設計為字典單詞與解釋列表這樣的語義，例如：
<dl>
  <dt>Apple</dt>
  <dd>蘋果</dd>
  <dt>Boy</dt>
  <dd>男孩</dd>
</dl>

然而，如果你需要表示的的語義也是類似的，一個列表既包含定義也包含解釋，那麼也可以考慮用dl。

div的高或者寬=高+padding或者寬+padding
padding控制content和border的距離 border框 content內容 padding內容到框之間的距離

2個塊換行(不在一行)要設定距離兩者較大的一個 div margin較大的一個 span 是2個margin相加
子div的margin以父塊的content為參考

如果設定了父塊的高寬再設定padding，內容元素受到padding的擠壓  margin控制塊和塊的距離

position:absolute 相對於頁面的距離(body)不屬於上一層(子類不屬於父類)
position:relative   相對於父塊的定義(父塊的content為基準不包括padding) 子類還是屬於父類
不可層疊 可位移
相對定位  元素本身位置 對其他元素位置 不產生影響

一開始定義CSS

Code
* {}{    
    margin:0;
    padding:0;
    border:0;
    font-size:12px;
    font-family: Arial,verdana,sans-serif;        
    /**//*table-layout:fixed;*/
    word-wrap:break-word; /**//*for ie */
    word-break:break-all;
    
    
    
}

 js裡面設定屬性$("liName").style.display = "block";
直接在HTML設定<p style="color:red;"/>
<p class="a"/> 類選擇符 .p
<p id="a"/>     ID選擇符 #p  id只能出現一次 class可以出現多次 id優先於class
簡單選擇符(p)<類選擇符(.p)<ID選擇符(#p)
標籤內>文檔頭>外部應用

margin 邊界
padding 填充  邊界到層內容之間的空白
border 邊框   層邊框以外留白空間
 
td.w1(w1類名)//不能有空格
#nav .selected //要空格

a:link 沒有被訪問過的樣式
a:visited 被訪問過的樣式
a:hover 懸停時的樣式
a:active 點下滑鼠的樣式 按順序寫

應該是用到min-width屬性
ul.sysSet   label       {min-width:100px; display:block; float:left; text-align:left;}
/*\*/* html ul.sysSet   label { width:100px; }/**/  限制寬度 高度 IE bug

所有頁面一樣高
#pageMain   {width:900px; min-height:360px;height:auto;}
* html #pageMain {height:360px; } /*bug*/

RPT產生<tr><td></td></tr>
DataList   產生<table><tr><td></td></tr></table>
 Rpt 交替行 後台找UL 添加屬性Code 或者前台操作

Code
protected void RptMy_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            int i = e.Item.ItemIndex;
            if (i % 2 == 0)
            {
                HtmlGenericControl ChangeTr = (HtmlGenericControl)e.Item.FindControl("ChangeTr");
                if (ChangeTr != null)
                {
                    ChangeTr.Attributes.Add("style", "background-color:#FFFFCC");
                }
            }
        }

幾個元素樣式屬性一樣 p,td,tr{...}

給一個元素定義多個屬性 li string {...}
多重class定義 <div class="one two">
.one{..}
.two{..}