Question

我已经在谷歌上寻找过几种不同的解决方案并试用了它们，但我仍然无法让我的页面边框起作用。

我尝试创建另一个div容器以包含页面上的所有内容，然后我在内部有四个div圆圈的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>

Answer 1

试试这个

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+ */
}

HTML页面边框不起作用

1 个答案: