我的CSS備忘錄—進階選取器、框模型、定位

學習CSS以前總感覺是設計人員的事情，這種想法隨著時間的向後推移，發現根本不是那會事，這不，趕緊找了本精通CSS看了起來，也從中學到了不少東西。
我把關鍵的部分也記錄下來，方便自己，方便大家！

頁面導航：
進階選取器：子選取器 | 相鄰同胞選取器 | 屬性選取器
框模型：正確的框模型 | 空白邊疊加
定位：相對定位 | 絕對位置

1、進階選取器
1.1子選取器

子選取器的一個小例子代碼片斷
#nav > li
{
    border:1px solid #ccc;
}

<ul id="nav">
<li>home</li>
<li>services
<ul>
<li>Design</li>
<li>Consultancy</li>
</ul>
<li>Contact Us</li>
</ul>

 外層外表中的清單項目均有一個邊框，而嵌套列表中的清單項目沒有。
注意：在IE6或更低版本中，不支援子選取器，可以使用通用選取器類比子選取器的效果。使用通用選取器覆蓋子項目的後代上的樣式來實現IE6類比實現的效果（我沒試成功）
#nav li 
{
    border:1px solid red;
}
#nav li *
{
    border:0px solid red;
}

1.2相鄰同胞選取器
adjacent sibling selector可用於定位同一個父元素下某個元素之後的元素。IE6或更低版本同樣不支援，所以在實際的運用中，大家更喜歡為這一個要特殊設定樣式的元素重新設定樣式

1.3屬性選取器
1.3.1元素中含有某個屬性
可以根據某個屬性是否存在或包含一個值來尋找元素，可以實現強大的效果。屬於CSS2 ，IE6或更低版本不支援。但是感覺還是有必要介紹一下
<abbr title="Cascading style Sheets">CSS</abbr>
在支援CSS 2.0的瀏覽器中，當滑鼠放到abbr上時，會顯示這個協助提示，但是如果想讓它更醒目一些，如，對具有title屬性的元素應用與其他元素不同的樣式，以顯示出來它有提示
abbr[title] {border-bottom:1px  dotted #999;}
abbr[title]:hover{cursor:help;}
在這個例子中，FF支援的比較完美，IE7一般情況下是可以的，如果abbr後面沒有內容，可能底線不會顯示出來（待定，我測試的結果），IE6不支援。

1.3.2元素中的這個屬性值等於特定值元素中某一屬性值等於特定值的例子片斷
a[rel="abc"]
{
    background-color:#ccc;
    padding-left:20px;
}

<a href="http://www.cnblogs.com/bit-sand" rel="abc">cnblogs.com</a><br />
<a href="http://www.baidu.ocm">baidu</a>

cnblogs連結會有背景，而下面這個沒有

1.3.3元素中的這個屬性值含有這個值Code
a[rel~="abc"]
{
    background-color:#ccc;
    padding-left:20px;
}

<a href="http://www.cnblogs.com/bit-sand" rel="I am abc !">cnblogs.com</a><br />
<a href="http://www.cnblogs.com/bit-sand" rel="I am abc!">cnblogs.com</a><br />
<a href="http://www.baidu.ocm">baidu</a>

1.3.4元素中的這個屬性值以這個值開頭Code
a[rel^="abc"]
{
    background-color:#ccc;
    padding-left:20px;
}
<a href="http://www.cnblogs.com/bit-sand" rel="abcsdfdsfsd !">cnblogs.com</a><br />
<a href="http://www.cnblogs.com/bit-sand" rel="I am abc!">cnblogs.com</a><br />
<a href="http://www.baidu.ocm">baidu</a>

這個東西在連結上面比較有用，可以分辨出來這個連結中轉向哪裡的，設定不同的屬性，可IE6不支援！現在有點越來越看不起IE6了，~~~

1.3.5元素中的這個屬性值以特定詞結尾Code
a[href$="bit-sand"]
{
    background-color:#ccc;
    padding-left:20px;
}

<a href="http://www.cnblogs.com/bit-sand" rel="I am bit-sand">cnblogs.com</a><br />
<a href="http://www.baidu.ocm">baidu</a>

這個東東也非常有用，在使用者體驗上面，如果下載的檔案是doc格式的，或者pdf格式的，我們就可以根據不同的格式設定不同的樣式，使用者感覺是不是非常好呀？可IE6仍然不支援。

關於選取器的用法我就瞭解這麼多，如果您有什麼意見或想法，在下面一起討論。。。返回頂部         

2、框模型需要注意的地方
2.1正確的框模型
在CSS中，width和height指的是內容地區的寬度和高度。增加填充、邊框和空白邊不會影響內容地區的尺寸，但是會增加元素框的總尺寸。
舉個例子：假設框的每個邊上有10像素的空白邊和5像素的填充，如果希望這個框達到100像素寬，就需要將內容的寬度設定為70像素（標準是這樣的，如果瀏覽器不按規則出牌，我們也沒辦法，IE6就是這樣）
注意：IE6的Width不僅僅包括內容的寬度，還包括填充和邊框寬度。
解決方案：目前最好的解決辦法就是迴避這個問題，也就是，不要給元素添加具有指定寬度的填充，如果必須為指定寬度的元素添加填充，則嘗試將填充或空白邊添加到元素的父元素或子項目。
2.2空白邊疊加
當兩個垂直空白邊相遇時，它們將形成一個空白邊，這個空白邊的高度等於兩個發生疊加的空白邊的高度中的較大者。
這個疊加可以發生在：

1. 元素的頂空白邊與前面元素的底空白邊發生疊加
2. 元素的頂空白邊與父元素的頂空白邊發生疊加
3. 空元素，在沒有邊框或填充的情況下，頂空白邊與底空白邊發生疊加
4. 空元素中已經疊加的空白邊與另一個空元素的空白邊發生疊加

返回頂部      

3、定位
3.1相對定位
相對定位可以這麼理解：如果對一個元素進行相對定位，它將出現在它所在的位置上，然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點進行移動。
在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其他框。
3.2絕對位置
相對定位實際上被看作是普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。而絕對位置使元素的位置與文檔流無關，故不佔據空間。
絕對位置的元素的位置相對於最近的已定位祖先元素。由於它與普通流（文檔流）無關，故有可能存在覆蓋的問題，通過設定z-index屬性來控制這些框的堆放次序。
注意 ：相對於相對定位的祖先元素對框進行絕對位置，在大多數瀏覽器中實現的很好。但是IE6及其更低版本有一個bug。如果試圖相對於相對定位的框的右邊或底部設定絕對位置的框的位置，需要確保相對定位的框已經設定了尺寸，如果沒有，則會相對於畫布定位這個位置。

解決方案：解這個Bug的原因在於相對定位的元素沒有獲得IE/Win的內部hasLayout屬性。它們不建立新的定位上下文，所有絕對位置無素相對視窗進行定位。一種解決方案是為容器上顯式的設定Width和Height。如果不知道容器的Width和Height的話，可以用Holly招數為容器提供一個任意的高度，讓容器擁有此布局。

 

對於IE6一些常用的解決方案是將position屬性設定為relative，將display屬性設定為inline，或者設定寬度或高度尺寸，就可以修複許多Bug。

4、斷行處理

1，word-wrap:是控制換行的。
normal：正常情況；
break-word：將強制換行。中文沒有任何問題，英文語句也沒問題。但是對於長串的英文，FF不起作用。. 必要時會觸發word-break。

2，word-break:是控制是否斷詞的。
normal：預設情況，英文單詞不被拆開。 好像是只對Asian text起作用。
break-all：是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題，對FF不起作用。
keep-all：是指Chinese, Japanese, and Korean不斷詞。即只用此時，不用word-wrap，中文就不會換行了。（英文語句正常。）

總結如下：
ie下：
    使用word-wrap:break-word;所有的都正常。
ff下：
    如這2個都不用的話，中文不會出任何問題。英文語句也不會出問題。但是，長串英文會出問題。

為瞭解決長串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式會導致，普通的英文語句中的單詞會被斷開（僅指IE），但這樣做筆者認為無意義。　　
對於長串英文，就是惡意的東西（並不是所有的都是這樣），自然不用去管了。但是，也要想些辦法，不讓它把容器撐大。
用：overflow:auto; ie下，長串會自動折行。ff下，長串會被遮蓋。

所以，綜上，最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下沒有任何問題。在ff下，長串會被遮住部分內容。