/** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; }
z-index只能在被position為： aboslute, fixed, relative的元素生效
不能對一個元素既設定float，又設定positioning,因為這會產生positioning歧義。當然特別需要時也是可以同時設定這兩者的。比如被float的元素本身又作為container，希望他作為子元素定位的參考點，則可以設定float:left;position:relative
預設情況下：任何元素都有預設的background屬性：transparent，元素的border以內都認為是background的涵蓋範圍。一旦設定了brackground，它就稱為背景色，可以由border,content來“覆蓋”。
.background{
background-image: url(imag/background.jpg);
background-color: blue; //作為fallback
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll//預設；fixed;local：指示content是否和background一起scroll
}
background-gradient color generator: http://www.colorzilla.com/gradient-editor/
inline-block元素的上下對齊可能是一個問題，可行的辦法是設定vertical-align: top
另外在使用兩個inline-block A:60%,B:40%的情況下，可能會出現A+B>100%從而B被擠下來的問題，產生這個問題的原因是瀏覽器會將A和B之間的whitespace空白或者tab鍵渲染為1px左右的內容，解決方案要麼A+B<100%,要麼：設定B margin-right: -5px就解決了。
另外一個常見的bug是：如果網頁內容不是很飽滿，footer就孤零零在網頁中間而不是在網頁的底部，解決辦法就是將main layout component設定height:100%