邊框HTML頁不工作

我環顧四周，對谷歌的幾個不同的解決方案，並試圖出來，但我似乎仍不能讓我的頁面邊框工作。邊框HTML頁不工作

我試圖創建另一個DIV容器包含頁面上的所有內容，然後我就在裏面的四個DIV界格，但是當我添加邊框，沒有工作。所以，我把外部的部分拿走，只剩下裏面有四個div圈的一個div。

最後（下面是什麼），我嘗試添加邊框的身體，但它仍然沒有把邊界整個頁面周圍。

我有一種感覺，這個問題可能有高度和寬度值做的，但我已經與那些和發揮，無法得到期望的結果。

感謝您的任何意見

下面是代碼：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style> 
      body { 
       background: white; 
       border: 1px solid #ff0000; 
       width: 100%; 
       height: 100%; 
      } 
      .circle { 
       width: 100px; 
       height: 100px; 
       -webkit-border-radius: 50px; 
       -moz-border-radius: 50px; 
       border-radius: 50px; 
       text-align: center; 
       display: inline-block; 
      } 
      .container { 
       text-align: center; 
       display: inline-block; 
       width: 100%; 
      } 
     </style> 
    </head> 
    <body> 
     <center> 
      Welcome to My Website! 
      <br> 
      <br> 
     </center> 
     <div class = "container"> 
      <div class= "circle" style = "background-color:red">About</div> 
      <div class= "circle"style = "background-color:orange">Homework</div> 
      <div class= "circle"style = "background-color:red">Blender</div> 
      <div class= "circle"style = "background-color:orange">Research</div> 
      <div class= "circle"style = "background-color:red">English</div> 
     </div> 
    </body> 
</html>

來源

2014-06-21 JustBlossom

試試這個

html,body{ 
width: 100%; 
height: 100%; 
margin:0; 
padding:0; 
} 

body { 
background: white; 
border: 1px solid #ff0000; 
-webkit-box-sizing: border-box;/* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box;/* Firefox, other Gecko */ 
box-sizing: border-box;/* Opera/IE 8+ */ 
}

來源

2014-06-21 22:27:09 marathonman

是啊，這工作。謝謝！爲什麼爲html和body指定樣式非常重要？頁面樣式是不是應該在一個或另一個之下指定？ – JustBlossom

你可以把它們分開。 – marathonman

讓我問你一個問題，你使HTML和身體100％。但由於邊界，我們在身體上有2個附加px。你會看到滾動條。我們如何移除它們？ – marathonman

邊框HTML頁不工作

回答

相關問題