CSS では、論理プロパティを使用すると、開発者は物理的なレイアウトではなく、Web ページの論理構造に基づいてスタイルを定義できます。これは、テキストの方向またはコンテンツ フローに基づいて CSS を適用できることを意味します。
主に論理属性を使用して、HTML 要素のマージン、パディング、境界線を設定します。これには、マージン、パディング、境界線のプロパティのさまざまなバリエーションが含まれています。
論理プロパティは、ブロックレベルおよびインラインディメンションに基づいて定義できます。
ブロック ディメンション - ブロック ディメンションは、コンテンツ フローの垂直方向を表します。たとえば、英語のテキストの方向は左から右です。そのため、ブロック ディメンションはコンテンツの上部と下部を処理します。要素。######
- インライン ディメンションは、コンテンツまたはテキストの方向と同じ方向を表します。英語の場合、左側と右側はインラインディメンションです。
-上下の境界線を設定します。
-左右の境界線を設定します。
- 上の境界線を設定します。
-下枠を設定します。
-左右のマージンを設定します。
-左右のパディングを設定します。
-左パディングを設定します。
- 下部のパディングを設定します。
-右の境界線の幅を設定します。
-上枠のスタイルを設定します。
通常の CSS プロパティの代わりに論理プロパティを使用する必要があるのはなぜですか?
HTML 要素の左右の余白を設定する必要がある場合があります。これを行うには、margin 属性の「0 auto」値を使用するか、margin-left と margin-right の CSS プロパティをそれぞれ使用します。 「0 auto」を使用すると、上マージンと下マージンが以前に適用されていた場合は、その値も変更されます。したがって、「margin-inline」CSS プロパティを使用することをお勧めします。
リーリー ###文法###ユーザーは以下の構文に従って CSS で論理プロパティを使用できます。
リーリー例 1 (マージンとパディングの論理プロパティ)
以下の例では、2 つの div 要素を作成し、その中にテキストを追加します。 CSS では、「padding-block-start」、「padding-inline-start」、および「margin-block-end」論理 CSS プロパティを使用して、最初の div の上下のパディングと下マージンを設定しました。
例 2
以下の例では、境界線に関連する論理 CSS プロパティを示しています。「border-block-start」を使用して上境界線を適用し、「border-block-end」を使用して下境界線を適用しました。さらに、「border-inline-start」を使用して左の境界線を適用し、「border-inline-end」を使用して右の境界線を適用しました。
出力では、ユーザーは div 要素のさまざまな側面のさまざまな境界線を確認できます。は次のように翻訳されます:
例 3以下の例では、フレックスボックスのマージンとパディングに関連する CSS 論理プロパティを適用しました。ここでは、コンテナー div 要素内に 3 つの div 要素を作成しました。その後、「padding-inline」を使用してコンテナの div 要素に左右のパディングを適用します。
以上がCSS の論理プロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。