---
# System prepended metadata

title: "\U0001F3C5 5/4(三) 每日切版任務 - HTML 標籤元素、CSS 判斷"
tags: [公益程式體驗營 - 2022]

---

---
tags: 公益程式體驗營 - 2022
---

# 🏅 5/4(三) 每日切版任務 - HTML 標籤元素、CSS 判斷
## 問題 

* 依照下列 HTML 與 CSS 程式碼內容判斷，請分享以下 HTML 標籤
a. p、span、div、a 各為什麼顏色
b. p、span、div、a、img 是區塊元素 (block) 還是行內元素 (inline)？

```
HTML 程式碼

<p class="green yellow orange">
我是P段落，文字顏色是什麼呢?區塊元素還是行內元素呢?
</p>

<span class="red yellow green">
我是span，文字顏色是什麼呢?區塊元素還是行內元素呢?
</span>

<div class="blue orange red">
我是div，文字顏色是什麼呢?區塊元素還是行內元素呢?
</div>

<a class="yellow blue green">
我是a連結，文字顏色是什麼呢?區塊元素還是行內元素呢?
</a>

<img>我是img，區塊元素還是行內元素呢?</img>
```

```
CSS 程式碼

.orange {
    color: orange;
}

.blue {
    color: blue;
}

.red {
    color: red;
}

.yellow {
    color: yellow;
}

.green {
    color: green;
}
```
<!--
```
ans:
--a--
p:green
span：green
div：red
ａ：green

--b--
p：區塊元素 block
span：行內元素 inline
div：區塊元素 block
ａ：行內元素 inline
img：行內元素 inline

```
-->
---

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  -->

回報區
---

<!-- 1. kc_tw  
a. green green red green
b. block inline block inline inline
-->

<!-- 2. Bruno Yu
答案：
Codepen：https://codepen.io/bruno-yu/pen/GRQJgJP
1.1. 答: 綠色; 區塊元素
1.2. 答: 綠色; 行內元素
1.3. 答: 紅色; 區塊元素
1.4. 答: 綠色; 行內元素
1.5. 答: 黑色; 行內元素 
總回覆:
a. 綠色、綠色、紅色、綠色
b.區塊、行內、區塊、行內、行內
-->

<!-- 3. rejennylo
ans:
p：green / block
span：green / inline
div：red / block
ａ：green / inline
img：inline
-->

<!--4. Alphacostankion#8475
ans:
--a--
p: green
span: green
div: red
a: green

--b--
p: block
span: inline
div: block
a: inline
img: inline
-->

<!-- 
5. bonnieli1414#4906
ans:

1.P段落，文字顏色是green；區塊元素

2.span，文字顏色是green；行內元素

3.div，文字顏色是red；區塊元素

4.a連結，文字顏色是green；行內元素

5.img，行內元素；
-->

<!-- 
6. Gimmy#6354

問題 a
--------------
p	：orange
span：green
div	：red
a	：green

問題 b
--------------
p	：inline
span：inline
div	：block
a	：inline
img	：inline
-->

<!-- 
7. Elena Chang#0956

p: green, block
span: green, inline
div: red, block
a: green, inline
img: inline

-->

<!--
8. JackC JackC#0411

Ans:
p: green, 區塊元素
span: green, 行內元素
div: red, 區塊元素
a: green, 行內元素
img: 行內元素
-->

<!--
9. hw#0715

ans:
--a--
p：綠
span：綠
div：紅
a：綠 

--b--
p：區塊元素
span：行內元素
div：區塊元素
a：行內元素
img：行內元素
-->

<!-- 10. Wendy
a. green green red green
b. 區塊 行內 區塊 行內 行內
-->

<!--11. LHchien  
p    | green | block
span | green | inline
div  | red   | block
a    | green | inline
img  |.      | inline
-->

<!--12. Bear Wang
答案：
Codepen：https://codepen.io/adaibear/pen/poaJvdN
p： green / 區塊
span： green / 行內
div： red / 區塊
a： green / 行內
img： 行內
-->

<!--12. Bear Wang
答案：
Codepen：https://codepen.io/adaibear/pen/poaJvdN
p： green / 區塊
span： green / 行內
div： red / 區塊

-->

<!-- 13. Josh Chen#4552
顏色
green:<p>,<span>,<a>
red:<div>
black:<img>
------------------------
inline:<a>,<span>
block:<p>,<div>
inline-block:<img>
-->


<!--14. Lemon
答案：
p： color: green / block element
span： color: green / inline element
div： color: red / block element
a: color: green / inline element
img: inline element

-->

<!--15. Art
答案：
TAG   |  COLOR  |  DISPLAY
---------------------------
p     |  green  |  block
---------------------------
span  |  green  |  inline
---------------------------
div   |  red    |  block
---------------------------
a     |  green  |  inline
---------------------------
img   |  N/A    |  inline
-->

<!--16. ewen#8354
p:區塊元素/綠色
span:行內元素/綠
div:區塊元素/紅
a:行內元素/綠
img:行內元素
-->

<!--17. Martin
答案：
css 後面的樣式會蓋住前面的樣式
p： color: green / block element
span： color: green / inline element
div： color: red / block element
a: color: green / inline element
img: inline element

-->

<!--18 TIN
https://codepen.io/tinchen/pen/xxYGbJJ
p: green,區塊
span: green,行內
div: red,區塊
a: green,行內
img: 行內
-->

<!-- 19. IreneLee
P: green / 區塊
span: green / 行內
div: red / 區塊
a: green / 行內
img: X / 行內
-->

<!-- 20. Patti Chiu Patti#7774
CodePen:
https://codepen.io/peiru-qiu/pen/GRQJgbg?editors=1100
Ans：
1.<P> 文字顏色「綠色」，為「區塊元素」
2.<span> 文字顏色「綠色」，為「行內元素」
3.<div> 文字顏色「綠色」，為「區塊元素」
4.<a> 文字顏色「紅色」，為「行內元素」
5.<img>  為「區塊元素」，為「行內元素」
-->

<!--21. Erica Chen#6929
Ans:
p: green / 區塊元素
span: green / 行內元素
div: red / 區塊元素
a: green / 行內元素
img: X / 行內元素

-->

<!-- 22. CloThEs
a.  p顏色為green
    span顏色為green
    div顏色為red
    a顏色為green

b.  p是區塊元素
    span是行內元素
    div是區塊元素
    a是行內元素
    img是行內元素
-->

<!-- 23. Jia-Hong Chen#3863
a.  p 顏色為 green
    span 顏色為 green
    div 顏色為 red
    a 顏色為 green

b.  p 是 block
    span 是 inline
    div 是 block
    a 是 inline
    img 是 inline
-->

<!--  24. Eric.S

Ans
p段落，顏色為green，是區塊元素
span ，顏色為green，是行內元素
div  ，顏色為red  ，是區塊元素
a連結，顏色為green，是行內元素
img  ，是行內元素 

-->

<!--25. yunyun
Ans:
p   | green | 區塊元素
span| green | 行內元素
div | red   | 區塊元素
a   | green | 行內元素
img | X     | 行內元素

-->

<!--26.jada1109#8756
Ans:
p: green, block
span: green, inline
div: red, block
a: green, inline
img: inline

-->

<!-- 27. su#7798
a.
    p: green
    span: green
    div: red
    a: green
b.
    p: 區塊元素 (block)
    span: 行內元素 (inline)
    div: 區塊元素 (block)
    a: 行內元素 (inline)
    img: 行內元素 (inline)
-->

<!--28 color color#4378
Ans:
-----------a----------b--------
p:       green     block
span:    green     inline
div:     red       block
a:       green     inline
img:               inline
-->

<!--29. BurnettMiao#0093
https://codepen.io/BurnettMiao/pen/NWyqqdg?editors=1100
解答:
p   // green // 區塊元素
span// green // 行內元素
div // red   // 區塊元素
a   // green // 行內元素
img //預設顏色// 行內元素
-->

<!-- mitour#0672
a: green, green, red, green
b: block, inline, block, inline, inline
-->

<!--31. Vicky Lin VickyLin#8680
1.區塊 綠
2.行內 綠
3.區塊 紅
4.行內 綠
5.行內

<!-- 32. Peng
a.
p--green / span--green / div--red / a--green

b.
p--block / span--inline / div--block / a--inline / img--inline 
-->


<!-- 33. Elvi EVC#1876
34. a. Green, Green, Red , Green
35. b. p: block, span: inline, div: block, a: inline, img: inline -->

<!-- 34. Noy
p:綠色 block
span:綠色 inline
div:紅色 block
a:綠色 inline
img: inline
-->

<!-- 35. JustinLiu
1. p: 綠 / block
2. span: 綠 / inline
3. div: 紅 /block
4. a: 綠 inline
5. img: inline

<!-- 36. Mylène
p：綠色 / 區塊元素
span：綠色 / 行內元素
div：紅色 / 區塊元素
a：綠色 / 行內元素
img：行內元素 -->

<!--37. 眠瀾#8857
p：green / block, span：green / inline, div：red / block,
a：green / inline, img：inline
-->

<!--38. Leo Song
p: green/block
span: green/inline
div: red/block
a: green/inline
img: inline
-->

<!--39. Lisa L.#0426
a. green, green, red, green
b. block, inline, block, inline, inline
-->

<!-- 40. Hao#2485
a: Green  , Green , Red  , Green
b  區塊元素,行內元素,區塊元素,行內元素,行內元素 
-->


<!-- 41. shujhen#7734
Codepen：https://codepen.io/shujhen/pen/ZErGGmw

Question： p、span、div、a 各為什麼顏色
Answer：<p>=綠色，<span>=綠色，<div>=紅色，<a>=綠色

Question： p、span、div、a、img 是區塊元素 (block) 還是行內元素 (inline)？
Answer：<p>=區塊元素，<span>=行內元素，<div>=區塊元素，<a>=行內元素，<img>=行內元素
-->

<!-- 42. EG#7172
我是P段落，文字顏色green，區塊元素。
我是span，文字顏色green，行內元素。
我是div，文字顏色red，區塊元素。
我是a連結，文字顏色green，行內元素。
我是img，行內元素。
-->

<!-- 43. Chi
	p => 區塊，綠色
	span => 行內，綠色
	div => 區塊，紅色
	a => 行內，綠色
	img => 行內
-->

<!-- 43. BeanHuang
https://codepen.io/Beanhuang/pen/KKQpdaE
p： green / 區塊
span： green / 行內
div： red / 區塊
a： green / 行內
img： 行內
-->

<!-- 44. Jim
p： green , 區塊
span： green , 行內
div： red , 區塊
a： green , 行內
img： 行內
-->

<!-- 42. NaRa#7954
a. p是green | span是green | div是red | a是green
b. p是block | span是inline | div是block | a是inline | img是inline-block
-->
<!-- 43.ozawa#8815
答案寫在codepen HTML內
https://codepen.io/PIN-HSIN/pen/JjMgdZr -->

<!-- 
44. Murmurline#6969 
答案：

|html 樣式 |顏色|
|-|-|
|p|綠|
|span|綠|
|div|紅|
|a|綠|

|html 樣式 |元素類型|
|-|-|
|p|block|
|span|inline|
|div|block|
|a|inline|
|img|inline| 
Codepen：https://codepen.io/murmurline/pen/XWZbmam
 -->

<!-- 45. Jie Du
Codepen：https://codepen.io/qgqonost-the-flexboxer/pen/KKQpdqY?editors=1100
1. green、區塊元素
2. green、行內元素
3. red、區塊元素
4. green、行內元素
5. 行內元素
-->

<!-- 45. Jenny_
Codepen：
1.P,區塊,green
2.span,行內,green
3.div,區塊,red
4.a,行內,green
5.img,行內

-->

<!-- 47. Muse
1.p，區塊元素，green
2.span，行內元素，green
3.div，區塊元素，red
4.a，行內元素，green
5.img，行內元素
-->

<!-- 48. RJRS
答案：
1. <p>     區塊元素  green 
2. <span>  行內元素  green
3. <div>   區塊元素  red
4. <a>     行內元素  green
5. <img>   行內元素  


Codepen:
https://codepen.io/murmurline/pen/XWZbmam -->

<!-- 49. 黑松胖#4836
答案：
1. p     block   green 
2. span  inline  green
3. div   block   red
4. a     inline  green
5. img   inline  
-->

<!-- 50. ChaoChao
ANS:
--a--
p: green
span: green
div: red
a: green
--b--
p: block
span: inline
div: block
a: inline
img: inline
-->
<!-- 51. 菟小歆#2154
1.A:綠色 B:區塊元素
2.A:綠色 B:行內元素</P>
3.A:紅色 B:區塊元素</P>
4.A:綠色 B:行內元素</P>
5.A:黑色 B:行內元素</P>
https://codepen.io/catmoon1017/pen/rNJVOZe
-->
<!-- 52. 諾拉#4800
答案
https://codepen.io/Naomi_riayun/pen/KKQpdYK
-->

<!-- 53.Jenniya#7490
         問題 a   /   問題 b
------------------------------
p	：  green    /   block
span：  green    /   inline
div	：   red     /   block
a	：  green    /   inline
img	：    -      /   inline
CodePen:https://codepen.io/nopjb43u7bskq8x/pen/jOZPbKj?editors=1100
-->


<!-- 54. 保羅 #9742 
答案
p block元素 綠色
span inline元素 綠色
div  block元素 綠色
a   inline元素 綠色
img inline元素 沒有色

-->

<!-- 55. 小鹿Kerwin#5730
1.p => green，區塊元素
2.span => green，行內元素
3.div => red，區塊元素
4.a => green，行內元素
5.img => 行內元素
-->


<!-- 56. LucyKo #6648
codepen:https://codepen.io/wdirwpsb-the-bold/pen/PoQqZoV
p:green 區塊元素 block
span：green 行內元素 inline
div：red 區塊元素 block
ａ：green 行內元素 inline
img：行內元素 inline
-->

<!-- 57. Tuhacrt#0008
a: green ,green ,red ,green //由css定義最後設定的class的最優先
b: block ,inline ,block ,inline ,inline
-->

<!-- 58. ling chang #1024
答案
1. div: 紅色 / p、span、a :綠色  
2. p: block
   span: inline
   div: block
   a: inline
   img: inline

-->

<!-- 阿風#6890  
1.a. 綠色:p/span/a 紅色:div
b.區塊元素:p/span/div 行內元素:a/img
2.我的Codepen網址：https://codepen.io/Afong-Wind/pen/vYdOLGV
-->


<!-- 60. 阿偉#4995
a. 
p -> green
span -> green
div -> red
a -> green

b.
p -> 區塊元素(block)
span -> 行內元素(inline)
div -> 區塊元素(block)
a -> 行內元素(inline)
img -> 行內元素(inline)

codepen : https://codepen.io/azmfvbbz-the-sans/pen/mdXJVrv

-->

<!-- 61. kuo
A- p(綠)、span(綠)、div(紅)、a 綠色(綠)
B- p(block)、 span(inline)、div(block)、a(inline)、img(inline)

codepen : https://codepen.io/sunny-sun/pen/gOvpPpq
-->

<!-- 62. Yawway
css樣式會以最下方的code承認樣式 
a. p:green / span:green / div:red / a:green
b. p:區塊   / span:行內  / div:區塊 / a:行內 / img:行內
-->
<!--63. qtrp#5635
a.當有多個顏色用css會依照最下面的樣式為主
p:green、span:green、div:red、a:green
b. p、div是 block 區塊元素
   a、span 是inline 行內元素
   img 是inline-block（img預設是inline
在排版上符合inline element的規則 由左至右排版,在寬高上符合block element的調整規則 可調整寬高)
codepen:https://codepen.io/alicewu1991/pen/LYQVGbm?editors=1100
-->

<!-- 64.Nini Chen#5790

a.p段落,span,a連結:green;div:red
b.p段落、div:區塊元素;a、span、img:行內元素

codepen:https://codepen.io/ninistyle/pen/ExQjPmb
-->


<!--65. Jamie
問題 a
1. p:green
2. span:green
3. div:red
4. a:green

問題 b
1. p:區塊元素
2. span:行內元素
3. div:區塊元素
4. a:行內元素
5. img:行內元素
-->

<!-- 66 danny123

a. p 是綠色、 span 是綠色、 div 是紅色、 a 是綠色

b. p 是 block 、 span 是 inline 、 div 是 block 、 a 是 inline 、 img 是 inline
-->

<!--67 _伊凡Evan  
a. 綠、綠、紅、綠
b block、inline、block、inline、inline

-->

<!--68. 花禮湖燒#7359
ans:
--顏色--
p:green
span:green
div:red
a:green

--區塊/行內元素--
p:block
span:inline
div:block
a:inline
img:inline
-->

<!--69. Arvin#6347
問題a
1.p:green 
2.span:green 
3.div:red 
4.a:green 
問題b
1.區塊元素
2.行內元素
3.區塊元素
4.行內元素

<!--70. Knn#0492
問題 a
1. p:green
2. span:green
3. div:red
4. a:green

大家class的權重相同 
不是看class的順序 要看css順序 後面會蓋掉前面的 

問題 b
1. p:區塊元素
2. span:行內元素
3. div:區塊元素
4. a:行內元素
5. img:行內元素
-->

<!--71. Marco Yin#2673
問題 a
1. <p>：green
2. <span>：green
3. <div>：red
4. <a>：green
問題 b
1. <p>：區塊元素
2. <span>：行內元素
3. <div>：區塊元素
4. <a>：行內元素
5. img：行內元素
-->

<!--72. andersonshen#4675
問題 a
權重：green > yellow > red > blue > orange
1. <p>：green
2. <span>：green
3. <div>：red
4. <a>：green

問題 b
1. <p>：block
2. <span>：inline
3. <div>：block
4. <a>：inline
5. img：inline
-->

<!--73. JessieCho
1.<p> → block / green
2.<span> → inline / green
3<div> → block / red
4<a> → inline / green
5.<img> → inline
-->

<!-- 74. SASIMI #5099
order: (前)orange blue red yellow green(後)
當權重都相同時，後面蓋掉前面
1. p: green (orange yellow green) / block
2. span: green (red yellow green) / inline
3. div: red (orange blue red)     / block
4. a: green (blue yellow green)   / inline
5. img:                           / inline
-->

<!-- 75. StellaHsu #2687
1. p: 綠，區塊
2. span: 綠，行內
3. div: 紅，區塊
4. a:綠，行內
5. img:行內

codepen: https://codepen.io/stella950114/pen/dydoMgG
-->

<!--76. Cheng-Yu
https://codepen.io/ball77111/pen/WNMvwBy
-->

<!--77. CCY#3639
https://codepen.io/cyizumi/pen/LYQVZNR
-->

<!-- 78. Sussu#4211
1. p: green，block
2. span: green，inline
3. div:red，block
4. a:green，inline
5. img:inline

codepen: https://codepen.io/yatiti84/pen/rNJVLMB
-->

<!--79. 楓之聲#6945
p    為 綠色 區塊元素
span 為 綠色 行內元素
div  為 紅色 區塊元素
a    為 綠色 行內元素
img  為 行內元素
-->

<!-- 80. Joyce #3790
     p     span    div    a     img
a. green  green   red   green
b. 區塊    行內    區塊   行內    行內
-->

<!-- 81. Lao#4012
p   : 綠色 block
span: 綠色 inline
div : 紅色 block
a   : 綠色 inline
img : inline
-->

<!-- 82. 安安你好你是誰#7416
p: 綠色 block元素
span: 綠色 行內
div: 紅色 block
a: 綠色 行內
img: 行內
-->

<!-- 83. Choo
--a--
p:green
span:green
div:red
a:green

--b--
p:block
span:inline
div:block
a:inline
img:inline
-->

<!-- 84. 肉桂卷#0625
https://codepen.io/ginnlee/pen/OJQVXra?editors=1100
-->

<!-- 85.deveryone#8090
    p-green span-green div-red a-green
    p、div:block; span、a、img:inline;
-->

<!-- 86. lyle#8123
a.p:green
  span:green
  div:red
  a:green
b.p:區塊元素
  span:行內元素
  div:區塊元素
  a:行內元素
  img:行內元素
-->

<!-- 87. 米金＃1399
a. 綠、綠、紅、綠
b. p-區塊
   span-行內
   div-區塊
   a-行內
   img-行內
-->

<!-- 88. 隔壁小王
 a. p: green
    span: green
    div: red
    a: green
 b. p: block
    span: inline
    div: block
    a: inline
    img: inline
-->

<!-- 89. yutingHsieh#0950
1.p:green
2.span:green
3.div:red
4.a:green
--
p:區塊
span:行內
div:區塊
a:行內
img:行內
-->

<!-- 90. Mojito#6002
p:綠色/區塊
span:綠色/行內
div:紅色/區塊
a:綠色/行內
img:行內
-->

<!-- 91. Kiwi#9804
p:區塊|綠色
span:行內|綠色
div:區塊|紅色
a:行內|綠色
img:行內
-->

<!-- 92. Stanley#3825
codepen: https://codepen.io/sean_1215/pen/wvyagxR
a.p: 綠色、span: 綠色、div: 紅色、a: 綠色
b.p: 區塊、span: 行內、div: 區塊、a: 行內、img: 行內 
PS: css顏色不看class的順序、而是由從上而下執行的順序，有上面的樣式會被下面的樣式蓋掉。
    span、a、img因為display屬性是inline的關係，所以為行內元素
-->

<!-- 93. Jeanie
a. p(green) span(green) div(red) a(green)
b. p(區塊) span(行內) div(區塊) a(行內) img(行內)
-->

<!-- 94. LCC#9012
    a.<p>.<span>.<a>=>皆為綠色 <div>為紅色 (html有設3個class但最終依css所撰寫順序最後為顯示顏色)
    b.<p>.<div>=>為區塊元素(block)；<a>.<span>.<img>為行內元素(inline)-->
    
<!-- 95. yuling
a.p:green、span:green、div:red、a:green
b.p:區塊、span:行內、div:區塊、a:行內、img:行內
-->

<!-- 96 雨天晴
1.p:綠 span:綠 div:紅 a:綠
2.P:區塊 span:行內 div:區塊  a:行內 img:行內
--> 

<!-- 97. ms_kellychen#6947
p:block|green
span:inline|green
div:block|red
a:inline|green
img:inline
-->

<!--  98. kevinCheng#3763
https://codepen.io/kevin760/pen/ZErGYYp

P    綠色  區塊
span 綠色  行內
div  紅色  區塊
a    綠色  行內
img       行內
-->

<!-- 99 𝔼.𝕎#4742
a. 
<p> green
<span> green
<div> red
<a> green

b.
<p> 區塊
<span> 內行
<div> 區塊
<a> 內行
<img> 內行
--> 

<!-- 100 singend#0876
codepen:https://codepen.io/singend/pen/dydoveQ
a: green green red green
b:block inline block inline inline
-->

<!-- 101 Lam#0344
codepen:https://codepen.io/manshun-lam/pen/MWQwpRE
a. p：綠、span：綠、div：紅、a：綠
b. p：區塊、span：行內、div：區塊、a：行內、img：行內（替換元素）
-->

<!-- 101 鉦勝#8333
a: div紅色，其餘綠色
b:p:區塊，span:行內，div:區塊，a:行內，img:行內
-->

<!-- 102 小天#7177
<p>: green, block
<span>: green, inline
<div>: red, block
<a>: green, inline
<img>: inline
-->

<!-- 103. Triple
a. p -> green, span -> green, div -> red,  a -> green
b. block: p, div; inline: span, a, img
-->

<!-- 104. 白白#8245
a. p green 、span green 、div red、a  green 
b. 區塊元素 (block) p、div     行內元素 (inline) span、a、img 
-->

<!-- 105. lengleng
codepen:https://codepen.io/lengleng2/pen/oNEXWzr
a. p、span、a是綠色
   div是紅色
b. p、div為 block
   span、a是inline
   img 是inline-block
-->

<!--
106.Vito#7797
a. p:orange,span:green,div:red,a:green
b. div&img => inline , others=> block
-->

<!-- 107. Van.CS#2067
codepen:https://codepen.io/fbacojji-the-selector/pen/XWZbREO
<p>區塊元素</p> : green
<span>行內元素</span> : green
<div>區塊元素</div> : red
<a>行內元素</a> : red
<img/>行內元素
-->

<!-- 108. Yi#2702
答a：p為綠色、span為綠色、div為紅色、a為綠色
答b：區塊元素：div、p
    行內元素：span、a 、img  
-->

<!-- 109. HiyukiOuO#8072
codepen:https://codepen.io/Befei/pen/PoQqmLj?editors=1100
a:  p為green、span為green、div為red、a為green
b:  p、div 為區塊元素、span、a、img為行內元素-->

<!-- 110. Arista 
a:  p為綠色、span為綠色、div為紅色、a為綠色
b:  p、div 為區塊元素、span、a、img為行內元素-->

<!-- 111. 翁來 
a:  p>綠色、span>綠色、div>紅色、a>綠色
b:  p>block、div>block、span>inline、a>inline、img>inline

<!--112 Anren#9048 
a: 綠，綠，紅，綠
b: p-block div-block span-inline 
   a-inline img-inline
-->

<!-- 113. rubyruby 
p 是綠色且為 block / span 是綠色且為 inline / div 是紅色且為 block / a 是綠色且為 inline / img 是 inline
-->
   
<!-- 114. amy芳#1385 
p：block,green
span：inline,green
div：block,red
a：inline,green
--> 

<!--115. TunacanBoy#2206
1.綠/區塊
2.綠/行內
3.紅/區塊
4.綠/行內
5.行內
-->

<!--116. DoubleZ#2361 

a. 
p為綠色，span為綠色，div為紅色，a為綠色
b.
p是block，span是inline，div是block，a是inline，img也是inline
-->
<!--117. TAKO#3277
a. 
綠綠紅綠
b.
區塊/行內/區塊/行內/行內
-->

<!-- 118. Lina Chen
a.
p：綠色
span：綠色
div：紅色
a: 綠色
b. 
區塊元素：p、div
行內元素：span、a、img
-->

<!-- 119. Data#9297
a:

p:green 
span:green
div:red
a:green

b:

p:block
span:inline
div:block
a:inline
img:inline
-->

<!-- 119. 狸貓#9725
a. 各為什麼顏色
p 綠色
span 綠色
div 紅色
a 綠色

b. 是區塊元素 (block) 還是行內元素 (inline)？
p 區塊元素 (block)
span 行內元素 (inline)
div 區塊元素 (block)
a 行內元素 (inline)
img  行內元素 (inline)
-->

<!-- 120. Nina泥#1422
 codepen: https://codepen.io/xiangqi09020/pen/abqOydy
p : green ---block
span : green ---inline-block 
div : red ---block
a : green ---inline-block
img ---inline-block
-->


<!-- 121. 君Jyun#0147
1.
p:green
span:green
div:red
a:green

2.
p、div : 區塊元素
span、a、img:行內元素  

-->

<!-- 122. 黑白兔#0684

p:green -- block
span: green -- inline
div: red -- block
a: green -- inline
img: inline

-->

<!-- 122. Ning#6363

--a--權重相同時，後面的樣式會蓋住前面的樣式 
p: green
span: green
div: red
a: green

--b--
p: 區塊元素 (block)
span: 行內元素 (inline)
div: 區塊元素 (block)
a: 行內元素 (inline)
img: 行內元素 (inline)

-->

<!-- 123. Winnie#1306

--a--
p:green
span:green
div:red
a:green
--b--
p:block
span:inline
div:red
a:inline
img:inline
-->

<!-- 124. Tao Doris #5230
Codepen：https://codepen.io/peetaoting/pen/jOZPGzZ

感謝同學告知要看css寫的順序!! 

-->

<!-- 125. Ayre #0016
a. p:green span:green div:red a:green
b. p、div是區塊元素 span、a、img是行內元素
-->

<!-- 126. Vera #5592
   a.顏色            b.元素別
<p>     green  |  區塊元素 (block)
<span>  green  |  行內元素 (inline)
<div>   red    |  區塊元素 (block)
<a>     green  |  行內元素 (inline)
<imh>    X     |  行內元素 (inline)
-->

<!-- 127. muzz #0345 
a. p:綠；span:綠；div:紅；a:綠
b. p:區塊元素；span:行內元素；div:區塊元素；a:行內元素；img:行內元素
-->

<!-- 128. Cheng#3012
p標籤:green、block
span標籤:green、inline
div標籤:red、block
a標籤:green、inline
img標籤:inline
-->

<!-- 129. xuan#0808
1.P：文字顏色是green；區塊元素

2.span：green/行內元素

3.div：red/區塊元素

4.a：green/行內元素

5.img：行內元素
-->

<!-- 130. AllenLi#6756
a.顏色             |       b.元素別
<p>      green    |   區塊元素 (block)  獨立區塊取第一個
<span>   green    |   行內元素 (inline) 連續區塊取最後一個
<div>     red     |   區塊元素 (block)  獨立區塊取第一個
<a>      green    |   行內元素 (inline) 連續區塊取最後一個
<img>      X      |   行內元素 (inline) 連續區塊取最後一個

CodePen https://codepen.io/knsybndf-the-animator/pen/dydoZVW -->

<!-- 131. 白狐
a. p(green)、span(green)、div(red)、a(green)
b. p(block)、span(inline)、div(block)、a(inline)、img(inline)
-->

<!-- 132. Charlotte Lee
a: green、green、red、green
b. p-block、span-inline、div-block、a-inline、img- inline
-->

<!-- 133. Chaco
a: green、green、red、green
b. p:block、span:inline、div:block、a:inline、img:inline
-->

<!-- 134. 米緹 Mitty#2902
a. p=green, span=green, div=red, a=green
b. p=block, span=inline, div=block, a=inline, img=inline
-->


<!-- 135. whatsupcc
p:green 區塊
span：green內行
div：red 區塊
a ：green 內行
img：內行 -->

<!-- 136. zzuhann #2786
p: green block
span: green inline
div: red block
a: green inline-->

<!-- 137. Yen#7772
綠綠紅綠
P,DIV 是block
span,a是inlne -->

<!-- 138. 小七拿鐵#9255
1.綠綠紅綠
2.區塊元素(block)：<p>、<div>
  行內元素(inline)：<span>、<a>、<img>-->

<!-- 139. Easton#3863
a. 綠綠紅綠
b. 區塊元素：p div
   行內元素：span a img
-->

<!-- 140. yuyu#6310
1.p(綠)、span(綠)、div(紅)、a(綠)
2.p (block)、span (inline)、div (block)、a (inline)、img (inline) -->

<!-- 141. Cliff
a: green / green / red / green
b: block / inline / block / inline / inline
-->

<!-- 142. skypassion5000#4151 
a. green green red green
b. block inline block inline inline
-->

<!-- 143. 炎炎#0777
a. p(綠)、span(綠)、div(紅)、a(綠)
b. p(區塊)、span(行內)、div(區塊)、a(行內)、img(行內)
-->

<!-- 144. Bao
a. 
p - 綠
span - 綠
div - 紅
a - 綠

b. 
p - 區塊元素
span - 行內元素
div  - 區塊元素
a - 行內元素
img - 行內元素
-->

<!-- 145. Katie
   p: 綠 / 區塊
span: 綠 / 行內
 div: 紅 / 區塊
   a: 綠 / 行內
 img:    / 行內
-->

<!-- 146. JOU JOU#6876 
a.
p : green
span : green
div : red
a :green

b.
p : block
span : inline
div :block
a : inline
img :inline
 -->

<!-- p—>答案：綠色、區塊元素
span—>答案：綠色、行內元素
div—>答案：紅色、區塊元素
a—>答案：綠色、行內元素
img—>答案：行內元素 -->

<!-- -> 謏喀#2607
p : 區塊元素、綠色
span : 行內元素、綠色
div : 區塊元素、紅色
a : 行內元素、綠色
img : 行內元素 -->


<!--149. decoration red#7401
ans:
--a
p: green
span: green
div: red
a: green

--b
p: block
span: inline
div: block
a: inline
img: inline
-->

<!-- 150. sunny cheng#4113
p:green\區塊
span:green\行內
div:red\區塊
a:green\行內
img:行內 -->

<!-- 151. 雷雷#7844
p: green 區塊
span: green 行內
div: red 區塊
a: green 行內
img: 行內 -->

<!-- 152. BeckyYo#1461
p: green,區塊
span: green,行內
div: red,區塊
a: green,行內
img: 行內 -->

<!-- 153. Zooey#6634
p: green/區塊
span: green/行內
div: red/區塊
a: green/行內
img: 行內
-->

<!-- 154. mei#8421
p    -> green / block
span -> green / inline
div  -> red / block
a    -> green / inline
img  -> inline
-->

<!-- 155. bryin#5345
a.
p: green
span: green
div: red
a: green

b.
p:區塊元素
span:行內元素
div:區塊元素
a:行內元素
img:行內元素

-->

<!-- 156. J_u_d_y#5993
 
p: green-區塊元素
span: green-行內元素
div: red-區塊元素
a: green-行內元素
img: 行內元素

-->
<!-- 157. Chaya#3412
p    : green , 區塊元素
span : green , 行內元素
div  : red , 區塊元素
a    : green , 行內元素
img  : 行內元素
-->
<!-- 158. Tsuei#9284
  p: 綠色; 區塊元素
  span: 綠色; 行內元素
  div: 紅色; 區塊元素
  a: 綠色; 行內元素
  img: 行內元素
-->

<!-- 159. Vivi#5766
p    | green, block
span | green, inline
div  | red, block
a    | green, inline
img  | inline
 -->
 <!-- 160. 小不點#1793 
p:green block
span:red inline
div:red block
a:green inline
img:inline
-->

<!-- 161.MAO#7720
a. green, green, green, red, green
b. p=block, span=inline, div=block, a=inline, img=inline
-->

<!-- 162.hsiuhsiu#7412
a. p(green)、span(green)、div(red)、a(green)
b. p(block)、span(inline)、div(block)、a(inline)、a(inline)
-->

<!-- 163. Yuhung#1391
| 元素 | 顏色 | display |
| ---- | ---- | ------- |
| p    |  綠  |  block  |
| span |  綠  |  inline |
| div  |  紅  |  block  |
| a    |  綠  |  inline |
| img  |      |  inline |
-->

<!-- 164.Abel
a. p:green/span:green/div:red/a:green 
b. p:block/span:inlinediv/a:inline/img:inline
-->

<!-- 165. Susan8402#5854
a. p、span、div、a 各為什麼顏色？ Ans: 綠/綠/紅/綠
b. p、span、div、a、img 是區塊元素 (block) 還是行內元素 (inline)？ Ans: block/inline/block/inline/inline
CodePen link: https://codepen.io/Susan8402/pen/WNMQMpo?editors=1100
-->

<!-- 166. Vicky Chang#8846
a. 
p: 綠色
span: 綠色
div: 紅色
a: 綠色

b.
p: 區塊元素
span: 行內元素
div: 區塊元素
a: 行內元素
img: 行內元素
-->

<!-- 167. 小羅#9921
--a--
p：綠色
span：綠色
div：紅色
a：綠色

--b--
p：區塊元素
span：行內元素
div：區塊元素
a：行內元素
img：行內元素
-->

<!-- 168. 拿鐵#7585
答案：
Codepen：https://codepen.io/qinsplanet1024/pen/xxYwMra
A. p(綠色)、span(綠色)、div(紅色)、a(綠色)
B. p(區塊)、span(行內)、div(區塊)、a(行內)、img(行內)
-->

<!-- 169. 靜宜#6866
----a----
p：綠色
span：綠色
div：紅色
a：綠色

----b----
p：區塊元素
span：行內元素
div：區塊元素
a：行內元素
img：行內元素
-->

<!-- 170. bazingaga#0344

綠-區塊
綠-行內
紅-區塊
綠-行內
行內
--!>

<!-- 171. ajhappy#6488
a.
p：綠色
span：綠色
div：紅色
a：綠色

b.
p：區塊元素
span：行內元素
div：區塊元素
a：行內元素
img：行內元素
-->

<!-- 171. WilliamChou#7375
a
p:green
span:green
div:red
a:green

b
p: inline
span:iinline
div:block
a:inline
img:inline
-->

<!-- Newman
1. green, green, red, green
2. 區塊, 行內, 區塊, 行內, 行內
-->



<!-- 172. RayChen#6088
答案：
Codepen：https://codepen.io/raychen1996/pen/ExQPjzG
p： green / 區塊
span： green / 行內
div： red / 區塊
a： green / 行內
img： 行內
-->

<!-- 173. carrieT#9628
1. p、span、a 為 green
   div 為 red

2. p、div 為區塊元素
   span、a、img 為行內元素
-->
<!-- 174. MOMO#3370
1.
p,span,a : GREEN
div ：red
img ：black
2.
p,div:區塊(BLOCK)
span,a,img:行內(INLINE) -->

<!-- 175. 艾芮絲#6060
A.
p>green
span>green
div>red
a>green

B.
p>區塊
span>行內
div>區塊
a>行內
img>行內 -->

<!-- 176. JumpBow
A.
p:green
span:green
div:red
a:green

B.
p:區塊
span:行內
div:區塊
a:行內
img:行內 -->

<!-- 177. 嘟嘟莉#2170
P段落，文字顏色是什麼呢?綠 區塊元素

span，文字顏色是什麼呢?紅 行內元素

div，文字顏色是什麼呢? 紅 區塊元素

a連結，文字顏色是什麼呢?綠 行內元素

img，行內元素
-->


<!--178. will0708#7730
P:green, 區塊元素
span:red, 行內元素
div:blue, 區塊元素
a:yellow, 行內元素
img:行內元素
-->

<!--179. Doraine
原理：權重不同。
css權重：後>前；green>yellow>red>blue>orange。

class選擇器中的權重排序：
p：green>yellow>orange
span：green>yellow>red
div：red>blue>orange
a：green>yellow>blue

答：
p：green。block。
span：green。inline。
div：red。block。
a：green。inline。
img：n/a。inline。
-->

<!--180. Tori

orange區塊元素
green 行內元素
red 區塊元素
green行內元素
行內元素
-->

<!--181.Ivy

a.
p-green/block
span-green/in-line
div-red/block
a-green/in-line
img-./in-line

<!-- 182    雪莉#0317
按css撰寫順序，權重一樣時，後面寫的會蓋過前面寫的；與html的class順序無關
p    /green  /block
span /green  /inline
div  /red    /block
a    /green  /inline
img  / -     /inline, 但因圖片的關係可以設定寬高內外距等等，又有點像inline-block，
有關img的特性：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
分享給大家
-->

<!-- 183 shiaohan#0676
p > green, block
span > green, inline
div > red, block
a > green, inline
img > inline
--!>

<!--  182. Jan F#7277

Ans
p，green，區塊元素
span ，green，行內元素
div  ，red  ，區塊元素
a，green，行內元素
img  ，行內元素 

-->

<!-- 184 lazyhsu#6772
codepen:https://codepen.io/hsu860112/pen/MWQKdqE
問題一：
      p   :綠色
      span：綠色
      div ：紅色
      ａ  ：綠色

問題二：
      p    ：區塊元素 block
      span ：行內元素 inline
      div  ：區塊元素 block
      ａ   ：行內元素 inline
      img ：行內元素 inline


<!-- 185 Chloeee#0035
p = green, 區塊元素block
span = green, 行內元素inline
div = red, 區塊元素block
a = green, 行內元素inline
img = 行內元素inline
-->

<!--189 jing#6810
p=綠色 / span=綠色 / div=紅色  / a=綠色
p(區塊)、span(行內)、div(區塊)、a(行內)、img(行內)
-->

<!--190 Ryan Chen#3338
(https://i.imgur.com/EoSXb1w.png)
-->

<!--191 H2CO3#7232 
p:區塊元素，綠色
span:行內元素，綠色
div:區塊元素，紅色
a:行內元素，綠色
img:行內元素
-->

<!-- 192 Jumpye#8601
      p   :綠色 區塊元素
      span：綠色 行內元素
      div ：紅色 區塊元素
      ａ  ：綠色 行內元素
     img ：行內元素

<!-- 193 Carrie#2750
p:綠,區塊元素
span:綠,行內元素
div:紅,區塊元素
a:綠,行內元素
img:行內元素
-->

<!-- 194 Zoey#0839

1.https://codepen.io/zoec/pen/PoQNpRB
2.p段落：綠色；區塊元素
　span：綠色；行內元素
　div：紅色；區塊元素
　a：綠色；行內元素
　img：行內元素　
-->

<!-- 195 ton#8977
p段落：綠色；區塊元素
span：綠色；行內元素
div：紅色；區塊元素
a：綠色；行內元素
img：行內元素　

-->

<!-- 196 zera#6060
答案: 在css裡面做設定的時候，如果權重一樣，後面的設定會蓋過前面的設定。所以結果
1.P段落，文字顏色是green；區塊元素

2.span，文字顏色是green；行內元素

3.div，文字顏色是red；區塊元素

4.a連結，文字顏色是green；行內元素

5.img，行內元素
-->

<!-- 197 Donna#3124
1.p：顏色為綠色 是區塊元素
2.span：顏色為綠色 是行內元素
3.div：顏色為紅色 是區塊元素
4.a：顏色為綠色 是行內元素
5.img：是行內元素　
-->

<!--198 piha#9987
1.P段落：綠色；區塊元素
2.span：綠色；行內元素
3.div：紅色；區塊元素
4.a：綠色；行內元素
5.img：行內元素
-->

<!--199 EllieLo#9809
1.綠色；區塊元素
2.綠色；行內元素
3.紅色；區塊元素
4.綠色；行內元素
5.黑色：行內元素
-->

<!--200 教練#6451
1.p 綠；區塊
2.span 綠；行內
3.div 紅；區塊
4.a 綠；行內
5.img 行內
-->

<!-- 201 大衛
https://codepen.io/exnsrpjc/pen/XWZKMBJ?editors=1100
1.綠色 區塊元素
２.綠色 行內元素
3.紅色 區塊元素
4.綠色 行內元素
5.行內元素 -->

<!-- 202 Sam
1. green / 區塊
2. green / 行內
3. red / 區塊
4. green 行內
5. 行內
-->
<!-- 203 vivian
1. 綠色，區塊
2. 綠色，行內
3. 紅色，區塊
4. 綠色，行內
5. 行內

<!-- 家洋#6999
(a)
p 綠色
span 綠色
div 紅色
a 綠色
(b)
p 區塊元素
span 行內元素
div 區塊元素
img 行內元素
-->

<!-- 205. judy0927#4241
Codepen：https://codepen.io/judycxc/pen/bGLwzjJ
1. P段落  green、區塊元素
2. span  green、行內元素
3. div   red、區塊元素
4. a連結  green、行內元素
5. img   行內元素
-->

<!--  cavalown#6646
codepen => https://codepen.io/cavalown/pen/RwQowrq?editors=1100
1. <p></p>: 綠色/區塊
2. <span></span>: 綠色/行內
3. <div></div>: 紅色/區塊
4. <a></a>: 綠色/行內
5. <img>: 行內
-->
<!--  steven421055
codepen => https://codepen.io/steven421055/pen/RwQorMR
a.
1. <p>:綠色
2. <span>:綠色
3. <div>:紅色
4. <a>:綠色
b.
1.區塊
2.行內
3.區塊
4.行內
5.行內

<!-- 樂樂  ＃9345
答案
a. 
1.綠色
2.綠色
3.紅色
4.綠色
----
b.
1. <p> 區塊
2. <span> 行內
3. <div> 區塊
4. <a> 行內
5. <img> 行內
-->

<!-- Lynn73 ＃3164
答案
a. 
p:綠色
span:綠色
div:紅色
a:綠色
----
b.
1. <p> 區塊
2. <span> 行內
3. <div> 區塊
4. <a> 行內
5. <img> 行內
-->

<!-- Cora ＃3153
答案
a. 
p:green
span:green
div:red
a:green
p.s.後面的樣式會覆蓋前面的
----
b.
p:區塊元素
span:行內元素
div:區塊元素
a:行內元素
img:行內元素
p.s.區塊會自行換行，行內不會
-->
<!-- 211. Renad#0242 
a. green green red green
b. block inline block inline inline
-->
<!-- 212. YANSzero#5436
a. p、span、div、a 各為什麼顏色
ans: green green red green

b. p、span、div、a、img 是區塊元素 (block) 還是行內元素 (inline)？
ans:block inline block inline inline
-->

<!-- 213. 一隻阿貓#2726
a. p=green,span=green,div=red,a=green
b. p=block,span=inline,div=block,a=inline,img=inline
-->

<!-- 213. 皆順#1616
a. p:green
   span:green
   div:red
   a:green
b. p:區塊block
   span:行內inline
   div:區塊block
   a:行內inline
   img:行內inline
-->

<!--  214.yuki#9465

a.<p> green  

b.區塊block元素
</p>

a.<span> green 

b.行內（inline）元素 
</span>

a.<div> red 
b.區塊block元素 
</div>

a.<a href=""> green 

b.行內（inline）元素
</a>

a.<img src="" alt=""> black 

b.行內（inline）元素 

-->

<!-- 215. Jean
a. p：green
   span：green
   div：red
   a：green
   green
b. p：區塊元素 (block)
   span：行內元素 (inline)
   div：區塊元素 (block)
   a：行內元素 (inline)
   img：行內元素 (inline)
-->


ans:
--a--
p:green
span：green
div：red
ａ：green

--b--
p：區塊元素 
span：行內元素 
div：區塊元素 
ａ：行內元素 
img：行內元素 

<!--  216.前面是彩色的#3025
https://codepen.io/mnscake/pen/jOZyyeq
–a–
p:green
span：green
div：red
ａ：green

–b–
p：區塊元素
span：行內元素
div：區塊元素
ａ：行內元素
img：行內元素


<!-- 217. YC#2008
Answer (a):
            綠色：p, span, a.
            紅色：div.
Answer (b):
            區塊元素(block)：p, div.
            行內元素(inline)：span, a, img.

<!-- 218. Sophia19#4005
Answer 
 P  : green  區塊元素
span: green  行內元素
div : red    區塊元素
a   : green  行內元素
img :        行內元素

<!-- 219. Ben Kao#3066
Ans:

a: p / green
   span / green
   div / red
   a / green

b: p / 區塊元素 (block)
   span / 行內元素 (inline)
   div / 區塊元素 (block)
   a / 行內元素 (inline)
   img / 行內元素 (inline)


<!-- 220. Patty^0^#9106 
ANS:
P是GREEN、區塊
SPAN是GREEN、行內
DIV是RED、區塊
A是GREEN、行內
img是行內
-->

<!-- 221. Yurii#7455
a.
p：綠色
span：綠色
div：紅色
a：綠色

b.
p：區塊元素
span：行內元素
div：區塊元素
a：行內元素
img：行內元素
-->

<!-- 222. Eileen#6454
a. 
p: green
span:green
div: red
a: green

b. 
p: 區塊
span:行內
div:區塊
a:行內
img: 行內
-->

<!-- 223.Barret#1119
a. 
p ：Green
span：Green
div：Red
a ：Green
b. 
p：區塊元素 (block) 
span：行內元素 (inline)
div：區塊元素 (block) 
a：行內元素 (inline)
img ：行內元素 (inline)

 -->
 <!-- 224.夜空#6305
–a–
p:green
span：green
div：red
ａ：green

–b–
p：區塊
span：行內
div：區塊
ａ：行內
img：行內
 -->