之前寫了幾個居中布局的例子，同時也提到了對於頁面的全屏布局。這裡詳細總結兩種常見的全屏布局的案例，當然，實際上還有像grid這樣的方案，但是因為目前還不穩定，只是作為w3c的乙個草案，相容性自然就差一些，這裡沒有作深入的**。
相信這樣的頁面布局，我們在很多後台系統上會經常用到：
用**表示為這樣的結構：
class
="parent">
class="top">
div>
class
="left">div>
class
="right">div>
class
="bottom">div>
html,body,.parent
.top
.left
.right
.bottom
class="inner">
div>
div>
對inner設定個最小高度，並且為right部分增加
.right
.inner
.right
class="parent">
class="top">div>
class="middle">
class="left">div>
class="right">div>
div>
class="bottom">div>
div>
在left,和right外層包了一層middle。
.parent//列方向進行布局
.top
.bottom
.middle//佔據剩餘區域
.middle //作為乙個容器，這裡預設的，flex-direction:row
.left
.right
flex的相容性，對ie9以下不太好，並且flex本身效能不是很好，在手機上尤其如此。
如果對於上例中的定高，定寬的部分，即px換成%,top的10%相對於body。這種情形的話，上面講的兩種方案同樣能夠實現。**中的px替換成%即可。
考慮如下三種方案
首先，定位方案肯定是不合適的，因為px的設定就違背了根據內容自適應的思想。
另外，grid就像開頭將的，用的比較少。
重點考慮flex方案。
.parent//列方向進行布局
.middle//佔據剩餘區域
.right
從相容性，效能，自適應方面考慮，
相容性 效能 自適應
position 好 好 部分自適應
flex 較差 手機尤其差 可自適應
grid 差 較好 可適應
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.使用...
CSS常見布局解決方案
瀏覽部落格時，看到一篇部落格 css常見布局解決方案 因為平時在寫 的時候，也會出現很多css布局方面的問題，所以看到這個 文章格外興奮，借鑑他的學習經驗，希望自己以後也可以有所總結。水平居中布局 首先看水平居中 1.margin 定寬 demo 不定寬的水平居中 2.table margin de...