CSS_html/css_WEB-ITnose の 4 つの中心概念

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

要素の種類

HTML要素は次の2種類に分けられます:

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

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

の違い2 つは次の 3 点にあります:

1. ブロックレベルの要素は 1 行だけを占有します (つまり、要素の表示属性を明示的に変更しない限り、他の要素と同じ行に表示できません)。要素はすべて 1 行に表示されます。

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

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

最も一般的なブロックレベル要素は dc6dce4a544fdca2df29d5ac0ea9906b です。インライン要素には 45a2772a6b6107b401db3c9b82c049c2 3499910bf9dac5ae3c52d5ede7383485 などが含まれます。要素の完全なリストは Google で確認できます。

具体的に言いましょう、

.example {<br />    width: 100px;<br />    height: 100px;}

dc6dce4a544fdca2df29d5ac0ea9906b はブロックレベルの要素なので上記のスタイルを設定するのは効果的ですが、45a2772a6b6107b401db3c9b82c049c2 に上記のスタイルを設定しても意味がありません。 45a2772a6b6107b401db3c9b82c049c2 の幅と高さを変更できるようにしたい場合は、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

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

.example {<br />    width: 200px;<br />    padding: 10px;<br />    border: 5px solid #000;<br />    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 {<br />  -moz-box-sizing: border-box;<br />  -webkit-box-sizing: border-box;<br />  box-sizing: border-box;}

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

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

幅なし - フロート要素

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

position

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

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

下の図に示すように、各 Web ページは 1 層ずつ積み重ねられているように見えます。

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

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

1. 要素は Z 軸方向に 1 レベル移動され、要素は通常のフローから外れるため、要素は移動されなくなります。元のスペースを占有します。レイヤーのスペースは、下位レイヤーの要素もカバーします。

2. 要素はブロックレベルの要素になります。これは、要素に対して display: block; を設定するのと同等です (absolute を設定した後、 などのインライン要素を与えます)。幅と高さ)。
   

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

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

float

float 名前が示すように、要素を浮動小数点数にします: left right none継承 名前を見ただけで理解できるでしょう。

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

float の原理を基本的に説明します。

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

上下ではなく、左右に浮くだけです。
要素をフロートに設定すると、通常のフロー (position:Absolute; と同じ) から切り離され、元のレイヤーのスペースを占有せず、次のレイヤーの要素をカバーします。
Floating は、要素の前の兄弟要素には影響を与えません。
フローティング後、要素の次の兄弟要素は、その要素の前にフロートに設定されていない要素のすぐ後ろに配置されます（通常のフローから外れている、またはそうでない要素であるため、理解しやすい）このレイヤーでは、次の要素がその位置を埋める必要があります)。
要素の次の兄弟要素にインライン要素 (通常はテキスト) がある場合、その要素は要素の周囲に表示され、「画像を囲むテキスト」と同様の効果が作成されます。
次の兄弟要素も同じ方向にフロートするように設定されている場合、この要素の直後に表示されます。
要素はブロックレベルの要素になり、要素に対して display: block; (position:Absolute; と同じ) を設定するのと同じになります。
ここにはもう一つ、よく知られているクリアフロートがあります。具体的な方法はたくさんあります。こちらの記事をご覧ください。当時私たちが一緒にクリアした山車については詳しく説明しません。

この記事を書いた後、position と float を同時に設定するとどのような問題が発生するのかという一連の疑問が頭に浮かびました。互換性はどうですか？どのプロパティがオーバーライドされますか?まだ実践する時間がありませんので、順列と組み合わせによる効果はまたの機会に見てみましょう... 実践したことのある方はこっそり教えてください^_^

著者: GeekPlux

記事出典: http:// www.geekplux.com/ 2014/04/25/something_core_concepts_of_css.html