CSS 宽度属性无法正常工作答案

【问题标题】：CSS width properties not working correctlyCSS 宽度属性无法正常工作
【发布时间】：2018-12-21 17:45:28
【问题描述】：

我编写了一个 html 页面，其中包含顶部的标题，后面是部分部分和旁边部分，然后是页脚部分，并编写了一些用于样式的 CSS 代码。这是html和CSS代码：

body{
    width: 80%;
    margin: 0 auto;
    background-color: peachpuff;
}


header, section, aside, footer, article{
    margin: 10px;
    padding: 10px;
    text-align: center;
    background-color: aliceblue;
    border: 1px solid cadetblue;
    font-size: 2rem;
    width: 100%;
    box-sizing: border-box;
}
header>h1{

    height: 100px;
    font-size: 2.5rem;
    text-shadow: 2px 2px 2px red;
}
article {
    width: 85%;
    margin: 0 auto;
}
section{
    width: 60%;
    height: 300px;
    margin-right:3px;
display: inline-block;
    /*float:left;*/
}

aside{
    width: 37%;
    margin-left:3px;
    height: 300px;
    float: right;
    display: inline-block;
}

footer{
    display: block;
    width: 100%;
    background-color: aliceblue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

<header>
    <h1>This is header.</h1>
</header>

<section>
    this is section.
    <article>this is article.</article>
</section>

<aside>aside part.</aside>

<footer>this is footer.</footer>

</body>
</html>

我为页眉和页脚设置了 width:100%，然后它应该会拉伸以填充所有主体宽度，因为主体是它们的父节点。但我注意到它会导致页眉和页脚超出右侧的主体宽度！如果我对此发表评论，一切都会好起来的，但为什么它不能按预期工作？

和第二个问题，我希望 section 和 aside 彼此相邻，并通过设置 float:right; 为 aside 标签，但如果我设置 float:left ; 对于section元素也是如此，虽然它们仍然彼此相邻，但页脚也成为它们的背景！为什么会这样？

谢谢。

【问题讨论】：

margin 的头把自己推出了身体
@Ramon de Vries - 但我设置了 box-sizing: border-box;所以它的保证金不会导致这种情况，不是吗？
试试我的答案，这可能对你有用
默认是宽度auto，因为它们是块级元素。无需将宽度设置为100%。
@vsync - 你是对的，但为什么设置宽度会导致这个问题？实际上它应该没有效果，但它有！

标签： html css

【解决方案1】：

margin:10px; 会将标头推出body，从标头中删除margin，它工作正常。

body{
    width: 80%;
    margin: 0 auto;
    background-color: peachpuff;
}


header, section, aside, footer, article{
    padding: 10px;
    text-align: center;
    background-color: aliceblue;
    border: 1px solid cadetblue;
    font-size: 2rem;
    width: 100%;
    box-sizing: border-box;
}
header>h1{

    height: 100px;
    font-size: 2.5rem;
    text-shadow: 2px 2px 2px red;
}
article {
    width: 85%;
    margin: 0 auto;
}
section{
    width: 60%;
    height: 300px;
    margin-right:3px;
display: inline-block;
    /*float:left;*/
}

aside{
    width: 37%;
    margin-left:3px;
    height: 300px;
    float: right;
    display: inline-block;
}

footer{
    display: block;
    width: 100%;
    background-color: aliceblue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

<header>
    <h1>This is header.</h1>
</header>

<section>
    this is section.
    <article>this is article.</article>
</section>

<aside>aside part.</aside>

<footer>this is footer.</footer>

</body>
</html>

【讨论】：

是的，它有效，但是我为所有元素设置了 box-sizing:border-box，那么为什么还要 margin 改变盒子的尺寸呢？
@feelfree, https://www.w3schools.com/css/css3_box-sizing.asp box-sizing 只会影响元素的内边距，而不影响边距

【解决方案2】：

body{
    width: 80%;
    margin: 0 auto;
    background-color: peachpuff;
}


header, section, aside, footer, article{
    margin: 10px 0 0 0;
    padding: 10px;
    text-align: center;
    background-color: aliceblue;
    border: 1px solid cadetblue;
    font-size: 2rem;
    width: 100%;
    box-sizing: border-box;
}
header>h1{

    height: 100px;
    font-size: 2.5rem;
    text-shadow: 2px 2px 2px red;
}
article {
    width: 85%;
    margin: 0 auto;
}
section{
    width: 60%;
    height: 300px;
    margin-right:3px;
display: inline-block;
    /*float:left;*/
}

aside{
    width: 37%;
    margin-left:3px;
    height: 300px;
    float: right;
    display: inline-block;
}

footer{
    display: block;
    width: 100%;
    background-color: aliceblue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

<header>
    <h1>This is header.</h1>
</header>

<section>
    this is section.
    <article>this is article.</article>
</section>

<aside>aside part.</aside>

<footer>this is footer.</footer>

</body>
</html>

【讨论】：

你想要这样吗？