css常用布局

以下居中布局均以不定寬為前提，定寬情況包含其中

a) inline-block + text-align

tips：此方案相容性較好，可相容至ie8，對於ie567並不支援inline-block，需要使用css hack進行相容

b) table + margin

tips：此方案相容至ie8，可以使用代替css寫法，相容性良好

c) absolute + transform

tips：此方案相容至ie9，因為transform相容性限制，如果.child為定寬元素，可以使用以下寫法，相容性極佳

d) flex + justify-content

tips：flex是乙個強大的css，生而為布局，它可以輕鬆的滿足各種居中、對其、平分的布局要求，但由於現瀏覽器相容性問題，此方案很少被使用，但是值得期待瀏覽器相容性良好但那一天！

2、垂直

a) table-cell + vertial-align

.parent

b) absolute + transform

tips：存在css3相容問題，定寬相容性良好

c) flex + align-items

.parent

3、水平垂直

a) inline-block + table-cell + text-align + vertical-align

tips：相容至ie8

b) absolute + transform

tips：相容性稍差，相容ie10以上

c) flex

.parent

1、一列定寬，一列自適應

a) float + margin

b) float + overflow

tips：個人常用寫法，此方案不管是多列定寬或是不定寬，都可以完美實現，同時可以實現登高布局

c) table

d) flex

2、多列定寬，一列自適應

a) float + overflow

b) table

c) flex

3、一列不定寬，一列自適應

a) float + overflow

b) table

c) flex

4、多列不定寬，一列自適應

a) float + overflow

.left,.center.right.left p,.center p

a) float + margin

.parent.column

.parent-fix.parent.column

.parent.column.column+.column

a) float + overflow

.parent.left,.right.left.right

.parent.left.right

.parent.left.right

flex

.main .item .empty

CSS 常用布局

1.寬度100 自適應視窗寬度 content content 只是定義了寬度為100 背景為白色與body色加以區分 footer footer 2.寬度100 最小定寬780px content content 只是定義了寬度為100 背景為白色與body色加以區分 這個布局中我們使用了min ...

css常用布局

單列布局長這個樣子，主要有兩種 普通單欄，通欄的單欄布局 比較簡單，設定 定寬 水平居中即可 頭部 內容尾部 執行結果鏈結描述 瀏覽器寬度超過960px時，外margin出現。當收縮瀏覽器寬度，小於960px時，margin為0，出現滾動條。執行結果鏈結描述 在header 和footer上再包裹一...

CSS 常用布局

div class body div class header div div class section div class left div div class right div div div class footer div div 整個父元素相對定位，導航高固定，內容區域絕對定位，通過定...