居中布局 水平居中
父元素和子元素的寬度都未知
inline-block + text-ailgn
.child
.parent
複製**
優點：相容性好
缺點：子元素文字繼承了text-align屬性，子元素要額外加text-align:left;
table + margin
.child
複製**
優點：只需要設定子元素的樣式
absolute + transform
.parent
.child
複製**
優點：只需要設定父元素的樣式
缺點：相容性問題
flex + margin
.parent
.child
複製**
垂直居中
父容器和子容器的高度都未知
table-cell + vertical-align
.parent
複製**
優點：相容性好
absolute + transform
.parent
.child
複製**
優點：子元素不會干擾其他元素
缺點：相容性
flex + align-item
.parent
複製**
優點：只需要設定父元素
缺點：相容性問題
水平垂直居中
父容器和子容器的高度都未知
inline-block + text-align + table-cell + vertical-align
.parent
.child
複製**
absolute + transform
.parent
.child
複製**
flex + justify-content + align-item
.parent
複製**
多列布局 定寬-自適應 float+margin
.left
.right
複製**
float+margin+fix
www.kmrlyy.com
複製**
外層在包裹乙個容器
.left
.right-fix
.right
複製**
相容性很好，但是多了層right-fix的結構
float+overflow
.left
.right
.left,.right
.left
複製**
flex
.parent
.left
.right
複製**
不定寬-自適應 float + overflow
.left
.right
複製**
table
.parent
.left,.right
.left
複製**
flex
.parent
.left
.right
CSS頁面布局筆記
父元素和子元素的寬度都未知 child parent優點 相容性好 缺點 子元素文字繼承了text align屬性，子元素要額外加text align left child優點 只需要設定子元素的樣式 parent child優點 只需要設定父元素的樣式 缺點 相容性問題 parent child父...
頁面布局 兩列布局
left right right css left right簡單的布局方法，左側設定浮動，右側設定margin left 避免環繞左側 的布局方法 left right right css left right fix right通過在html檔案的right上套上一層right fix，然後對r...
頁面布局之flex布局
flex布局 flex布局也叫作彈性盒子布局，可以簡便 完整 響應式的實現各種頁面布局，同時也支援所有的瀏覽器。父級元素設定css樣式為 display flex。內容的位置用justify content來控制，常用的屬性有 space between space around center le...