css tips: 清除float影響，containing的div跟隨floated sub等

世有因果知因求果發表於2015-09-17
CSSAI
/**
 * 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%

相關文章