Question

我编写了一个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％，然后它应该进行拉伸以填充整个正文宽度，因为body是其父节点。但是我注意到它导致页眉和页脚超出了右侧的宽度！如果我对此发表评论，一切都会好起来的，但是为什么它不能按预期工作呢？

和第二个问题，我希望将部分和旁边彼此相邻，并通过将 float：right; 设置为aside标签，但是如果我将 float：left设置为; 也是section元素，尽管它们仍然彼此相邻，但页脚也成为了背景！为什么会这样？

谢谢。

Answer 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>

Answer 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>

CSS宽度属性无法正常工作

2 个答案: