边框内的HTML CSS颜色

我正在尝试制作一个300x300像素的黄色小正方形，比如说黑色边框。我使用：

<style>
body  {
  background-color: yellow;
  border: 1px solid #000000;
  width: 300px;
  height: 300px;
}
</style>

身体{
背景颜色：黄色；
边框：1px实心#000000；
宽度：300px；
高度：300px；
}

---

但这会使整个页面变黄，而不仅仅是正方形。。。我怎样才能解决这个问题？Ty

您需要将样式应用于div，而不是整个主体

.square{
背景颜色：黄色；
边框：1px实心#000000；
宽度：300px；
高度：300px；
}

---

标记选择html文档的整个正文。您需要为您的框指定一个

id

或

class

，然后对其应用CSS

例如：

#框{
背景颜色：黄色；
边框：1px实心#000000；
宽度：300px；
高度：300px；
}

不要使用“body”，使用“div”

---

Fiddle:

您已经应用到正文，这基本上意味着整个页面。 在主体上插入一个DIV

HTML

<div class="div-class"></div>

---

如果你只想要一个300x300的正方形，你需要为此做一个div

**HTML:**
<div class='square'></div>


**CSS**

.square  {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}

**HTML：**
**CSS**
.广场{
背景颜色：黄色；
边框：1px实心#000000；
宽度：300px；
高度：300px；
}

---

现在，您正在将样式应用于正文（整个页面）。这就是为什么你的整个窗户是黄色的，而不是300x300

，因为你在设计你的整个身体。制作一个具有上述属性的div和样式。你的html在哪里？你正在设计整个

正文

，换句话说，整个页面可能重复

.div-class{
  background-color: yellow;
  border: 1px solid #000000;
  width: 300px;
  height: 300px;
}

**HTML:**
<div class='square'></div>


**CSS**

.square  {
background-color: yellow;
border: 1px solid #000000;
width: 300px;
height: 300px;
}