邊界內的HTML CSS顏色

Question

我正在試圖製作一個300x300像素的小黃色正方形，讓我們說一個黑色邊框。我使用：

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

但是，這給整個頁面黃色，而不僅僅是廣場......我該如何解決這個問題？泰

Answer 1

您需要的樣式應用到一個div，而不是整個身體......

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

<div class="square"></div>

Answer 2

的body標籤選擇HTML文檔的整個身體。你需要給你的盒子一個id或class然後應用CSS。

例如：

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

<div id="box"></div>

Answer 3

不要使用 「身體」，用 「格」

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

小提琴：https://jsfiddle.net/Lrgqp2ud/

Answer 4

您應用於對身體來說，基本上意味着整個頁面。 在身體上插入一個DIV。

HTML

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

CSS

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

Answer 5

如果你想只有你需要的300x300的正方形，使一個div爲

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


**CSS** 

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

現在你將你的風格應用於t他的身體（整個頁面）。這就是爲什麼你的整個窗口是黃色，而不是300x300