ビーフブリスケットのCSSコアコンテンツ_html/css_WEB-ITnose

inuu教師の説明によると、CSSのコア含有量は、標準フロー、ボックスモデル、フローティング、ポジショニングの4つの部分にほぼ分割されています。

内容を学ぶ前に、まず 2 つの基本概念を理解しましょう: ブロックレベルの要素そしてインライン要素。 CSS 仕様の規定によれば、各 Web 要素には、要素のタイプを決定するための Display 属性があります (DIV 要素など)。これは、ラベル要素がブロックであることを意味します。 level 要素、span 要素のデフォルト値は、インライン要素である「inline」です。

いわゆるブロックレベルの要素は、表示時に特定の長方形のスペースを自動的に占有し、その高さ、幅、内側と外側のマージン、その他の属性を設定することで、長方形の表示外観を調整できます。独自の独立した空間を持たず、他のブロックレベルの要素に依存して存在するため、インライン要素に高さ、幅などの属性を設定しても意味がありません。流れ基準

標準フロー

いわゆる標準フローとは、ラベルの配置のことです。一般に、Web ページ要素の表示順序は、HTML ファイルにタグを記述した順序であり、制御ステートメントを含まないコードの実行順序と同じです。小さな例:

ボックスモデル、境界線、マージン。私たちが日常生活で目にするさまざまなボックスは、上記の 4 つの属性を備えているため、ボックス モデルと呼ばれます。標準のボックス モデルを以下の図に示します。ボックス モデルをコードにどのように反映させるかは、次の例を参照してください。

次のように結果を実行します。

従来のテーブル レイアウトでは、さまざまなサイズのテーブルとテーブルのネストを使用して、Web ページのコンテンツを配置およびレイアウトします。CSS レイアウトに切り替えた後、Web ページは、CSS で定義されたさまざまなサイズのボックスとネストされたボックスによって配置されます。この方法はコードが簡単で、更新や変更が簡単で、たとえば、PDA デバイスでも通常どおりに閲覧できるなど、その利点は他にもあります。

要素のフローティングを制御する方法については、次の例を参照してください: まず第一に、最初にフローティング クラス セレクターを定義します

次に、単純なフローティング アプリケーションを見てみましょう:

ポジショニング 🎜 🎜 CSS での配置は、相対配置と絶対配置に分けられます。 🎜 🎜 相対配置とは、この要素を開始点に対して相対的に移動することです。また、上記の例の unfumed コードの配置テストでは、次のように要素 2 の相対配置があります: 🎜 🎜 🎜 🎜🎜 🎜 絶対配置は、要素の位置を標準フローと無関係にすることです。文書の中に収まるので、スペースを占有しません。絶対配置要素は、最も近い配置の祖先を基準として配置されるか、要素に配置された祖先がない場合は、元の包含要素を基準に配置されます。 🎜 🎜 同様に、絶対配置がどのようなものかを示すために上記の例を改良します。 🎜 🎜 🎜 就 上記は CSS の主要な内容であると思われるかもしれませんが、いくつかの属性を設定するだけです。はい、確かに非常にシンプルですが、良いデザインを作成したい場合は、多くの実践経験を積んで、適切な CSS レイアウトを作成できるようにする必要があります。 🎜 🎜