css布局是每個前端開發工程師的基本功。下面我列出一些常見布局及解決方案。**不完整，我只寫出重要**。
//簡單的寫一下html結構
class="parent">
class="child">水平居中布局div>
div>
.childtable+margin.childinline-block+text-align.parent .childabsolute+margin-left.parent .childabsolute+transform.parent .childflex+justify-content.parent
//簡單的寫一下html結構
class="parent">
class="child">垂直居中布局div>
div>
.parentabsolute+transform.parent .childflex+align-items.parent
//簡單的寫一下html結構
class="parent">
class="child">水平居中布局div>
div>
.parent .childinline-block+text-align+table-cell+vertical-align.parent .childflex+justify-content+align-items.parent
//簡單的寫一下html結構
class="parent">
class="left">一列定寬div>
class="right">一列自適應div>
div>
.left .rightfloat+overflow.left .righttable.parent .left .rightflex.parent .left .right
//簡單的寫一下html結構
class="parent">
class="child">左右定寬div>
class="center">中間自適應div>
class="right">左右定寬div>
div>
.left .rightabsolute.parent .left .center .righttable.parent .left .rightflex.parent .left .center .rightgrid.parent
上面就是一些常見布局及解決方案，但要注意相容性從而選擇最合適的方案解決。
CSS常見布局解決方案
瀏覽部落格時，看到一篇部落格 css常見布局解決方案 因為平時在寫 的時候，也會出現很多css布局方面的問題，所以看到這個 文章格外興奮，借鑑他的學習經驗，希望自己以後也可以有所總結。水平居中布局 首先看水平居中 1.margin 定寬 demo 不定寬的水平居中 2.table margin de...
css布局解決方案
總結css布局 1 水平布局 1 display inline block text algin center a 原理 用法 原理 先將子框由塊級元素變為行內元素，再通過設定行內元素居中以到水平居中 用法 對子框設定display inline block,對父元素設定text algin cen...
CSS布局解決方案
使用inline block text align en parent child dome 複製 效果 3.使用absolute transform en parent child dome 複製 效果 4.使用flex margin en parent child dome 複製 效果 5.使用...