psoition + 負margin
position + margin auto
position + transform
position + calc
flex
雙飛翼(float + 負margin)
"center"
>
"center-box"
>
中間div
>
div>
"left"
>
左邊div
>
"right"
>
右邊div
>
div>
#center
#left
#right
#center-box
"center"
>
中間div
>
"left"
>
左邊div
>
"right"
>
右邊div
>
div>
#parent
#center
#left
#right
flex布局
flex布局中，子元素都預設拉伸為父親元素的高度，不考慮ie低版本相容推薦使用
"parent"
>
"left"
>
121div
>
"center"
>
1212div
>
"right"
>
1212div
>
div>
#parent
#left,#right,#center
class
="parent"
style
="background-color
: lightgrey;
">
class
="left"
style
="background-color
: lightblue;
">
>
leftp
>
div>
class
="center"
style
="background-color
: pink;
">
>
centerp
>
>
centerp
>
div>
class
="right"
style
="background-color
: lightgreen;
">
>
rightp
>
div>
div>
.parent
.left,.center,.right
.left
.center
.right
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常用布局
以下居中布局均以不定寬為前提，定寬情況包含其中 1 水平居中 a inline block text align tips 此方案相容性較好，可相容至ie8，對於ie567並不支援inline block，需要使用css hack進行相容 b table margin tips 此方案相容至ie8，...