|
|---|
| 標籤 | 語法 |
|
在html語法中沒有<div> ... </div>及<span> ... </span>這兩個標籤 這兩組對應標籤的目的，都是為了讓夾在裡面的元件被定義成一個區塊，被定義成一個區塊的好處是可以配合很多CSS語法進行設定，一些原本不能加上底色、框線的元件， 經過定義後，就可以用了。 兩個標籤的功能一樣，不過使用上還是有不同之處： <div class="..">..</div>，區塊物件，會換到下一行； <span class="...">.....</span>，為同軸物件，會將旁邊圖文放在同一行(用於插入小段落) | |
| 舉例1：(IE & NS有所不同) 這是<div style="background-color:orange;width=20pt">網頁研習室</div>的家 | |
| 結果1： 這是 網頁研習室 的家 | |
| 舉例2：(IE & NS有所不同) 這是<span style="background-color:orange;width=20pt">網頁研習室</span>的家 | |
| 結果2： 這是網頁研習室的家 | |
| width(寬度) | width:20px(給定一個值)或 :30%(使用百分比)或 :auto(讓瀏覽器自動調整) |
| height(高度) | height:20px(給定一個值)或 :30%(使用百分比)或 :auto(讓瀏覽器自動調整) |
| position(基準點位置) | position:absolute(絕對)或 :relative(相對)，絕對是指基準點位於網頁的最左上角，相對是指基準點位於上一個被定義區塊的最左上角。 |
| top(最上端位置) | top:100px以基準點為準，正值代表在基準點的下方，負值代表上方，值越大離基準點越遠。例如 top:-50px 就表示在基準點上方50像素的位置 |
| left(最左側位置) | left:100px以基準點為準，正值代表在基準點的右方，負值代表左方，值越大離基準點越遠。例如 left:-80px 就表示在基準點左方80像素的位置 |
| z-index(垂直螢幕高度) | z-index:100 沒有單位，數字越大位置越高，例如 z-index:200比z-index:50高，有了這個語法，就可以產生立體感了，數字大的會蓋住小的物件(IE & NS 不同)。 |
| visibility(設定顯示與否) | visibility:visible(顯示)或 :hidden(隱藏，仍然佔據畫面空間)。 |
| overflow (設定是否產生捲軸) | overflow:auto(當元件大於區塊時，自動產生捲軸)、scroll (不論元件大小，一律產生捲軸)、hidden(不論元件大小，一律不產生捲軸，所以超出區塊的部份就會隱藏不顯示)、visible(若元件大於區塊，則區塊自動撐大)。 |
| margin (設定區塊與外界之間留白的大小) | margin:3px 4px 2px 5px可以一次設定四個邊與外界之間的留白大小，依序是上、右、下、左。 | 如果只想設定其中一邊，我們就換個方式來寫： margin-top:3px margin-right:4px margin-bottom:2px margin-left:5px |
| padding (設定元件與區塊邊緣之間留白的大小) | padding:3px 4px 2px 5px可以一次設定四個方向留白大小，依序是上、右、下、左。 | 如果只想設定其中一個方向，我們就換個方式來寫： padding-top:3px padding-right:4px padding-bottom:2px padding-left:5px |