Html 为什么css为两个div设置相同的宽度，但显示不同的宽度_Html_Css_Width

Html 为什么css为两个div设置相同的宽度，但显示不同的宽度

html css

Html 为什么css为两个div设置相同的宽度，但显示不同的宽度,html,css,width,Html,Css,Width,这是内容的大小，宽度也是50% #内容{ 位置：相对位置；宽度：50%；身高：100%；顶部：180像素；左：50%；高度：800px；左边缘：-25%；背景色：#3d3D；填充：0； } 我将导航和内容设置为50%的相同宽度，但当我在浏览器中打开它时，这两个框的宽度不同，任何人都可以帮助我？这是因为当您在宽度中设置%时，该元素将其与最近的父元素相关联当您为#导航设置位置：fixed时，这将使html成为其父对象，而#内容将主体作为其父对象。这里的问题是，对于默认

这是内容的大小，宽度也是50%

#内容{
位置：相对位置；
宽度：50%；
身高：100%；
顶部：180像素；
左：50%；
高度：800px；
左边缘：-25%；
背景色：#3d3D；
填充：0；
}

我将导航和内容设置为50%的相同宽度，但当我在浏览器中打开它时，这两个框的宽度不同，任何人都可以帮助我？

这是因为当您在

宽度

中设置%时，该元素将其与最近的父元素相关联

当您为

#导航设置位置：fixed
时，这将使html
成为其父对象，而#内容
将主体
作为其父对象。这里的问题是，对于默认的dehtml
标记，有一个padding
值，现在要使主体为html相等，且50%宽度相等，请在css中设置此值：
#content {
    position: relative;
    width: 50%;
    height: 100%;
    top:180px;
    left:50%;
    height:800px;
    margin-left:-25%;
    background-color: #3d3d3d;
    padding:0;
}
</style>
</head>

<body>
<div id="navigation">
    <ul>
        <li><a href="#">BUtton 1</a></li>
        <li><a href="#">BUtton 2</a></li>
            <li><a href="#">BUtton 3</a></li>
        <li><a href="#">BUtton 4</a></li>
    </ul>
</div>
<div id="content"></div>
</body>
</html>

在您的示例中，在此处查看演示更改内容的css部分：
html, body {
  margin:0;
  padding:0;
}

致：
这是因为在相对的情况下div是相对于它在文档中应该出现的位置出现的。这意味着在您的情况下，相对于“#navigation”中的属性
而在绝对的情况下，div会出现在您确切告诉它的位置。无论其他元素的位置在前面还是后面。
不要使用填充，而是使用边距。此外，您可能希望将所有主div封装在具有设置宽度的容器中。或者使用框大小：边框框
，以便填充不会影响总宽度。（IE8及以上）只需注意：左：50%；左边缘：-25%与左：25%相同。还是简单点吧！
#content {
    position: relative;
    width: 50%;
    height: 100%;
    top:180px;
    left:50%;
    height:800px;
    margin-left:-25%;
    background-color: #3d3d3d;
    padding:0;
}
</style>
</head>

<body>
<div id="navigation">
    <ul>
        <li><a href="#">BUtton 1</a></li>
        <li><a href="#">BUtton 2</a></li>
            <li><a href="#">BUtton 3</a></li>
        <li><a href="#">BUtton 4</a></li>
    </ul>
</div>
<div id="content"></div>
</body>
</html>

html, body {
  margin:0;
  padding:0;
}

position: relative;

position:absolute;