freeCodeCamp/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-.../60a3e3396c7b40068ad6996c.md

1.1 KiB

id title challengeType dashedName
60a3e3396c7b40068ad6996c 步驟 3 0 step-3

--description--

在 CSS 盒子模型中,每個 HTML 元素都被視爲一個有四個區域的盒子。

想象一下,你從最喜歡的在線零售商那裏收到一個盒子——內容是盒子裏的物品,或者在我們的例子中,是標題、段落或圖像元素。

更改 <img> 中的 src 屬性,從 https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png 修改爲 https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png

--hints--

img 元素的 src 應該是 https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png

assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png');

--seed--

--seed-contents--

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
  </head>
  <body>
--fcc-editable-region--
    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png">
--fcc-editable-region--
  </body>
</html>