頁面布局排版-block，inline，float，relative，absolute等
1.span和div的區別
div是塊元素(block)，span是行內元素(inline)；
span什麽事也不會做，它存在的目的在與為開發者給它所圍繞的元素指定樣式。div類似，不過它引入了行分隔（其實實質是同第一點）
塊元素是指另起一行開始渲染的元素，行內元素是指不需另起一行渲染的元素
示例代碼：
<div style="background-color: wheat;">我是不帶任何樣式的的div，我是塊級元素，塊級元素獨占一行</div> <span style="background-color: red;">我是不帶任何樣式的的span1,我是行內元素</span> <span style="background-color: green;">我是不帶任何樣式的的span2，我是行內元素</span>
顯示結果：
2.display:block,display:inline和display:inline-block的區別
1） display:block
把元素定義為塊級元素；獨占一行，width默認是auto；
可以設置width和height屬性，但即使設置了width屬性，塊級元素還是獨占一行，可以設置margin和padding屬性。
示例代碼：
<span style="display:block;background-color: blue;">我是塊級的span</span> <span style="display:block;background-color: wheat;width="100px">我是塊級的span，並設置了width屬性為100px，但是width並不生效</span> <div style="background-color: red;width="100px">我是div，我設置了width為100px，但是它並不生效</div>
結果：
2） display:inline
把元素定義為行內元素；不會獨占一行，多個相鄰的行內元素會排在一行，直到一行排列不下；
inline元素設置width、heigth無效；
可以設置margin和padding
示例代碼：
<div style="display: inline;background-color: wheat">我是設置了inline的div，沒有設置寬和高</div> <div style="display: inline;background-color: yellow;width:100px;height:30px">我是設置了inline的div，設置了寬100px，高30px,但是沒生效</div> <div style="display: inline;background-color: blue;margin:5px;padding:5px">我是設置了inline的div，設置了marging 5px，padding5px</div>
運行結果：
3） display:inline-block 把對象呈現為inline對象，但是將對象的內容呈現為塊級對象。就是說，inline-block的元素不會獨占一行（inline元素），同時可以使該元素具有塊級元素可以設置height和width的能力，設置padding和margin也有效。
示例代碼：
<div style="display: inline-block;background-color: wheat">我是設置了inline-block的div，沒有設置寬和高</div> <div style="display: inline-block;background-color: yellow;width:400px;height:30px">我是設置了inline-block的div，設置了寬300px，高30px,設置生效了</div> <div style="display: inline-block;background-color: blue;margin:5px;padding:5px">我是設置了inline-block的div，設置了marging 5px，padding5px</div>
顯示結果：
3.position：relative和position：absolute的區別以及float
relative：相對於自己原本的位置偏移，未脫離文檔流和文本流
absolute：相對於最近的position不是static的父級元素的位置偏移，脫離文檔流和文本流
float和fixed會脫離文檔流，但不脫離文本流
示例代碼：
<span>我是正常的span</span>正常 span之外的文本流 <span style="float: left">我是float 的span</span>float span之外的文本流
名詞解釋：
文檔流：normal flow，傳統html文檔的文本布局，相對於盒子模型
文本流：相對於文字段落
4.什麽時候該用relative，什麽時候該用absolute？
一般是兩個組合起來使用，一個頁面先排出大的塊用relative（如left，center，right這種大的版面），大塊中的內容再用absolute來排版，也可以用relative；或者一個大的塊裏面元素比較多時也可以再用relative劃分一次
附一段練習的代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <span>我是正常的span</span>正常 span之外的文本流 <span style="float: left">我是float 的span</span>float span之外的文本流 <div style="display: inline-block;background-color: wheat">我是設置了inline-block的div，沒有設置寬和高</div> <div style="display: inline-block;background-color: yellow;width:400px;height:30px">我是設置了inline-block的div，設置了寬300px，高30px,設置生效了</div> <div style="display: inline-block;background-color: blue;margin:5px;padding:5px">我是設置了inline-block的div，設置了marging 5px，padding5px</div> <div style="display: inline;background-color: wheat">我是設置了inline的div，沒有設置寬和高</div> <div style="display: inline;background-color: yellow;width:100px;height:30px">我是設置了inline的div，設置了寬100px，高30px,但是沒生效</div> <div style="display: inline;background-color: blue;margin:5px;padding:5px">我是設置了inline的div，設置了marging 5px，padding5px</div> <div style="background-color: wheat;">我是不帶任何樣式的的div，我是塊級元素，塊級元素獨占一行</div> <span style="background-color: red;">我是不帶任何樣式的的span1,我是行內元素</span> <span style="background-color: green;">我是不帶任何樣式的的span2，我是行內元素</span> <span style="display:block;background-color: blue;">我是塊級的span</span> <span style="display:block;background-color: wheat;width="100px">我是塊級的span，並設置了width屬性為100px，但是width並不生效</span> <div style="background-color: red;width="100px">我是div，我設置了width為100px，但是它並不生效</div> <div style="display: block;background-color: orange;">我是block的div，display:block塊的 width 屬性的默認值是 auto 就是自動 撐滿整行</div> <div style="display: block;background-color: green;float:left">我是前一個div加了float left屬性</div> <div style="background-color: blue;height: 30px;position:relative;top:15px;">我是relative的div,我在文檔流中是存在的，我的位置是相對於我應該在的文檔流中的位置</div> <div style="background-color: red;float:left;position:relative">我是relative float left 的div,跟absolute一樣我具有inline-block的屬性</div> <div style="background-color: yellow;height: 30px;position:absolute;border:1px red;">我是absolute的div，我在文檔流中不占位置，我的位置是相對於我最靠近的那個非static的父級元素的位置，我後面的元素可以當我不存在,而且我的display屬性自動變成inline-block了</div> <span style="background-color: blue;height: 30px;">我是一般的span，我被前面的absolute div給擋住了，大家看不見我看不見我</span> <div style="background-color: blue;height: 30px"><span style="background-color: grey;height: 30px">我是包含在div裏面的span，span一般height不生效</span></div> <div style="background-color: red;height: 30px"><span style="background-color: grey;display:inline-block; height: 30px">我是包含在div裏面的span，display設置為inline-block後height生效</span></div> </body> </html>View Code
顯示結果：
頁面布局排版-block，inline，float，relative，absolute等