摘要：布局定位浮動外邊距操縱的好處之一是，它能夠控制頁面布局而不需要使用表現(xiàn)性標(biāo)記。但是布局被誤認為是難以理解的，在初學(xué)者當(dāng)中，這種想法相當(dāng)普遍。是一個標(biāo)準(zhǔn)的行內(nèi)元素，行內(nèi)元素可以在段落中包裹文字而不打亂段落的布局。

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

CSS的好處之一是，它能夠控制頁面布局而不需要使用表現(xiàn)性標(biāo)記。但是CSS布局被誤認為是難以理解的，在初學(xué)者當(dāng)中，這種想法相當(dāng)普遍。造成這種情況的主要原因是瀏覽器對CSS的解析不一致導(dǎo)致的。
所有的CSS布局技術(shù)的根本都是3個基本概念：定位，浮動和外邊距操縱。這些布局技術(shù)其實沒有本質(zhì)的差異。要掌握它們也不用花很長的時間。

在html中每一個元素都有默認的"display"屬性。這與元素的類型有關(guān)，對于大多數(shù)元素，它們的默認值是inline和block。一個‘block’通常被稱作‘塊級元素’，而一個‘inline’通常被稱作‘行內(nèi)元素’。

div是最常見的標(biāo)準(zhǔn)塊級元素。一個塊級元素會新開始一行并盡可能的鋪滿整行的屏幕。其他的常見塊級元素有p，form。html5的新元素有header，footer，section等等。

span是一個標(biāo)準(zhǔn)的行內(nèi)元素，行內(nèi)元素可以在段落中包裹文字而不打亂段落的布局。a元素是最常用的行內(nèi)元素，它通常被用作鏈接。
eg:把li元素改成inline，制作水平菜單。

另一些常用的標(biāo)記比如script，它的屬性就是none。display:none通常被Javascript用來在不刪除元素的情況下隱藏或者顯示元素。
它和visibility屬性不一樣。display:none不會保留顯示本該元素的空間。而visibility:hidden;則會保留該元素的空間。

很多情況你可能會使用到很多的box填滿整個網(wǎng)格,過去我們使用的方法是float屬性,但現(xiàn)在使用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屬性。你可以把它的值設(shè)為top。

你需要設(shè)置每一列的寬度

如果html源代碼中標(biāo)簽之間有空格，那么列于列之間會產(chǎn)生間隙。

如下代碼

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

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

新的flex通常被用來使用flex布局，非常的遺憾最近關(guān)于flex的變動太多，很多瀏覽器的實現(xiàn)也不盡相同。所以我簡單的介紹一下他們的使用，下面的例子只能在firefox和chrome中實現(xiàn)。

 .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標(biāo)準(zhǔn)解決方案》一書的布局章節(jié)。