什麼叫sticky footer 布局呢?
我們所見到的大部分**頁面,都會把乙個頁面分為頭部區塊、內容區塊和頁尾區塊,當頭部區塊和內容區塊內容較少時,頁尾能固定在螢幕的底部,而非隨著文件流排布。當頁面內容較多時,頁尾能隨著文件流自動撐開,顯示在頁面的最底部,這就是sticky footer布局。
一般網上會推薦幾種方法,但經過親身實踐,我發現還是負margin布局方式比較實用,相容性最好
它的布局是:
/*footer部分*/
css:
/* sticky footer 布局 */
.clearfix-sticky
.clearfix-sticky:after
height: 100%; /*為了 這個100%能夠生效 ,父級必須也要設height: 100%;*/
} width: 100%;/* 此處加width: 100%;是因為.clearfix-sticky的設定影響了布局 */
height: auto;
min-height: 100%;
}.content-sticky
.footer-sticky
這樣就ok了 CSS 關於css中的border
曾經一直以為html中的border是直角的,直到有一天 test效果如下 突然有一種被欺騙了的感覺。我們可以選擇理解乙個border為兩個三角形再加乙個矩形。如上所示。繪製小尾巴 當對乙個角應用圓角樣式,如果這個角相鄰的兩個border乙個有定義而乙個無定義,那麼繪製的結果就是由粗到細的 小尾巴了...
css中的定位
本文只是個額外的說明,作為基礎知識的補充和額外的關注點 定位的分類以及預設定位 fix,static,relative,absolute 各個定位的包含塊是怎麼樣的 1.relative和static的包含塊由最近的塊級框,表單元格或行內塊祖先框的內容邊界構成 2.fixed的包含塊是視窗本身 3....
CSS中的重點
給父元素設定一些屬性,子元素也可以使用,這個我們就稱之為繼承性。並不是所有的屬性都可以繼承,以color font text line list 開頭的屬性可以繼承。text decoration不可繼承 繼承性中的特殊性 a標籤的文字顏色是不能繼承的 h標籤的文字大小是不能繼承的 合理使用繼承可以...