CSS之框模型和定位篇
框模型
在排版Html的時候，除了對元素的顯示外觀進行美化，還會涉及到頁面元素的佈局，於是引入了框的概念， 即我們對HTML裏面的元素排版以一個個框爲基本單位。
元素div與span的異同
首先我們先來了解兩個元素
div:
屬於對內容分組使用的元素，沒有任何預定語義的通用元素span:
屬於文本元素，沒有任何預定語義的通用元素
通俗的來說，沒有預定義即不同與
代表段落、代表超鏈接已經有了自己含義。
這兩個元素的區別在於,使用div修飾時，它有一個區域的概念，會另起一行，與上下的元素隔離，而使用span時，他會在本行生效。見代碼：
<span>This is span1</span> <span>This is span2</span> <div>This is div1</div> <div>This is div2</div> |
在頁面上我們會看到：
當然我們也有方法讓他們通用，通過display屬性的inline和block值來實現對方的效果
<span style="display:block">This is span1</span> <span>This is span2</span> <div style="display:inline">This is div1</div> <div style="display:inline">This is div2</div> |
在頁面上我們會看到：
框模型中常用屬性
在一個框中包含了四個部分
margin:外邊距，代表這距離瀏覽器窗口邊的距離
border:邊框
padding: 內邊距，代表內容區域到邊框的距離
內容區域:代表文字或圖片等內容的區域大小，有width和height兩個屬性值來定義
下面來看一段代碼
<style type="text/css">
.box{
width:200px;
height:200px;
margin:30px;
padding:20px;
border:30px;
}
</style>
<div class="box">this is box</div> |
生成html後，我們可以在瀏覽器中看到，”this is box”是漂浮在中間的，這時候通過查看網頁源碼的style就能看到上面的框模型圖了～
框模型當然還有更多具體的邊距和邊框選項，針對邊距的上下左右來設置具體的值，生成不規則的四邊形，以及一些多樣化的邊框屬性，如虛線、實線、凹陷、突出等，由於我們目標是先學會這些概念，這裏不再具體說明。
定位
在瞭解了框模型之後，我們需要進一步來瀏覽器窗口中固定其位置，定義不同的框之間的位置關係。
| 屬性 | 說明 |
|---|---|
| position | 定義元素在頁面的定位方式 |
| left | 制定元素與最近一個具有定位設置的父對象左邊的距離 |
| right | 制定元素與最近一個具有定位設置的父對象右邊的距離 |
| top | 制定元素與最近一個具有定位設置的父對象上邊的距離 |
| bottom | 制定元素與最近一個具有定位設置的父對象下邊的距離 |
| float | 制定元素是否以及如何浮動，圖文結合時使用 |
總結：框模型加上定位功能，基本上已經覆蓋了頁面排版了，CSS的基礎知識也終於學完了，下章開始學習jQuery入門～