總結css布局
1、水平布局
1）display:inline-block;text-algin:center;
a、原理、用法
原理：先將子框由塊級元素變為行內元素，再通過設定行內元素居中以到水平居中；
用法：對子框設定display:inline-block,對父元素設定text-algin:center；
b、**例項
c、優缺點
優點：相容性好，可相容ie6、ie7
缺點：child中的文字也會居中，可通過設定child的text-algin:left還原；
2）tabel+margin
a、原理、用法
原理：將子元素設定為塊級**來顯示，在設定子框居中以達到水平居中
用法：對子框設定display:table;margin:0 auto;
b、**例項
c、優缺點
優點：只設定了child，ie8以上都支援
缺點：不支援ie6、ie7
3）使用absolute+transform
a、原理與用法
原理：將子框設定為相對于父元素絕對定位，在移動子框，使子框左側距離相對於框左側邊框的距離為相對框寬度的一半，在通過像左移動子框寬度的一半以達到水平居中；
方法：父元素設定position:relative;子元素設定position:absolute;left:50%;transform:translatex(-50%);
b、**例項
c、優缺點
優點：居中元素不會對其他產生影響；
缺點：transform是css3的內容，會存在一些相容性的問題，高版本瀏覽器需要加字首；
4）使用flex和margin
a、原理、用法
原理：通過css3的布局神器flex將子框轉換為flex item，在設定子框居中以達到水平居中
用法：先將父元素display:flex對子框設定margin:0 auto;
b、**例項
c、優缺點
缺點：ie6、ie7、ie8不支援
5）使用flex+justify-content
a、原理及方法
原理：通過css3中的布局利器flex中的justify-content屬性來達到水平居中；
方法：先將父框設定為display:flex，再設定justify-content:center。
b、**例項
c、優缺點
優點：只需要設定父元素
缺點：ie6、ie7、ie8不支援
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...
css 全屏布局解決方案
之前寫了幾個居中布局的例子，同時也提到了對於頁面的全屏布局。這裡詳細總結兩種常見的全屏布局的案例，當然，實際上還有像grid這樣的方案，但是因為目前還不穩定，只是作為w3c的乙個草案，相容性自然就差一些，這裡沒有作深入的 相信這樣的頁面布局，我們在很多後台系統上會經常用到 用 表示為這樣的結構 cl...