Js腳本之jQuery學習筆記（4）

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入門～