Question

HTML / CSS新手。

尝试将我在Codeacademy上学到的东西付诸实践，我遇到了一个问题，我的标题设置为宽度：100％最终会离开页面。我相信这是因为边界，因为当我将它设置为1px而不是10px时，它几乎适合页面。

我附上了几个屏幕截图和我的代码，我确信这是一个非常简单的解决方案，虽然我没有大肆讨论我是否有边框，但我需要理解为什么会发生这种情况。

提前致谢。

#header {
height: 100px;
width: 100%;
margin: auto;
background-color: white;
border: 10px solid black;
font-size: 80px;
text-align: center;
font-family: Helvetica, Ariel, Sans;

}

.left {
height:400px;
width:100px;
background-color:white;
border:10px solid black;
float:left;

}

.right {
height: 400px;
width: 100px;
background-color: white;
border: 10px solid black;
float: right;

}

图片：http://postimg.org/image/b0vnu2okf/

Answer 1

您可以使用box-sizing: border-box来计算包含填充和边框的框的宽度和高度。

此外，您可以在所有内容上使用* { box-sizing: border-box }。正如 Paul Irish 所建议的那样。

Answer 2

添加边框会使元素的宽度超过100％。

您可以使用box-sizing

，像其他人所建议的那样使用盒子模型

但是，在这种情况下，我建议删除width:100% 默认情况下，<div>将跨越页面的整个宽度。

您也可以安全地删除margin:auto。

div#header {
    height: 100px;
    background-color: white;
    border: 10px solid black;
    font-size: 80px;
    text-align: center;
    font-family: Helvetica, Ariel, Sans;
}

http://jsfiddle.net/93EPg/

HTML宽度被边框弄乱了

2 个答案: