CSS用法的一些總結

工做上，除了Django和一些並不複雜的腳本之外，其他時間寫了大量的CSS和jQuery，如今回頭看以前的一些代碼，寫得十分醜陋又低效，其中的CSS就有很大改進空間。
正如多數人的認知同樣，HTML和CSS並不難學難用，從學習曲線上來講確實如此，難度甚至不如使用VIM。可是寫不寫得好又是另外一回事，好的CSS代碼能用最少的代碼量實現功能，易修改且性能佳。易修改，舉個最簡單的例子，好比要求修改一個div的高寬且保持其子div自適應高寬，如果寫死了子div的高寬，修改工做很麻煩，因此最好是將子div在需求下儘量寫成自適應，這樣修改時就只須要修改父div的高寬便可。性能佳，能用CSS實現的絕對不用js實現，不論是網頁佈局仍是動畫效果，原生的CSS都是快速又具有高度兼容性的選擇。

清除浮動

清除浮動是個常見問題，很多人的解決辦法是添加一個空的 div 應用 clear:both。事實上僅須要使用after僞類便可在元素尾部自動清除浮動

.clear-fix { overflow: hidden; zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

DIV同行排列

最容易想到的是將一行div全設置爲display:inline-block，但這種作法會使得兩個div之間存在「間隔」，這個「間隔」的大小一般由font-size決定，將font-size設爲0將不存在"間隔"。清除間隔能夠經過使用註釋的方法實現。

<div class="item"></div><!--
--><div class="item"></div>

更好的方式天然仍是使用float

.item {float: left}

靈活使用BFC

BFC（Block Formatting Context）直譯爲「塊級格式化範圍」。當一個HTML元素知足如下任何一點時，就會產生BFC:

• float的值不爲none

• overflow的值不爲visible

• display的值爲table-cell, table-caption或inline-block

• position的值不爲relative和static

BFC提供了一個環境，這個環境中的元素不會影響到其它環境中的佈局。好比浮動元素造成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。BFC就是一個做用範圍，可看做是一個獨立的容器，而且這個容器的佈局，與這個容器外的元素絕不相干。

BFC的元素不能與浮動元素重疊，當容器有足夠的剩餘空間容納 BFC 的寬度時，全部瀏覽器都會將 BFC 放置在浮動元素所在行的剩餘空間內。

上圖所示，畫線左側是描述，字數不定，即寬度不定，畫線佔滿同一行的剩餘部分。正好使用上面提到的BFC與浮動元素的位置狀況。

.desc { float: left;}
.line { overflow: hidden;}

<div>
 <div class="desc">黃金檔</div>
 <div class="line"></div>
</div>

未垂直對齊

同一行的一組class爲item的div使用了display:inline-block或者是float:left時，若是某個div的內部標籤中填充一些文字等內容，可能就會出現垂直不對齊的狀況。但很是奇怪的是，這時內部元素並無超出父級div的範圍，沒有任何溢出或撐開的狀況，這點我也不是很理解，知道其發生緣由的同窗歡迎留言。解決方法倒不難：

.item { vertical-align: top;}

display:table-cell的應用

table-cell會被其餘一些CSS屬性破壞，例如float和 position:absolute，因此display:table-cell與float:left或是position:absolute屬性最好不要同用。設置了該屬性的元素對寬度高度敏感，響應padding屬性，對margin值無反應

垂直居中

.content {
    display: table-cell;
    border: 1px solid #eee;
    width: 600px;
    text-align: center;
}

<div class="content">
    <p>what a beautiful day</p>
</div>

兩欄自適應佈局

適用於一欄寬度不固定，好比大小不肯定的圖片，另外一欄自動調整佔滿剩餘寬度的場景。

.box {
    width: 70%;
}
.content {
    display: table-cell;
    border: 1px solid #eee;
}
.fix {
    float: left;
    color: #a8c;
}

<div class="box">
    <div class="fix">This is left fixed block</div>
    <div class="content">
        風住塵香花已盡，日晚倦梳頭。物是人非事事休，欲語淚先流。聞說雙溪春尚好，也擬泛輕舟。只恐雙溪舴艋舟，載不動許多愁。
    </div>
</div>

垂直對齊的trick

上面提到過能夠用table-cell讓div內的元素垂直居中，但對div的float和position屬性有限制，如今介紹一種能夠用在浮動元素(容器)裏的垂直居中方法，這是在工做中碰到使用了float很差使時發現的
使用一個用做協助的inline-block的幫助元素，此處是span並將該元素和準備居中的元素都設置爲vertical-align: middle便可

<div class="frame">
    <span class="helper">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

css

.frame {
    float: left;
    height: 220px;
    width: 300px;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
img {
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

原理是相鄰的兩個inline-block元素能夠互相對齊，因此使用一個不可見的100%高度的span能夠幫助img對齊
來源：http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div

不過這時仍然有個問題，假設上面的img後面要跟一個文字介紹的div塊(inline-block)，以下所示

<div class="frame">
    <span class="helper">
    <img src="http://jsfiddle.net/img/logo.png" />
    <div class="desc">ABCD</div>
</div>

若是需求是設置.desc的margin-top: 10px，直接設置的話會發現前面居中對齊的img也會向下10px。
緣由是由於塊元素的vertical-align默認是baseline，設置margin-top會致使整個baseline降低，因此以前已經居中對齊的元素也會受到影響。解決辦法是將div.desc設置爲其它的對齊方式，推薦vertical-align: top

另一種解決辦法既能解決上面的問題，也能解決inline-block的塊元素設置margin無效的問題

.desc {
    postion: relative;
    top: 10px;
}

hover時顯示邊框

方法一
對於一個塊元素好比div，一般先設置好border-width，並將border-color設爲#fff或transparent，hover時直接改變border的顏色便可

方法二
將寬高的值寫上，而後設置box-sizing: box，hover時直接設置border便可，此時邊框寬度包括在width或height的數值中