iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 10

[Day 10] 阿嬤都看得懂的基礎 CSS 樣式-區塊篇

阿嬤都看得懂的基礎 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>
    

    樣式多了以後,標籤是不是看起來超長超難讀的?這個我們會在後天告訴各位阿嬤該怎麼處理,標籤看起來才會像阿嬤幫乖孫整理過的房間一樣整潔清爽!

    讓我們把區塊二放上相對位置,並且距離原本區塊上邊與左邊各 20px。CSS 是這樣寫:

      	position: relative;
      	top: 20px;
      	left: 20px;
    

    我們會看見,區塊二被往下與往右推了,而且在原本區塊二的位置,留下了尺寸和區塊二相同的空白:

    • absolute 絕對位置,是直接讓區塊放飛自我,想去哪就去哪,也不會在原本的位置留下空白。移動絕對位置的方式,也另外是使用 top, bottom, left, 或者 right 屬性,值是數字加上長度單位。不過,因為整個區塊已經放飛自我,沒有原本的位置了,所以這裡的上下左右,會是和父元素邊框的距離喔!也因為這樣,父元素的 position 屬性不能是 static 預設值,必須指定成 relative 或 absolute 才行!
      因此,讓我們把上面區塊二的位置改為絕對位置,
      	position: absolute;
      	top: 20px;
      	left: 20px;
    

    我們會看見,區塊二從父元素的左上邊框往右下推了 20px,而原本區塊二的位置完全消失,完全沒留下空白:

  • 背景顏色: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 標籤對應的區塊元素當成一個相框,背景圖片當作裡面的相片。當我們的照片寬高大過這個區塊的時候,就自動會被剪裁掉了。那這個問題應該怎麼解呢?就等我們明天詳細解釋該怎麼處理背景圖片囉!


上一篇
[Day 9]阿嬤都看得懂的基礎 CSS 樣式-文字篇與標籤換行 bug
下一篇
[Day 11] 阿嬤都看得懂的基礎 CSS 樣式-圖片篇
系列文
你阿嬤成為網頁前端工程師的第一步30

1 則留言

0
南國ㄟ安迪
iT邦新手 5 級 ‧ 2021-09-25 22:55:50

背景相關的屬性,都有 background- 前綴,而邊框相關的屬性,都有 border- 前綴喔

晚上好
地方的阿罵想問:文章中前綴指的是?

啊,阿嬤不小心暴露出自己曾經念過語言學... 前綴 (prefix) 指的是某些共同的文字部分。例如,背景顏色這個樣式是 background-color、背景尺寸這個樣式是 background-size,都有 background- 這個共同的文字部分。

我要留言

立即登入留言