CSS佈局總覽(1)

css 佈局 定位 浮動 外邊距操縱 display flex

---

CSS的好處之一是，它可以控制頁面佈局而不須要使用表現性標記。可是CSS佈局被誤認爲是難以理解的，在初學者當中，這種想法至關廣泛。形成這種狀況的主要緣由是瀏覽器對CSS的解析不一致致使的。
全部的CSS佈局技術的根本都是3個基本概念：定位，浮動和外邊距操縱。這些佈局技術其實沒有本質的差別。要掌握它們也不用花很長的時間。

display屬性

在html中每個元素都有默認的'display'屬性。這與元素的類型有關，對於大多數元素，它們的默認值是inline和block。一個‘block’一般被稱做‘塊級元素’，而一個‘inline’一般被稱做‘行內元素’。

block

div是最多見的標準塊級元素。一個塊級元素會新開始一行並儘量的鋪滿整行的屏幕。其餘的常見塊級元素有p，form。html5的新元素有header，footer，section等等。

inline

span是一個標準的行內元素，行內元素能夠在段落中包裹文字而不打亂段落的佈局。a元素是最經常使用的行內元素，它一般被用做連接。
eg:把li元素改爲inline，製做水平菜單。

none

另外一些經常使用的標記好比script，它的屬性就是none。display:none一般被Javascript用來在不刪除元素的狀況下隱藏或者顯示元素。
它和visibility屬性不同。display:none不會保留顯示本該元素的空間。而visibility:hidden;則會保留該元素的空間。

inline-block

不少狀況你可能會使用到不少的box填滿整個網格,過去咱們使用的方法是float屬性,但如今使用inline-block,以下兩種方法:

/*使用float屬性進行浮動元素*/
.box {
    float: left;
    width: 200px;
    height: 100px;
    margin: 1em;
}

.after-box {
    clear: left;
}

/*使用inline-block值將盒子定義inline-block，相比於上面的float法進行浮動元素減小了對後面元素的清除浮動*/
.box {
    display: inline-block;
    width: 200px;
    height: 100px;
    margin: 1em;
}

在使用inline-block進行佈局的時候要注意如下三點：

• vertical-align會影響到inline-block屬性。你能夠把它的值設爲top。

• 你須要設置每一列的寬度

• 若是html源代碼中標籤之間有空格，那麼列於列之間會產生間隙。

以下代碼

nav {
    display: inline-block;
    vertical-align: top
    width: 25%;
}

.column {
    display: inline-block;
    vertical-align: top;
    width: 75%;
}

flex

新的flex一般被用來使用flex佈局，很是的遺憾最近關於flex的變更太多，不少瀏覽器的實現也不盡相同。因此我簡單的介紹一下他們的使用，下面的例子只能在firefox和chrome中實現。

.container {
    display: flex;
    display: -webkit-flex;
    height: 100px;
    margin-top: 50px;
}

.one {
    -webkit-flex: initial;
            flex: initial;
    width: 200px;
    min-width: 100px;
}

.two {
    -webkit-flex: none;
            flex: none;
    width: 200px;
}

.three {
    -webkit-flex: 1;
            flex: 1;
}

.four {
    -webkit-flex: 2;
            flex: 2;
}

小屏幕下效果如圖

大屏幕下效果以下

flex還能夠解決原來css中一個比較讓人頭痛的問題，就是兩盒子的垂直居中。

body {
    margin: 0;
    padding: 0;
}

.big {
    height: 500px;
    margin-top: 50px;
    display: -webkit-flex;
    display: flex;
    background-color: #0f0;
}

.small {
    margin: auto;
    background-color: #0ff;
}

效果以下圖所示:

css佈局(1)就介紹到這裏。

原文同步於 http://penouc.com

---

資料來自： http://http://zh.learnlayout.com/toc.html和《精通css:高級Web標準解決方案》一書的佈局章節。