CSS：CSS學習總結

背景

CSS是一種聲明式的語言，學好CSS的難度甚至大於學好一門服務器語言（我個人的感覺），這周在學習CSS，就記錄一下學習經驗。

1、規則聲明順序

因為CSS的樣式具備層疊性和繼承性，為了最小化代碼量，規則的聲明可以按照如下順序：

1. 常用標記
2. 常用類
3. 布局類
4. 導航類
5. 表格類
6. 表單類
7. 組件類

2、盒子模型、文檔流、定位和浮動一定要清楚

• 盒子模型：瀏覽器把每種標記都當做一個盒子，有兩種盒子（內聯和框），他們在文檔流中的布局模式是不同的。
• 文檔流：框盒子會被從上到下的布局，內聯盒子會被從左到右、從上到下的布局。
• 定位：可以修改框盒子的定位方式，static（正常的文檔流中的位置）、absolute（相對於最近一個被定位（非static定位）了的祖先元素的位置，脫離了文檔流）、relative（相對於正常的文檔流的位置，保留原來的位置）、fixed（相對於窗口，脫離了文檔流）。
• 浮動：浮動會導致元素脫離文檔流，元素會浮動到父親元素的邊緣或其它浮動元素的邊緣，如果遇到空間不夠就會下降尋找足夠的空間，浮動一般伴隨着清除，清除會讓元素的左右沒有任何浮動元素。

教程：http://www.w3school.com.cn/css/css_positioning.asp。

3、利用偽元素清除浮動

.clear-fix:after
{
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

教程：http://www.w3school.com.cn/css/css_pseudo_elements.asp。

4、margin可以支持負數

Bootstrap中的柵格系統就用了這個特性，row的margin-left為-20px，span*的margin-left也為20px，這樣就抵消了第一個span的margin。

教程：http://www.w3school.com.cn/css/css_margin.asp。

5、屬性選擇器

[class*="span"] {
     float: left;
     min-height: 1px;
     margin-left: 20px;
}

教程：http://www.w3school.com.cn/css/css_selector_attribute.asp。

6、相鄰兄弟選擇器

.main-content
{
    background: url("../Images/accent.png") no-repeat;
    padding-left: 10px;
    padding-top: 30px;
}

.featured + .main-content
{
    background: url("../Images/heroAccent.png") no-repeat;
}

教程：http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp。

備注

CSS不好學習，還是需要專門的人員來做，后端懂點CSS有利於更好的合作。