CSSを使って素早くレイアウトする方法(1) ～要素を詳しくレイアウトする～

Web ページのレイアウトをすばやく実行するには、細部で常に間違いを犯さないように、レイアウトの要素を明確に理解する必要があります。この記事ではまず、レイアウトの基礎となるブロックレベル要素とインライン要素、ボックスモデル、正確な配置、要素の配置、スタイルの継承など、レイアウトに関わる要素について詳しく説明します。次の記事では、簡単なレイアウトのアイデアを説明することに焦点を当てます。

1. ブロックレベル要素とインライン要素とは何ですか?

1. ブロックレベル要素:

一般的に、ブロックにはブロックレベル要素とインライン要素を含めることができます。

例外:

P要素にはインライン要素のみを含めることができ、ブロックレベル要素は含めることができません。

「form」ブロック要素は、他のブロック要素を収容するためにのみ使用できます。

2. インライン要素:

display:inline は改行を表示せず、インライン要素のみを含めることができます。

「span」のようなインライン要素は、他のブロックレベルの要素に依存するため、インライン要素に高さ、幅、内マージン、外マージンなどの属性を設定することは無効です。 実際、知っておく必要があるインライン要素は、スパンと

3. フローティング要素は自動的に「ブロック」要素に設定されます

ブロックであってもインラインであっても、フロートを定義した後、高さと幅。

通常、高さは定義できません。幅は定義できますが、テキスト部分のみがマウスに反応します

float:leftを追加すると、ブロック全体がマウスに反応しますが、横メニューになります

を設定します。属性 display:inline; 有名な IE の二重浮動境界線の問題を修正できます。 ↓(この問題はIE6のみにあるようです?)

http://www.zzzszy.com/a/2016/0927/896160.html

block要素(ブロック要素)

インライン要素 (インライン要素)

* address - アドレス * blockquote - ブロック引用符 * center - 中央揃えブロック * dir - ディレクトリリスト * p - 一般的に使用されるブロックレベルは、CSS レイアウトのメインタグでもあります * dl - 定義リスト * fieldset - フォームコントロールグループ * form - インタラクティブフォーム * h1 - 見出し * h2 - サブタイトル * h3 - レベル 3 の見出し * h4 - レベル 4 の見出し * h5 - レベル 5 の見出し * h6 - レベル 6 の見出し * hr - 水平分割線 * isindex - 入力プロンプト * menu - メニューリスト * noframes - フレームのオプションのコンテンツ (このブロックのコンテンツはフレームをサポートしていないブラウザーに表示されます) * noscript - ) オプションのスクリプトのコンテンツ (このコンテンツはスクリプトをサポートしていないブラウザーに表示されます) * ol - ソートフォーム * p - 段落 * 事前に書式設定されたテキスト * table - テーブル * ul - 順序なしリスト

* a - アンカー * abbr - 略語 * 頭字語 - 最初の単語 * b - 太字 (非推奨) * bdo - 双方向オーバーライド * big - 大きなフォント * br - 改行 * cite - quote * code - コンピュータコード (ソースを引用する場合は必須code) * dfn - 定義フィールド * em - 強調 * font - フォント設定 (非推奨) * i - 斜体 * img - 画像 * input - 入力ボックス * kbd - キーボードテキストを定義します * label - テーブルラベル * q - 短い引用符 * s - アンダースコア (非推奨) * samp - サンプルコンピュータコードを定義します * select - 項目の選択 * small - 小さなフォントのテキスト * scan - 一般的に使用されるインラインコンテナ、テキスト内のブロックを定義します * ストライク - 下線 * 強 - 太字の強調 * sub - 下付き文字 * sup - 上付き文字 * テキストエリア- 複数行のテキスト入力ボックス * tt - テレックス テキスト * u - 下線 * var - 変数の定義

4. 変数要素

変数要素は、コンテキストに基づいて要素がブロック要素であるかインライン要素であるかを決定します。

* アプレット - Java アプレット

* ボタン - ボタン

* del - テキストの削除

* iframe - インラインフレーム

* ins - 挿入されたテキスト

* マップ - 画像ブロック (マップ)

* オブジェクト - オブジェクトオブジェクト

* スクリプト - クライアント スクリプト

5、表示: inline-block;

幅と高さを設定するためにブロックレベルの要素を維持しますが、インライン要素などの他のインライン要素と組み合わせることができますライン。

2. ボックスモデル

3. 配置方法 - 相対配置、絶対配置、フローティング

相対配置: は、文書要素のフロー位置。

static (デフォルト値): デフォルト値を使用すると、CSS の要素に対して定義された top、left、right、bottom.z-index は有効になりません。

relative: 要素自体に対して相対的に移動します。

絶対配置: 通常の文書の流れから切り離され、スペースを占有しなくなります。

absolute: 静的ではない親要素を基準とした絶対配置 親要素の位置が指定されていない場合、絶対配置は HTML ドキュメント全体を基準とした絶対配置になります。通常のドキュメントフロー配置要素およびフロート要素では最初に表示されます。

修正: ブラウザ ウィンドウを基準にして配置され、Web ページがどのようにスクロールされても、要素は常に画面上の特定の位置に留まります。

Float: float

ドキュメントフローの外 - 親要素のサイズを基準にして位置を調整します。親要素の幅がそれぞれ 100、2 つの子要素の幅が 200 の場合でも、左右ではなく上下の階層として表示されます。

外側のボックス - 通常のドキュメント フローの配置要素で最初に表示されます。インナーボックス - ブロックレベル要素より弱く、インライン要素より強い

キーポイント! 配置要素とドキュメント フローの表示関係

1. 通常のドキュメント フロー間の内部ボックスと外部ボックスの表示関係:

代码结构如下（粗略展示）<p>黄色块正方形
　　</p><p>红色块</p>　　<p>红色块</p><p>蓝色块正方形</p>

黄色と青が外部ドキュメント フロー、赤色が外部ドキュメント フローです。 2 つの黄色のブロックです。内部文書フローです。

外側のボックスは外部ドキュメントフローであり、内側のボックスには独自のドキュメントフローがあり互いに干渉しませんが、外部ドキュメントフロー（独自の親要素ではありません）内部文書フロー上に最初に表示されます。

2. 内部ボックスのフローティング要素と内部ドキュメント フロー要素の関係:

• インライン要素とフローティング要素の優先順位:

通常のドキュメント フローでは、インライン要素とブロックレベル要素はそれぞれ 1 行を占めます。

ただし、フローティング要素に設定すると、ドキュメント フロー インライン要素はフローティング要素に取って代わられます ( が

の前に連続して定義されている場合、結果は次のようになります)同じ）。以下のように:

テキストの折り返しもあります:

• ブロックレベルの要素と浮動要素の優先順位

ブロックレベル要素の場合浮動要素が定義されている場合、浮動要素は後ろに折り返されます。フローティング要素が最初に定義されると、ドキュメント フローから分離され、通常のドキュメント フローのブロック レベルの要素には影響しません。

3. 内部ボックスのフローティング要素と外部ドキュメント フローの内部要素の関係:

フローティング要素は外部ドキュメント フロー要素をカバーしますが、スペースを占有しません。

緑色のブロックと画像は青色のブロックの内部要素です。ブロックレベルの要素は通常のドキュメント フローに従って表示されますが、インライン要素 img はそのまま表示されます。フローティング要素の外部ドキュメント フローであっても、フローティング要素に屈します。

4. 兄弟要素の絶対配置とフローティングの優先関係

青いブロックは黄色の内側のブロックの絶対配置要素であり、pは赤いブロックの前に設定されます。赤いブロックは Float 配置の要素であり、Absolute でカバーされています。

5.絶対配置とドキュメントフロー要素の優先関係と相対配置要素の優先関係

絶対配置位置：absolute。

1. 静的ではない親要素を基準とした絶対配置を実行します。親要素の位置が指定されていない場合、absolute は HTML ドキュメント全体を基準とした絶対配置を実行します。

2. topleftbottomright が設定されていない場合、その上部と左側は元のドキュメント フローの位置と一致します (つまり、位置が設定されていない場合と同じになります)。ただし、内部の余分な部分はカバーされます。外部ドキュメント フローのフローティング要素。

下の図は、青いブロックの設定位置:絶対;を示しています

(注:黄色のブロック(赤と緑のサブ要素を含む)と青のブロック(緑のサブ要素を含む)は兄弟要素です)

順序を変更します。まず、青いブロックで p と位置を絶対に設定します。黄色のブロックには位置が設定されていないため、デフォルトで静的になります。ドキュメントフローから切り離されているため、絶対要素が最初に表示されます。

黄色のブロックの位置を相対位置に設定し、黄色のブロックが絶対位置の要素をカバーします。つまり、相対的に配置された要素が絶対的に配置された要素の後に配置される場合、相対的に配置された要素が最初に表示されます。

概要:

1. 通常のドキュメントフローでは、最初に定義された要素の内側のボックスの上に外側のボックスが最初に表示されます(超えた場合は上書きされます)。ブロックレベル要素とインライン要素は同じ行には配置されません。

2. 内部ドキュメント フローと外部ドキュメント フローの場合、最初に定義された要素は通常のドキュメント フローに従って表示されます (ブロック レベルに優先され、後で定義される要素はありません)。レイアウトへの影響はありますが、通常のドキュメント フローでのインライン要素の表示には影響します。つまり、インライン要素は依然としてフローティング要素によって「絞り出される」ことになります (インライン要素がどこにあっても、フローティング要素の下にカバーされません)。 )

3. 絶対配置された要素は、フローティング要素の上に最初に表示されます。

4. 特定の値を設定しない絶対配置要素は、通常のドキュメント フローに従って配置されますが、ドキュメント フローから分離され、後で定義された要素には影響しません。

5、絶対位置の要素の前に兄弟要素がposition:relative; に設定されている場合、絶対位置の要素が相対位置の要素の上に最初に表示されます。

絶対位置の要素の後に定義すると、相対位置の要素が絶対位置の要素よりも優先されます。

4. 中央揃えの方法

水平方向の中央揃え:

1. インライン要素の中央揃えを実現します。 メソッド: text-align:center;

2. インライン要素の外側のブロック要素のスタイルで、ブロックレベル要素の水平方向の中央揃えを実現します。

方法 1: margin:0 auto;

注: ブロックレベルの要素が body の直接の子要素であり、幅が設定されていない場合、デフォルトで 100% になり、効果は見られません。 ; 高さが設定されておらず、p コンテンツに高さが存在しない場合、高さはデフォルトの 0 になります。したがって、効果を確認するには、ブロックレベル要素の幅と高さを必ず同時に設定してください。このときのマージンは親要素を基準にしているため、p 内の別の p を中央に配置したい場合にも、このメソッドを使用できます。

方法 2: 絶対位置決めと負のマージンを使用します。

position:absolute;

left:50%;

１．

フォントを垂直方向の中央に配置し、行の高さを次の高さに設定します。親要素。

方法2:

パディングを垂直方向の中央に設定します。

方法 3:

親要素に line-height を設定し、inline 要素にvertical-align:middleを設定します。

2. ブロックレベル要素の垂直方向の中央揃え。

方法 1: 絶対位置決めと負のマージンを使用します。

方法2:

親要素にdisplay:flex;align-items:center;を追加して垂直方向の中央揃えを実現します。

水平方向と垂直方向の中央揃えを実現する

方法 1:

絶対位置と負のマージンを使用する

方法 2:display: flex を使用する

display: align-items を親要素のスタイルに追加します。 center は垂直方向のセンタリングを実現し、justify-content:center は水平方向のセンタリングを実現します

。

方法 3:

display:flex も使用します。

親要素に display:flex を設定し、子要素に margin:auto を設定します。

方法 4: css3 属性を使用する - translation() 変換関数

位置: 絶対; 上:50%; 左:translate(-50%,-50%);

5. スタイルの継承について

Boxモデルの幅、高さ(幅と高さ)、ボーダー(border)、マージン(余白)、パディング(フィラー)、背景などのスタイルは継承できません。継承不可

継承可能なプロパティ

色

カーソル

方向

フォント

文字間隔

行の高さ

リストスタイル

テキスト配置

テキストインデント

テキストシャドウ

テキスト変換

ホワイトホワイトスペース

単語区切り

単語の間隔

ワードの折り返し

書き込みモード

CSS を使用してすばやくレイアウトする方法 (1) - レイアウト要素の詳細 関連記事については、PHP 中国語 Web サイトに注目してください。