阿嬤都看得懂的基礎 CSS 樣式－區塊篇

圖片標籤 <img> 和區塊標籤 <div> 可以一起談，因為我們可以把圖片想成很大的區塊，只是這個區塊的背景是那張圖片。想到區塊，會想到需要哪些屬性呢？寬度、高度、位置應該是最核心的區塊屬性，畢竟我們使用區塊，就是為了要確定內含元素的分布範圍嘛！不過，我們也會需要知道這個區塊的背景顏色、背景圖片、還有邊框，這樣我們才可真正看見這個區塊長怎樣。背景相關的屬性，都有 background- 前綴，而邊框相關的屬性，都有 border- 前綴喔！當然，區塊相關的屬性也不只這邊介紹的這些，這邊只是列舉出比較常用的喔！

• 高度、寬度：height, width，值是數字加上長度單位。我們前面提過相對長度單位 %，是以父元素的比例為準。
• 位置的問題比較麻煩，因為在 CSS 中，position 屬性並不是用來告訴瀏覽器這個區塊的實際位置，而是這個區塊決定位置的方式。目前先知道 3 種值就可以了：
  • static 是預設值，區塊該在哪裡就在哪裡，沒辦法另外決定位置喔！
  • relative 相對位置，是允許區塊進行相對移動，不過會在原本的位置留下空白。移動相對位置的方式，是另外使用 top, bottom, left, 或者 right 屬性，值是數字加上長度單位，會讓區塊從原本應該在的地方，做出往上或下或左或右的偏移。
    我們先寫四個區塊元素出來。為了方便展示起見，我先將區塊放上背景顏色。

  div>
  <div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">區塊一</div>
  <div style="margin:2px; height:100px; width:100px; background-color:violet; color:white; text-align:center; line-height:100px;">區塊二</div>
  	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">區塊三</div>
  	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">區塊四</div>
  /div>
  ``
  式多了以後，標籤是不是看起來超長超難讀的？這個我們會在後天告訴各位阿嬤該怎麼處理，標籤看起來才會像阿嬤幫乖孫整理過的房間一樣整潔清爽！
  [](https://i.imgur.com/SFFGqYn.png)
  我們把區塊二放上相對位置，並且距離原本區塊上邊與左邊各 20px。CSS 是這樣寫：
  ``css
  position: relative;
  top: 20px;
  left: 20px;
  ``
  們會看見，區塊二被往下與往右推了，而且在原本區塊二的位置，留下了尺寸和區塊二相同的空白：
  	![](https://i.imgur.com/zEjR8rs.png)
   **absolute 絕對位置**，是直接**讓區塊放飛自我，想去哪就去哪**，也**不會在原本的位置留下空白**。移動絕對位置的方式，也另外是使用 top, bottom, left, 或者 right 屬性，值是數字加上長度單位。不過，因為整個區塊已經放飛自我，沒有原本的位置了，所以這裡的**上下左右，會是和父元素邊框的距離**喔！也因為這樣，**父元素**的 position 屬性不能是 static 預設值，**必須指定成 relative 或 absolute** 才行！
  因此，讓我們把上面區塊二的位置改為絕對位置，
  ``css
  position: absolute;
  top: 20px;
  left: 20px;
  ``
  們會看見，區塊二從父元素的左上邊框往右下推了 20px，而原本區塊二的位置完全消失，完全沒留下空白：
  [](https://i.imgur.com/Zf9ySR8.png)
  
  

• 背景顏色：background-color，值目前也是先用顏色對應的英文文字就可以了。
• 邊框：border，值是顏色、寬度、以及線條樣式。線條樣式的值可能是實線 solid, 虛線 dashed, 雙線 double 等等。記得各項值間是用空白隔開喔！
  值得注意的是，這些多值的屬性，都可以分開寫定個別屬性。分開寫定的好處，是可以指定是上下左右哪條邊框。只寫 1 個值的時候，就是 4 條邊框都共享這個屬性。寫 2 個值時，第一個值表示垂直邊 (左、右)，第二個值表示水平邊 (上、下)。寫 3 個值時，分別是上邊、水平邊、下邊。寫 4 個值時，分別是上、右、下、左。「上、右、下、左」這個順序滿重要的，推薦各位阿嬤可以記憶起來，因為很多 CSS 的屬性順序都是長這樣。例如，我們有
• 邊框寬度 border-width，值是數字加上長度單位。
• 邊框顏色 border-color。
• 邊框樣式 border-style。
• 邊框圓角 border-radius，值是數值加上長度單位，表示邊框圓角的半徑長度。
  例如，我們可以這樣寫：

border:black 5px;
border-style: dashed solid double dotted;
border-radius:20px;

而把上面的樣式套入 div 標籤後，再指定寬高都為 200px 後，看起來就會像這樣：

<div style="height: 200px; width: 200px; border:black 5px; border-style: dashed solid double dotted; border-radius:20px"></div>

上面這個標籤，渲染出來就會長這樣：

對於區塊比較熟悉以後，我們就可以來放入背景圖片囉！背景圖片的放置是這樣的：

• 背景圖片：background-image，那值呢？我們可以想想，既然是背景圖片，那值當然就是某張圖片吧？你是對的，但是我們也說過，我們都只能夠用文字與瀏覽器溝通，那這邊要怎麼辦呢？我們會告訴瀏覽器存放圖片的位址，這個位址可以是網址。不過，在使用網址的時候，我們的寫法比較特別，必須用 url 字樣加上一對括弧，並且把網址填在括弧中。看起來會像這樣：

	background-image: url(https://i.imgur.com/4ndjo3V.png)

好的，那我們就寫出這樣的 HTML 標籤就對了吧：

<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 100px; width: 100px;"></div>

結果好像很不對啊啊啊：

因為我的原圖是長這樣的才對：

為什麼會這樣呢？我們可以把 div 標籤對應的區塊元素當成一個相框，背景圖片當作裡面的相片。當我們的照片寬高大過這個區塊的時候，就自動會被剪裁掉了。那這個問題應該怎麼解呢？就等我們明天詳細解釋該怎麼處理背景圖片囉！