CSS コア技術の概要_html/css_WEB-ITnose

Brisket ニュース リリース システムのフロントエンド開発中に、私は初めて Web デザイン用の CSS+div のテクノロジーに触れました。全体として、これは Web デザインの最も基本的な部分ですが、最も一般的に使用される部分でもあるため、この分野で十分な基礎を築いた後は、将来 JS や JQ などを学習するのに役立ちます。そして始めやすくなるでしょう。

CSS の中核となるコンテンツ: 標準フロー、ボックス モデル、フローティング、位置決め。

標準フロー: コード内の要素の順序は、フローティングまたはその他の手段を使用して順序を設定する場合の標準的なフローです。要素の数が標準フローから外れています。ここでは、ブロックレベル要素と行レベル要素という 2 つの用語について説明します。

ブロック レベルの要素: 各ブロック レベルの要素は 1 行を占めます。通常、ブロック レベルの要素の行の後に他の要素を追加することはできません。ブロック レベルの要素は通常、自動的に折り返すことができます。コンテナとして表示され、行レベルの要素を含めることができます。最も一般的なのは div です。

行レベルの要素: インライン要素とも呼ばれ、通常はセマンティック レベルの要素に基づいており、テキストまたはその他のインライン要素のみを収容できます。たとえば、span は行レベルの要素です。

ボックス モデル: ボックス モデルは CSS のコア コンテンツです。結局のところ、他の 3 つのレイアウトも Web ページの基本要素に基づいており、ボックス モデルのコンテンツを理解することが役立ちます。ボックスモデル Web ページ内の操作要素を表現します。

このボックス モデルから、Web ページでは要素間に距離があることがわかります。この距離はマージンと呼ばれ、上から下までの 4 方向のマージンを使用できます。各要素間の間隔と位置を設定して、植字を実現します。

ボックスの境界線は境界線であり、上、下、左、右の 4 つの辺もあり、目的を達成するために境界線の色、スタイル、太さ、その他の属性を設定できます。

ボックス内のコンテンツはボックスのコアブロックであり、表示する必要があるメインコンテンツが配置されます。コンテンツ ブロックとボックスの境界線の間には、パディングと呼ばれる距離もあります。ボックス内のコンテンツの位置を設定するために使用できる、上、下、左、右の 4 つの辺もあります。私たちのレイアウトを実現します。

Float: float 属性は、要素が浮動する方向を定義します。これまで、この属性は常に画像に適用され、テキストが画像を囲んでいました。しかし、CSS では、どの要素も浮動することができます。フロート要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。

非置換要素を浮動させる場合は、明示的な幅を指定します。それ以外の場合は、可能な限り狭くなります。行上に浮動要素用のスペースがほとんどない場合、要素は次の行にジャンプし、このプロセスは行に十分なスペースができるまで継続します。

フロート モデルとボックス モデルを組み合わせることで、Web ページ要素の移動とデザインを実現できます。一部の特殊な組版要件では、フロートが必要な移動手段です。

位置決め: 相対位置決め、絶対位置決め、固定位置決めに分けられます。

相対配置: 要素は、移動されたかどうかに関係なく、元の位置を基準にして配置されます。その上、下、左、右の境界距離を設定します。他のボックスを覆う場合があります。ここで注意すべき点は、以下に示すように、Web ページの左上隅が原点であり、右が正、下が正であることです。

は通常の座標ではないため、設定するときは注意が必要です。要素の位置を少し。

絶対位置決め: 上記の座標を理解すると、座標の原点を基準点として使用して座標を設定および配置する絶対位置決めを理解できるようになります。

別のタイプの配置は、Web を閲覧しているときに、スクロール バーをドラッグして下に移動すると、煩わしい広告がスクロール バーと一緒に下に移動することがあります。元の位置のままです。これが固定位置です。下の図の赤い封筒は位置が固定されています。右側のスクロール バーを見てください。赤い封筒はまだ元の位置にあります。

実は、浮き浮きも特殊な配置であり、自分自身の理解が必要です。

これらの内容の学習を通じて、今後の仕事や学習において重要な役割を果たすCSSの核となる使い方をほぼマスターしました。

著作権声明: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。