css--佈局

接觸前端開發也有半年了，每當須要將一個空白的紙，」畫「成一個頁面的時候，總會出現不知所措的幾秒鐘。除了由於對css中的各類屬性的不熟練以外，更難爲人的是怎麼簡練的將這些屬性排列組合起來。其實靜下心來，仔細想想，無非就是總體-->局部這麼個思路。所謂總體，就是頁面的局，局部就是各自的總體到局部，再加上一些展現性的屬性的組合的這麼個過程。考慮好瀏覽器的兼容性，作一個儘可能完美的佈局，是寫好頁面樣式的關鍵一步。

但是，我老是但願能用盡可能少的代碼，來表現儘可能多的內容，可是，若是不考慮其餘因素，這一點很容易作到。好比 ，咱們要分列，flex足矣。但其餘因素終歸是必需要顧及的。

佈局方式

佈局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊佈局很是不方便，好比，垂直居中就不容易實現。

• 第一 標準流佈局

• 第二 浮動佈局

• 第三 定位佈局

案例一--水平居中

從一個最簡單的居中佈局提及

<div class="parent">
    <div class=""child></div>
</div>

就能夠有好多種實現方式，

• 好比第一種inline-block+text-align的常見方式：

.child{display:inline-block;}
.parent{text-align:center;}

這種方法兼容性比較好，雖然ie6,7不支持inline-block,可是咱們能夠經過

display:block;zoom:1 近似於 inline-block

• 第二種table+margin的方式,一樣是上例的結構：

.child{display:table;margin:0 auto;}

這種方式須要的css代碼很簡單，對ie8以上也能很好的支持，可是因爲ie6,7對display：table不認，可是咱們能夠將結構改爲table的結構也能達到效果。

• 第三種方式採用absolute+trasnform的方式

.parent{position:relative;}
.child{position:absolute;left:50%;transform:translateX(-50%);}

這種方式關鍵的一點是利用transform屬性，旋轉自身的50%。達到居中的效果。可是ie6,7,8均不能很好的支持。

• 第三種方式是經過flex+justify-content的組合實現的

.parent{display:flex;justify-content:center;}

這種方同第二種相似，css代碼比較簡單，這裏是不須要對子元素進行任何的設置，這是因爲flex的子元素默認是flex-item,寬爲元素寬。關於flex的詳細內容，能夠參考這個介紹flex佈局
固然，這裏的

justify-content:center;

也有替代的方法，能夠經過

.child{margin:0 auto;}

實現相同的效果。

案例二--垂直居中

垂直居中，這裏總結三種常見的方式

• 利用table-cell

.parent{display:table-cell;vertical-align:middle;}

這種方式兼容ie8及以上，對ie6,7能夠經過前面介紹的，改爲table的結構來兼容。

• 藉助定位和transform屬性

.parent{position:relative;}
.child{position:absolute;top:50%;transform:translateY(-50%)}

• css3的flex

.parent{display:flex;align-item:center;}

案例三--水平垂直居中

水平垂直居中就能夠綜合考慮前面的水平居中的一些方法和垂直居中的一下方法了。兼容性固然跟前面考慮的緣由也相似，這裏總結了三種。

• 基本水平居中方法加table-cell

.parent{text-align:center;display:table-cell;vertical-algin:center;}
.child{display:inline-block;}

• 定位+ transform屬性

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

• flex

.parent{display:flex;justify-content:center;align-items:center;}

這種狀況下，咱們也是不須要對.child進行特殊的設置就能夠達到垂直水平居中的效果。

關於佈局，固然確定還有更多的更好的方法。並且，從更宏觀的角度，還有對於全局的一個佈局，好比top固定，或者一部分定寬，一部分自適應等等要求，這裏僅僅是總結了一下常見的，這個須要不斷的在實踐中進行摸索和改進，css的學習不斷的累積很重要。