以防自己忘記寫的 網上找的
positon 與 display 的相互關係
元素分為內聯元素和區塊元素兩類（當然也有其它的），在內聯元素中有個非常重要的常識，即內兩元素是不可以設定區塊元素所具有的樣式，例如:width | height。
relative : 原來是什麼型別的依舊是什麼型別。
absolute | fixed ： 元素就被重置為了區塊元素，例如：打算為span元素指定大小，並絕對定位
span這是完全正確的，
span，這裡的display:block就是多餘的了。
position 與 float 的相互關係
乙個元素若設定了position:absolute | fixed; 則該元素就不能設定float。這是乙個常識性的知識點，因為這是兩個不同的流，乙個是浮動流，另乙個是「定位流(這是自己起的名字，呵呵)」。
但是 relative 卻可以。因為它原本所佔的空間仍然佔據文件流。
position: relative和position: absolute 都可以改變元素在文件中的位置，設定position: relative 或 position: absolute都可以讓元素啟用left、top、right、bottom 和 z-index 屬性。
網頁雖然看起來是平面的二維結構，但它其實是有z軸的，z軸的大小由z-index 控制，預設情況下，所有元素都是在z-index: 0 這一層的，這就是文件流。設定position: relative 或 position: absolute會讓元素浮起來（就像遊戲中的概念-多層圖層），也就是z-index大於0，它會改變正常情況下的文件流。不同的是position: relative 會保留自己在z-index:0 層的位置，但是它的實際位置可能因為設定了left、top、right、bottom值而偏離原來在文件流中的位 置，但對其他仍然在z-index:0層的元素位置不會造成影響。而position: absolute會完全脫離文件流，不再在z-index:0層保留佔位符，其left、top、right、bottom 值是相對於自己最近的乙個位置–設定了position: relative 或 position: absolute的祖先元素的，如果祖先元素都沒有設定position: relative 或 position: absolute，那麼就相對於body元素。
除了position: relative 和 position: absolute，float也能改變文件流，不同的是，float屬性不會讓元素「上浮」到另乙個z-index層，它仍然讓元素在z-index:0 層排列，float不像position: relative 和 position: absolute那樣，它不能通過left、top、right、bottom屬性精確地控制元素的座標，它只能通過float:left 和 float:right 來控制元素在同層裡「左浮」和「右浮」。float會改變正常的文件流排列，影響到周圍元素。
另乙個有趣的現象是position: absolute 和 float會隱式地改變display型別，不論之前什麼型別的元素（display:none除外），只要設定了position: absolute 或 float中任意乙個，都會讓元素以display:inline-block的方式顯示：可以設定長寬，預設寬度並不佔滿父元素。就算我們顯式地設定 display:inline或者display:block，也仍然無效（float在ie6 下的雙倍邊距bug就是利用新增display:inline來解決的）。值得注意的是，position: relative卻不改變display的型別。
1、position 對 float 的影響：float 可以說是定義同輩元素之間的位置關係，浮動元素相對于父元素，其位置的定義是確定不變的的：基於position:static/relative時的位置，向左側或右側靠近(乙個可能的錯誤的認識是，浮動元素會向左上角或右上角浮動)，
因此，position:static 和 position:relative 與 float 的效果可以疊加，
但 position:absolute、position:fixed 這兩個定位屬性依賴於自身元素之外的參照，將使 float 的效果無法表現出來。
2、浮動元素對文字的影響：浮動概念的基礎是**混排，因此同輩元素的在排版時如果浮動元素與非浮動元素之間發生覆蓋，無論是誰覆蓋誰，非浮動的元素內的文字將會被擠走，如下例：
.elm
.lffloat
no float，被擠走
3、浮動元素對父元素的影響：浮動元素的父元素丟失 block 高度，即使定義了高度，也無法影響其同輩浮動元素及其浮動的子元素的布局，預設情況下，如果父元素沒有定義高度，則父元素的內容會撐開父元素，達到自適應 block 高度的效果，浮動元素無法撐開其父元素的block 高度。
4、浮動元素對自身的影響：浮動元素將按 inline-block 形式布局（haslayout），即使將他設定為 display:inline;，因此，預設寬度自動擴充套件為100%的元素浮動之後，寬度由元素內容撐大，原來沒有高寬屬性的元素也變得可以定義高寬；如果出現重疊，浮動元素將疊加在非浮動的同輩元素之上（像是具有更大的z-index值）；
5、display, position, float 之間的相互關係：
1. 如果display等於none，則使用者端必須忽略position和float。在這種情況下，元素不產生盒子。
2. 否則，如果position等於absolute，則display與float皆強制為none(list-item保持不變)。盒子的位置由邊界偏移量確定。
3. 否則，如果float不等於none或該元素是根元素，則display強制為block(list-item保持不變)。
4. 否則，使用指定的display屬性。
1、絕對定位完全脫離普通流，因此絕對定位元素無法跟普通流搭建互動關係（普通流能影響絕對定位，絕對定位不影響普通流），這樣來說，在一些自適應布局場 景中，絕對定位就存在一些缺陷（需要更多的限制因素，非常不靈活）。如果希望用絕對定位實現你說的 float 或 inline-block 同樣的效果，這個時候一般是不推薦用 絕對定位。
2、對於浮動，這個屬性一般不是用來做布局的（偏向於排版），但是css2.1好像也就這個屬性 能夠滿足一些特定需求，所有才有了浮動布局。浮動相對絕對定位好處是，它預設可以影響行內布局，通過 clear 清除浮動也可以影響 塊布局，可以與普通流建立良好的互動。 而且浮動本身是脫離普通流的，在元素的水平定位上相比於 inline-block 更加靈活多變， 而 inline-block 的水平定位則更加有序。
3、inline-block，這個屬性也不是用來布局的（偏向於排版），但是在 css3 普及之前，它的用處也很大。該元素的盒子在行框中進行格式化，其順序與源html中的順序一一對應。 同時該元素不脫離普通流，這比浮動來說有更大的優勢，它可以跟普通流自然互動，而不必要借助去其他屬性。而且相比浮動，相鄰元素間的垂直對齊方 式，inline-block 比 float 更加靈活， float 格式化時有一條規則，就是越高越好（因此常常表現為頂端對齊），而 inline-block 在行內格式化，擁有更靈活的垂直對齊方式。應用：
如果使用了浮動，清除浮動就會成為你的***，而且如果你沒有良好的html/css 結構的話，清除浮動是乙個很複雜的事情。
inline-block 雖然避免了清除浮動的事情，但是會有另乙個***，即空白符問題。這個問題的解決方案也令人十分蛋疼，因為畢竟 inline-block 不是布局屬性，它僅僅是 行內級塊容器盒子。 同時，作為ifc環境中的格式化問題，垂直居中、行高等問題也有可能是乙個***。
其他：
其實在 css2.1中，利用** table 布局也是非常強大的方法。**布局在等高，同列等寬對齊，垂直居中對齊上面的優勢是其他方法很難媲美的。甚至於在自適應場景中，**布局的靈活性也非常出眾。
float: left|right; 可以自動排列自動折行, 但需要clear來配合清除浮動;
display: inline-block; 有些時候可以替代float實現相同的效果.
position: absolute|relative; 要配合top,left等定位;舉例:
float 1
float 2
inline block 1
inline block 2
position 1
position 2
表現:上面的是float, 中間的是inline-block, 下面的是position, 可以看出:
1. 當居右(右浮動)時, float是按先後順序來的, 先寫的排子右邊; 而inline-block則保持左右順序不變.
2. 在部分瀏覽器中(以上是在的firefox中), 空行或空格會影響到inline-block, 卻不會影響到float的block.
3. position只能配合left,right來定位, 如果去掉則重疊在一起; 不能借助clear等自動擴充套件容器.
4. 他們都有共同點, 如果包裹的是行級元素, 則寬度可以按內容寬度自適應.
使用場景:
**牆, 選項卡, 導航條等可以使用inline-block或float, 推薦inline-block, 但需要注意瀏覽器相容, 用float記得習慣性的使用clear.
tip等提示, 懸浮窗, 遮罩等, 建議使用position.
display運用與理解
display 規定元素應該生成的框的型別 以下是一些關於display比較常用的屬性值 值描述 none 元素不會顯示 block 此元素將顯示為塊級元素，此元素前後會帶有換行符。inline 預設。此元素會被顯示為內聯元素，元素前後沒有換行符。line block 行內塊元素。css2.1 新增...
visibility與display的區別
visibility與display之設定元素顯隱的區別 在css裡的visibility 屬性，通常其值被設定成visible 或hidden。visibility hidden 相當於display none，能把元素隱藏起來，但是兩者的區別在於 display none 不顯示對應的元素，在文...
display與visibility的使用 區別
display none 隱藏元素，且此元素無物理位置 visibility hidden 隱藏元素，但元素的物理位置依然存在 因為display none導致頁面上無此元素的空間，js就獲取不到此元素的資訊，此時應用visibility hidden來代替display none display ...