Webページの重なり問題をCSSで解決する方法

Web ページの重なりを解決する CSS メソッド: 1. 親要素の境界線を設定します; 2. 親要素にパディングを追加します; 3. 幅と高さを持つ兄弟要素を子要素の上に追加します; 4.親要素の「overflow:hidden;」属性などに境界線を設定します。

#このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

おすすめ: 「

css ビデオチュートリアル 」

Web ページの余白の重なりの問題を CSS で解決します

以下に紹介しますcssを使って重ならないようにする方法 余白を重ねる方法はいくつかあります。

最初に dom 構造のセットを想定します

<div class="parent">
    <div class="child">
    </div>
</div>

通常、子要素にマージンが設定されている場合、この属性は親要素にも同じ効果を及ぼしますが、

#これは実際には望んでいる結果ではなく、子要素にマージンを設定したいだけなので、どうすればよいでしょうか?

1. 親要素に境界線を設定します

.parent { 
    width: 300px;       
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

2. 親要素にパディングを追加します

.parent {
    padding： 1px;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

3. 幅と高さを指定して子の上に兄弟要素を追加します要素、覚えておいてください、住むには幅と高さがあるのです。

<div class="parent">
     <div style="width: 20px;height: 20px;margin-top: "></div>
     <div class="child">
     </div>
</div>

4. overflow: hidden; 属性を親要素

.parent {
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

5. 子要素に display: inline-block を設定します (子要素がインライン要素である場合、またはインラインのブロックレベル要素、マージンの重なりの問題はありません)

.parent {
    width: 300px;
    height: 300px;
} 
.child {
    width: 200px;
    height: 200px;
    margin: 20px; 
    display: inline-block;
}

6. これを実現するには、フローティング、絶対配置など、ドキュメント フローからサブ要素を削除することで多くの方法があります。 . ここでは詳しい説明はしません。

以上がWebページの重なり問題をCSSで解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。