CSS_html/css_WEB-ITnose の負のマージン値についての深い理解-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS_html/css_WEB-ITnose の負のマージン値についての深い理解

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:22 AM

× ディレクトリ [1] パフォーマンス [2] オーバーラップ [3] フローティング [4] ポジショニング [5] アプリケーション

上記の通り

margin 属性は実際に非常によく使われており、落とし穴がたくさんあります。何らかの理由でマージンフォールディングの被害に遭った人はたくさんいると思います。負のマージン値も非常に一般的な機能であり、多くの特別なレイアウト方法はこれに依存しています。簡単なようで実はかなり複雑です

この記事ではマージンの負の値について詳しく紹介し整理しています

【注意】マージン部分の基礎知識はこちらに移動します

パフォーマンス

マージンは可能ですが。すべての要素に適用されますが、表示属性が異なるとパフォーマンスも異なります

【1】ブロック要素は4方向のマージン値を使用できます

【2】インライン要素は上下のマージン値を使用しますdown 方向は無効です

【3】Inline-block は上下方向に負のマージン値を使用していますが、無効に見えます

[注意] Inline-block は上下方向に負のマージン値を使用していますが、無効に見えます。これは、デフォルトのvertical-align:baselineに関連します。垂直方向の配置属性値が他の値の場合、異なる視覚効果が表示されます

Overlap

負のマージン値は、必ずしも前の要素をカバーするとは限りません。 , 要素の表示属性に関係します

【1】2つのブロック要素が重なっている場合、次の要素は前の要素の背景をカバーすることはできますが、その内容をカバーすることはできません

【2】インライン要素が2つある場合、または2 つの line-block 要素、または inline と inline-block 要素が重なっている場合、次の要素は前の要素の背景とコンテンツを覆うことができます

【3】inline 要素が block 要素と重なる場合、inline 要素は背景とコンテンツを覆います。 block要素の内容

【4】inline-block要素がblock要素と重なる場合、inline-block要素はblock要素の背景を覆いますが、その内容を覆うことはできません

Floating

【1】ブロック要素がフローティング要素に重なる場合、その境界線と背景はフローティング要素の下に表示され、コンテンツはフローティング要素の上に表示されます

【2】インラインまたはインラインブロック要素がフローティング要素に重なる場合、その境界線、背景、コンテンツはすべてフローティング要素の上に表示されます

位置決め

【1】配置された要素（位置は静的ではありません）が他の要素を覆います背景とコンテンツ

【2】相対を適用した後inline 要素や inline-block 要素に属性値を追加する場合、inline 要素の性質は変更できないため、上下のマージンの問題は依然として残ります

アプリケーション

【1】水平方向と垂直方向のセンタリング

マージンのパーセンテージは包含ブロックの幅に相対し、空の

要素は中央に配置する必要がある要素の外側に配置され、要素の幅と高さを等しくするために絶対の折り返しプロパティが使用されます。要素の幅と高さを配置したい領域に

.box{    position:relative;    width: 200px;    height: 200px;    background-color: lightgreen;    border: 2px solid black;}.out{    position: absolute;    left: 50%;    top: 50%;}    .in{    height: 100px;    width: 100px;    background-color: pink;    margin-left: -50%;    margin-top: -50%;}

<div class="box">    <div class="out">        <div class="in">测试内容</div>        </div>    </div>

【2】リスト項目の両端を揃える

リスト項目の外側に要素のレイヤーを囲んで使用します。最後のリスト項目を戻すには、負のマージン値を使用します

ul{    margin: 0;    padding: 0;    list-style:none;}.box{    width: 200px;    background-color: pink;    }.list{    overflow: hidden;    margin-right: -10px;}.in{    float: left;    width: 60px;    height: 100px;    background-color: lightgreen;    margin-right: 10px;}

<div class="box">    <ul class="list">        <li class="in">1</li>        <li class="in">2</li>        <li class="in">3</li>    </ul>    </div>

【3】3列アダプティブレイアウト

真ん中の本体は2層ラベルを使用し、外側の

は左右に 210px のマージン値を含む実際のメインコンテンツです。左列と右列の両方で負のマージン値が使用されています。左列は左にフロートされ、margin-left は -100% です。これにより、左列がページの左側に正確に配置されます。右列は左にフロートし、サイズは独自の幅200pxです

html,body{    height: 100%;}body{    margin: 0;}.main{    width: 100%;    height: 100%;    float: left;}.main .in{    margin: 0 210px;    background-color: pink;    height: 100%;}.left,.right{    height: 100%;    width: 200px;    float: left;    background-color: lightgreen;}.left{    margin-left: -100%;}.right{    margin-left: -200px;}

<body><div class="main">    <div class="in"></div></div><div class="left"></div><div class="right"></div></body>

[4] 3列の等高レイアウト

各列に大きな下パディングを設定し、negativeを使用します同じ値の外側のマージンこの高さを削除してから、オーバーフローを設定します: 外側のコンテナーに非表示になります

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLを超えて：Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

See all articles