CSS 配置プロパティ間の相互作用_html/css_WEB-ITnose

0. 目次

目次

はじめに

テキスト

1 表示なし

2 位置絶対または固定

フロート

ディスプレイ

3 左または右にフロート

DISPLAY

4 POSITION STATIC

Offset value

Statement

1. はじめに

原文: bitsofcode's HOW POSITIONING CSS PROPERTIES INTERACT
翻訳者: フロントエンドを愛し楽しむFedFun s 共有、フロントエンド クレイジー ワンハイチンさんのブログです。
翻訳: CSS マークアップ レイアウトのコンテキストにおける位置決め関連の属性間の相互作用を見てみましょう。不適切な場合は修正してください。
読むのに 5 分を推奨します。

2. テキスト

要素を配置するときは、display、position、float および offset 属性、右上、左下などの 4 つの属性をよく使用します。ただし、4 つの属性すべてをすべての要素に同時に適用できるわけではありません。一部の特殊な値の組み合わせは、他の属性の適用をオーバーライドします。 left or float: right

position: static

次に、これらの組み合わせがどのように相互作用するかを調べてみましょう。

2.1 DISPLAY: NONE

display が none に設定されている場合、ボックス モデル (ボックス モデル) が生成されないため、他のすべての位置決め属性は無効になります。

.foo { display: none; /* None of these apply，以下这些将不会应用 */ position: absolute; float: left; top: 10px;}

2.2 POSITION: ABSOLUTE (OR FIXED)

position 属性が絶対または固定に設定されている場合、次の効果が発生します:

Float

float 属性に設定された値は上書きされ、 float 属性は上書きされ、計算された値は自動的に none に設定されます。

.foo { position: absolute; float: left; /* 被忽略, 计算值为none */}

DISPLAY

表示属性値が異なると、次の表に示すように、計算された値が上書きされる可能性があります。

指定値 指定値 計算値

inline、inline-block、table-row-group、table-column、table-column-group、table-header-group、table-footer-group、table-row、 table-cell、table-caption

block

.foo { position: fixed; display: inline-block; /* ignored, computed value is block */}.bar { position: fixed; display: block;}

上記の 2 つのケースに加えて、float 属性を left または right に設定すると、インタラクションは次のようになります:

inline-table	table
他の値	は指定された値と同じです
次のコードでは、.foo と .bar が動作します変わりはない。	2.3 FLOAT: LEFT (OR RIGHT)

DISPLAY

絶対位置決めおよび固定と同様要素を上に配置します。 フローティング後の表示属性の変換は上表のとおりです。

以下のコードでは、.foo と .bar は同じパフォーマンス効果があります。

.foo { float: left; display: inline-block; /* ignored, computed value is block */}.bar { float: left; display: block;}

2.4 POSITION: STATIC

上記の変更に加えて、position 属性値が静的である場合、相互作用は次のようになります:

Offset 値

要素が静的に配置されている場合、offset 属性は無効になります。次のコードに示すように。

そうです

3. 声明