CSS の配置例の説明

この記事では、CSS の配置に関するチュートリアルを中心に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1.文書の流れ

簡単に言うと、HTMLの中で要素を位置順に並べていく処理です。 HTML のレイアウト メカニズムはドキュメント フロー モデルを使用します。つまり、ブロック要素は 1 行を占め、インライン要素は 1 行を占めません。

一般に、マージンは要素を互いに分離するために使用され、パディングは要素をコンテンツから分離するために使用されます。マージンは、要素が互いに独立できるように要素を区切るためにレイアウトに使用され、パディングは要素とコンテンツの間のスペースに使用され、コンテンツ (テキスト) と (ラップされた) 要素の間に「距離」を確保します。フロートまたは絶対配置でレイアウトされていない限り、ドキュメント フロー内にあります。

2. Position 属性の概要

1. 静的、デフォルト値。位置が静的に設定されている要素は、常にドキュメント フローによって指定された位置にあります。

2. inherit は、position 属性の値が親要素から継承されることを指定します。ただし、Internet Explorer (IE8 を含む) のどのバージョンでも、属性値「inherit」はサポートされていません。

3. 修正済み、絶対位置の要素を生成します。デフォルトでは、ブラウザ ウィンドウを基準にして指定した座標に配置できます。

4. 要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。要素は、ウィンドウがスクロールされているかどうかに関係なく、その位置に留まります。ただし、祖先要素にtransform属性があり、属性がない場合、座標はブラウザ ウィンドウではなく、祖先要素を基準にして指定されます。

5. absolute は、要素に最も近い位置にある祖先要素を基準にして絶対位置の要素を生成します。

6. この要素の位置は、「left」、「top」、「right」、「bottom」属性で指定できます。

7. relative は、ドキュメント内の要素の初期位置を基準にして、相対的に配置された要素を生成します。

8. 「left」、「top」、「right」、「bottom」属性を使用して、この要素の独自の位置に対する相対的なオフセットを設定します。

3. 相対配置

  <style type="text/css">     
        #box1 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #box2 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: red;
            /*position: relative;
            left: 100px;
            top: 100px;*/
        }
  </style>
  <p id="box1"></p>
  <p id="box2"></p>

4. 絶対配置

その要素の最も近くに位置する祖先要素を基準として、位置設定が設定された祖先要素がない場合、参照オブジェクトはボディです層。

1. 祖先要素が配置されていない場合は、absolute を使用します。この場合、参照オブジェクトはボディです。

2. 先祖要素は位置指定を持っています。祖先要素がposition:static以外の値に設定されている限り、位置指定があるとみなされ、最も近い先祖要素が絶対位置指定要素の参照として設定されます。この場合、参照は最も近い祖先要素です。

3. 左/右と上/下が設定されていない場合、絶対要素の位置はドキュメントフロー内の要素の位置になります

CSSの位置、絶対、相対ポジショニング いくつかの研究

CSS ポジショニングのポジションとアプリケーション シナリオの例の分析

CSS ポジショニングに関する 10 の推奨コース

以上がCSS の配置例の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。