CSS布局 ——display，position， float

頁面布局，或者是在頁面上做些小效果的時候經常會用到 display,position和float 屬性

 一、塊級元素與行内元素

首先談談人們經常提及的塊級元素和行内(内聯)元素

p, ul, form, div等元素被稱為塊級元素，這些元素顯示為一塊兒内容（會自動換行），

span, input 等元素稱為行内元素，這兩者主要差別就是塊級元素會從上到下一個個垂直排列，每個自占一行，如下即使兩個div之間沒任何元素，綠色的div仍然會顯示在紅色div下方，而不是右方

<div style="height: 100px; width: 100px; background-color: Red;">
</div>
<div style="height: 100px; width: 100px; background-color: Green;">
</div>      

而行内元素在一行中水準排列，行内元素的高度由其内容撐開，不可顯示的設定其高度，這就是為什麼我們一次次的在span上設定height屬性不好使的原因。

簡單了解了這些知識，讓我們看看display常用的幾個屬性。

值	描述
none	此元素不會被顯示。
block	此元素将顯示為塊級元素，此元素前後會帶有換行符。
inline	此元素會被顯示為内聯元素，元素前後沒有換行符。
inline-block	行内塊元素。（CSS2.1 新增的值）

我們在顯示隐藏元素的時候經常會用到把display設為none或者’’，設為none效果很明顯，就是讓元素脫離文檔流，不顯示，不占文檔空間。

元素預設屬性block或inline。inline-block屬性是CSS2.1新加值，IE8以上及其他主流浏覽器都已經支援，它可以使元素像行内元素那樣水準一次排列，但是内容符合塊級元素行為，能夠顯示設定寬，高。

還有一點兒很有意思，可以通過不同的指派改變元素生成框的類型，也就是說，通過将display屬性設定為block，可以使行内元素表現的想塊級元素一樣，反之亦然。

二、定位

要想了解CSS元素定位就需要了解position屬性了，position屬性有幾個常用值如下

值	屬性
inhert	規定應該從父元素繼承 position 屬性的值。
static	預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
relative	生成相對定位的元素，相對于元素本身正常位置進行定位。是以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
absolute	生成絕對定位的元素，相對于 static 定位以外的第一個祖先元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	生成絕對定位的元素，相對于浏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

CSS有三種基本的定位機制：普通流，浮動和絕對定位

普通流:是預設定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來的static時就會按照普通流定位，這也是我們最常見的方式。

相對定位:比較簡單，對應position屬性的relative值，如果對一個元素進行相對定位，它将出現在他所在的位置上，然後可以通過設定垂直或水準位置，讓這個元素相對于它自己移動，在使用相對定位時，無論元素是否移動，元素在文檔流中占據原來空間，隻是表現會改變。

普通流：
<div style="border: solid 1px #0e0; width:200px;">
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
 </div>
           

相對定位：
<div style="border: solid 1px #0e0; width:200px;">
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green; position:relative; top:100px; left:100px;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
    </div>
           

上面例子可以看出，對綠色div進行相對定位，分别右移，下移100px後，第二個紅色div位置并沒有相應變化，在原位置。而綠色div在紅色div右側。

相對定位可以看作特殊的普通流定位，元素位置是相對于他在普通流中位置發生變化，而絕對定位使元素的位置與文檔流無關，也不占據文檔流空間，普通流中的元素布局就像絕對定位元素不存在一樣。

絕對定位的元素的位置是相對于距離他最近的非static（relative，absolute）祖先元素位置決定的。如果元素沒有已定位的祖先元素，那麼他的位置就相對于初始包含塊兒（body或html）元素。

因為絕對定位與文檔流無關，是以絕對定位的元素可以覆寫頁面上的其他元素，可以通過z-index屬性控制疊放順序，z-index越大，元素位置越靠上。

絕對定位：
<div style="border: solid 1px #0e0; width:200px;position:relative;">
    <div style="height: 100px; width: 100px; background-color: blue;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Green;
     position:absolute; top:100px; left:100px;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Red;">
    </div>
</div>
           

這時可以看出，綠色div是相對于父元素，也就是綠框div進行的移位，而紅色和藍色div進行正常布局時就像綠色div不存在一樣。

最後要說的就是fixed屬性了，應用fixed也叫固定定位，固定定位是絕對定位的，固定定位的元素也不包含在普通文檔流中，差異是包含元素是視口（viewport），總是顯示在固定位置，項懸浮在那。

三、浮動

首先介紹一些浮動模型的基本知識：浮動模型也是一種可視化格式模型，浮動的框可以左右移動（根據float屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。浮動元素不在文檔的普通流中，文檔的普通流中的元素表現的就像浮動元素不存在一樣.

<div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green; ">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>
           

<div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green; ">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>
           

//紅框左移,覆寫綠框 
<div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>
           

//都向左浮動,父元素寬度為0
 <div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
        </div>
    </div>