---
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 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）
<!-- 解答： -->
回報區
---
<!-- 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：行內
-->
Sign in with Wallet
Connect another wallet