Html 为什么<；车身>；如果css中没有width属性，是否具有特定宽度？

我有一个100%宽度的标题，下面是灰线。线条应使用浏览器窗口的100%宽度。但当我缩小浏览器宽度时，灰线不会占据整个网页的宽度。为什么？奇怪的是，虽然在css中没有为body设置宽度，但是body标记具有一定的宽度值。请检查下面的图片和代码。非常感谢

如果减少浏览器宽度，则会出现一个问题：右侧不再有灰色边框！

这是密码

HTML

---

您可以通过以下链接进行检查。我已经删除了与下面提到的.logo h1相关的css

---

薄的是你的

。headerInner

有一个固定的

宽度：960px

，

主体以及
在默认情况下延伸到屏幕的宽度，因此当小于960px时，你的
.headerInner
溢出

要修复它，只需移动
边框底部：1px solid#e3e8从
到
.headerInner


或者将边框保持在原位，并设置
宽度：960px和
边距：0自动
到
标题


如果希望边框延伸至屏幕，请执行以下操作：

header {
    margin-bottom: 30px;
    min-width: 960px;    
    border-bottom: 1px solid #E3E3E8;
}

我在使用HTML/CSS编写的JSFIDLE中没有发现任何问题：您没有解释任何内容。你为什么在回答中包含CSS？谢谢！但是我需要一条灰线来代表整个浏览器的100%宽度。如果我照你说的做，灰线只有960像素@Max我将我的答案更新为灰线，以获取整个浏览器的100%宽度，如果现在可以按照您的要求工作，请告诉我。我很高兴帮助您。
* {
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}

body {
    font: 14px/21px "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #444;
}



/******************** HEADER ************************/

header {
    border-bottom: 1px solid #E3E3E8;
    margin-bottom: 30px;
}

.headerInner {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

.logo {
    width: 157px;
    height: 63px;
    background: url(../img/icebrrrg-logo.png) no-repeat;
    background-size: contain;
    margin: 22px 0;
    float: left;
    display: inline;
}

.logo h1 {
    text-indent: -99999px;
}

.mainNav {
    float: right;
    display: inline;
}

.mainNav ul {
    margin: 44px 0;
    padding: 0;
    list-style: none;
}

li {
    display: inline;
}

.mainNav a {
    text-decoration: none;
    color: #2C88C9;
    padding: 48px 10px 43px;
    font-size: 12px;
    border-bottom: 3px solid white;
}

.mainNav a:hover {
    font-weight: bold;
    border-bottom: 3px solid #2C88C9;
}

.logo h1 {
    text-indent: -99999px;
}

header {
    margin-bottom: 30px;
    min-width: 960px;    
    border-bottom: 1px solid #E3E3E8;
}