CSS の中心的な概念

この記事では、ボックス モデル、位置、フロートなど、CSS の中心的な概念のいくつかを紹介します。これらは CSS の基礎であり、最も一般的に使用されるプロパティです。独立しているように見えますが、相互に補完し合っています。それらを習得するには、それを書き留めて議論する必要があります。間違いがあれば修正してください。

要素の種類

HTML要素は、

ブロックレベル要素(ブロックレベル要素)

inline要素(インライン要素と呼ぶ人もいます)

両方 違いは以下の点にあります。 3 つのポイント:

ブロックレベルの要素は単独で 1 行を占めます (つまり、要素の表示属性を明示的に変更しない限り、他の要素と同じ行に表示することはできません)。一方、インライン要素は 1 行に表示されます。 。

ブロックレベル要素では幅と高さの属性を設定できますが、インライン要素の設定は無効です。

ブロックレベル要素の幅はデフォルトで 100% ですが、インライン要素は独自のコンテンツまたは子要素に基づいて幅を決定します。

最も一般的なブロックレベル要素は

であり、インライン要素には などが含まれます。要素の完全なリストは Google で確認できます。

具体的に言います

.example {
    width: 100px;
    height: 100px;
}

はブロックレベルの要素なので上記のスタイルを設定するのは有効ですが、 に上記のスタイルを設定しても意味がありません。 の幅と高さを変更できるようにしたい場合は、display: block; を設定することで効果を実現できます。 display の値が block に設定されている場合、要素はブロック レベルの形式でレンダリングされます。display の値が inline に設定されている場合、要素はインライン形式でレンダリングされます。

要素をインラインで表示して幅と高さを設定したい場合は、次のように設定できます:

display: inline-block;

inline-block 私の意見では、これは要素がインライン要素として外側に表示され、 ; 行内で他の要素と共存できます。要素は内部的にはブロック レベルの要素になり、その幅と高さを変更できます。

HTML コードは順番に実行され、CSS スタイルを使用せずに HTML コードによってレンダリングされる最終ページは、要素の順序と種類に従って配置されます。ブロックレベル要素は上から下に配置され、インライン要素は左から右に配置されます。このスタイルのない状況では、要素の配置は通常のフローと呼ばれ、要素が表示される位置は通常の位置と呼ばれます (これは私が考えたものです) 同時に、すべての要素がページ上のスペースを占めることになります。スペースのサイズはボックス モデルによって決まります。

ボックスモデル

ページ上に表示されるすべての要素（インライン要素を含む）はボックス、つまりボックスモデルとみなすことができます。 Chrome DevTools のスクリーンショットを見てください:

ボックス モデルが 4 つの部分で構成されていることがはっきりとわかります。内側から外側へ:

content -> padding -> border -> margin

論理的に言えば、要素の幅 (高さなど) は次のように計算される必要があります:

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

ただし、異なるブラウザー (ご想像のとおり、異なるブラウザーです)と解釈が異なります。 W3C 標準に準拠するブラウザは、要素の幅はそのコンテンツの幅とのみ等しいと考えており、残りは追加で計算する必要があります。したがって、要素を

.example {
    width: 200px;
    padding: 10px;
    border: 5px solid #000;
    margin: 20px;
}

と規定すると、その最終的な幅は

 宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) =  270px;

となります。そして、IE (IE9 より低いバージョン) では、最終的な幅は

宽度 = width(200px) + margin(20px * 2) = 240px;

となります。個人的には、IE の方が人間の思考に沿っていると思います。結局のところ、パディングはパディングと呼ばれます。パディングとボーダーのどちらが余分な幅としてカウントされるかを判断するのは困難です。この問題を解決するために、W3C は最終的に CSS3 に box-sizing 属性を追加しました。 box-sizing: border-box; を設定すると、ボーダーとパディングが幅と高さに含まれます。これは以前の IE 標準と同じです。したがって、同じ CSS が異なるブラウザーで異なるパフォーマンスを発揮するのを防ぐために、以下を追加するのが最善です:

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

ここには 2 つの特殊なケースがあります:

幅なし - 絶対配置 (position: ABS;) 要素

幅なし - フローティング (フロート) 要素

これらはページ上のスペースを占有しません (通常のフローから外れて、ページの上部に浮いているように感じられ、移動しても影響はありません)他の要素の配置)。これには、他の 2 つの中心的な概念、position と float が関係します。

position

position この属性は、要素の配置方法を決定します。大きく以下の 5 つの値があります:

具体的な効果については、w3school の例を参照するか、自分で書いて理解することができます。

以下の図に示すように、各 Web ページは、積み重ねられたページのレイヤーとして見ることができます。

positionがrelativeに設定されている場合、要素は通常のフロー内にあり、位置は通常の位置で左右などに移動できます。他の要素の位置に影響します。

そして、要素の位置の値が絶対値または固定値である場合、次の 3 つのことが起こります:

要素を Z 軸方向に 1 レイヤー移動します。要素は通常のフローから外れているため、元のレイヤーのスペースを占有せず、下のレイヤーの要素を覆います。

要素はブロックレベルの要素になります。これは要素に display: block; を設定するのと同じです ( などのインライン要素の場合、absolute を設定した後、幅を設定できることがわかります)と高さ）。

要素がブロックレベル要素の場合、要素の幅は元の幅 100% (1 行を占有する) から自動に変更されます。

この観点から、位置が絶対または固定に設定されている場合、表示をブロックに設定する必要はありません。また、基礎となる要素をカバーしたくない場合は、z-index 値を設定して効果を実現できます。

float は、名前が示すように、float 要素を持ちます。 名前を見るだけで理解できます。

元の float は、画像の周囲にテキストを折り返す効果を実現するためにのみ使用されており、それ以上のものではありません。最近では、float にはこれより多くの応用例があり、それを簡単に説明するためのブログ記事も数多く書かれています。

原理については詳しくは説明しませんが、float の重要なポイントをいくつか説明します。

左右にのみ浮動し、上下には浮動しません。

要素がフロートに設定されると、通常のフロー (position:Absolute; と同じ) から切り離され、元のレイヤーのスペースを占有せず、次のレイヤーの要素をカバーします。

フローティングは、要素の前の兄弟要素には影響を与えません。

フローティング後、その要素の次の兄弟要素は、その要素の前にフロートに設定されていない要素のすぐ後ろに配置されます（要素が通常のフローから外れている、またはこの要素に載っていないため、理解しやすい）レイヤーなので、次の An 要素は当然その位置を埋める必要があります)。

要素の次の兄弟要素にインライン要素 (通常はテキスト) がある場合、その要素は要素の周囲に表示され、「画像を囲むテキスト」と同様の効果が作成されます。

次の兄弟要素も同じ方向にフロートするように設定されている場合、この要素の直後に表示されます。

要素はブロックレベルの要素になり、要素に display: block; (position:Absolute; と同じ) を設定するのと同じになります。

ここでもう 1 つよく知られているのが、フロートのクリアです。具体的な方法はたくさんあります。この記事を読んでください。当時私たちが一緒にクリアした山車については詳しく説明しません。

CSS の中核概念に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

関連ラベル：

css

ソース：php.cn

前の記事：CSS の背景の 8 つのプロパティについて話す 次の記事：CSS3画像ジッター効果

このウェブサイトの声明

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

著者別の最新記事

• HTMLで太字、斜体、下線、取り消し線などのフォント効果を設定する例の紹介
  1970-01-01 08:00:00
• Java バージョンの Redis を実装する
  1970-01-01 08:00:00
• 最も単純な WeChat アプレットのデモ
  1970-01-01 08:00:00
• Pythonでのpandas.DataFrameの簡単な操作方法（作成、インデックス、追加、削除）の紹介
  1970-01-01 08:00:00
• WeChat ミニ プログラム: タブ効果の実装方法の例
  1970-01-01 08:00:00
• Python は辞書構造の出力を美しくするためのカスタム メソッドを構築します
  1970-01-01 08:00:00
• HTML5: Canvas を使用してビデオをリアルタイムで処理する
  1970-01-01 08:00:00
• Asp.net は SignalR を使用して画像を送信します
  1970-01-01 08:00:00
• WeChat ミニ プログラム開発チュートリアル - App() および Page() 関数の概要
  1970-01-01 08:00:00
• Python Redisの使い方を詳しく解説
  1970-01-01 08:00:00

最新の問題

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1335

ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...

から 2024-04-06 21:58:04

0

1

800

Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...

から 2024-04-06 20:57:16

0

1

487

CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...

から 2024-04-06 20:45:26

0

2

386

他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...

から 2024-04-06 20:41:51

0

1

518

関連トピック

詳細>

• css
• CSS中心
• CSSに画像を挿入する方法
• CSSが表示を超えています...
• CSSフォントの色
• CSSとは何ですか
• CSSで三角形を書く方法
• CSSで文字の色を設定する