13

HTML の body タグのサイズについて混乱しています。

次のような厳しいコードがあります。

<body>

</body>

 body{
        padding: 0px;
        height: 100px;
        background-color: #e5e5e5;
    }

背景がページ全体を覆うのはなぜですか?

私のためにこれを説明してください、あなたの助けに感謝します!

4

4 に答える 4

19

これは確かに紛らわしいですが、CSS 2.1 仕様の14.2 節で指定されています。 背景: の計算値background-colorとtransparentの計算値がbackground-image要素noneのhtml場合 (デフォルトではそうです)、ブラウザーは代わりに の計算値を使用する必要があります。要素の背景プロパティでありbody、背景をレンダリングしてはなりませんbody(つまり、透明にします)。つまり、独自の背景がない場合、body背景は魔法のように背景に変わります。これは背景のプロパティにのみ影響し、要素の実際の高さには影響しません。htmlhtmlbody

一種の「逆継承」を規定するこの奇妙な規則の根拠を私は見たことがありません。しかし、これは CSS 2.1 で明確に指定されており、ブラウザーによって適用されます。

他の回答で説明されているように、背景をオンに設定するかhtml（body背景が実際にbodyのみに適用されるように）、または内部でラッパー要素を使用してbody高さを設定することにより、コンテンツに特定の高さの背景を持たせることができます（特別なルールが適用されるため）bodyのみ) 。

WHATWG メーリング リストでこの件について質問したときに CSS 仕様を指摘してくれた Anne van Kesteren に感謝します。(CSS 2.1 を暗記していると思っていましたが、実際にはわかりませんでした。☺)

于 2013-07-23T18:15:20.187 に答える
2

多くの Web 開発者は、スタイルを body 要素に適用する場合と html 要素に適用する場合の違いを理解していません。ほとんどの場合、これらの作成者は body 要素にのみスタイルを適用します。それが十分でない場合、ページがたまたま正しく見えるようになるまで、html と body の両方にあらゆる種類のスタイルをスパム送信します。

混乱は理解できます。最初はどちらも同じように扱われ、background-color などの属性が body タグに適用され、ページ全体に影響を与えていました。

編集:簡単にするために、背景色がどのように適用されるかを示すためにフィドルを追加しました。したがって、本文の背景色を指定し、それをページ全体に広げたくない場合は、HTML の背景色を指定する必要があります。それも

フィドル

CSS

html{
    background-color:yellow;
}
body{
        padding: 0px;
        height: 100px;
        background-color: red;
    }
于 2013-07-23T09:59:44.967 に答える
2

body は特別な HTML タグで、通常は HTML ページ全体をカバーします。次のことを試してください。

<body>
    <div id="content">
        Content goes here
    </div>
</body>

それに付随する CSS は次のようになります。

body{
    /* whatever body related codes you'd like to use go here */
}

#content{
    padding: 0px;
    height: 100px;
    background-color: #e5e5e5;
}
于 2013-07-23T09:46:39.333 に答える
1

タグの背景色をhtml明示的に指定する必要があります(ブラウザーが自動的に追加するため)。そうしないと、背景色bodyがドキュメント全体に広がります。

于 2013-07-23T09:50:39.847 に答える