Js指令碼之jQuery學習筆記（4）

標籤：javascript   css   框模型   定位   

CSS之框模型和定位篇框模型

在排版Html的時候，除了對元素的顯示外觀進行美化，還會涉及到頁面元素的布局，於是引入了框的概念， 即我們對HTML裡面的元素排版以一個個框為基本單位。

元素div與span的異同

首先我們先來瞭解兩個元素

• div:
  屬於對內容分組使用的元素，沒有任何預定語義的通用元素

• span:
  屬於文本元素，沒有任何預定語義的通用元素

通俗的來說，沒有預定義即不同與

代表段落、代表超連結已經有了自己含義。
這兩個元素的區別在於,使用div修飾時，它有一個地區的概念，會另起一行，與上下的元素隔離，而使用span時，他會在本行生效。見代碼：
\>

\>

1234	<span>This is span1</span><span>This is span2</span><div>This is div1</div><div>This is div2</div>

在頁面上我們會看到：
650) this.width=650;" src="http://yotuku.cn/link?url=Hy-RSqN-x&tk_plan=free&tk_storage=tietuku&tk_vuid=f59154ca-6ce9-410c-914a-2653813ab1e1&tk_time=2016111221" alt="div與span的區別" style="border:1px solid rgb(221,221,221);margin:0px auto;height:auto;padding:3px;" />

當然我們也有方法讓他們通用，通過display屬性的inline和block值來實現對方的效果

1234	<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>

在頁面上我們會看到：
650) this.width=650;" src="http://yotuku.cn/link?url=HJk1ucE-g&tk_plan=free&tk_storage=tietuku&tk_vuid=f59154ca-6ce9-410c-914a-2653813ab1e1&tk_time=2016111221" alt="div與span互換" style="border:1px solid rgb(221,221,221);margin:0px auto;height:auto;padding:3px;" />

框模型中常用屬性

在一個框中包含了四個部分
650) this.width=650;" src="http://yotuku.cn/link?url=rycVyiEbg&tk_plan=free&tk_storage=tietuku&tk_vuid=f59154ca-6ce9-410c-914a-2653813ab1e1&tk_time=2016111221" alt="框模型樣本圖" style="border:1px solid rgb(221,221,221);margin:0px auto;height:auto;padding:3px;" />

• margin:外邊距，代表這距離瀏覽器視窗邊的距離

• border:邊框

• padding: 內邊距，代表內容地區到邊框的距離

• 內容地區:代表文字或圖片等內容的地區大小，有width和height兩個屬性值來定義

下面來看一段代碼

12345678910

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

本文出自 “DanielQu” 部落格，請務必保留此出處http://qujunorz.blog.51cto.com/6378776/1872205

Js指令碼之jQuery學習筆記（4）