検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML CSS レイアウトに精通しているmodel_html/css_WEB-ITnose

HTML CSS レイアウトに精通しているmodel_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:26:55833ブラウズ

ここからがHTMLの一番難しいところです!今ブログを書く時も含めて何度も繰り返してきましたが、自分自身への復習のようなものでもあります。この辺はまだ理解できていないので、自分用にメモして少しずつ修正していきます。これからも初心者の方は見てみてください。

CSS レイアウト モデル

以下は初心者としての私の個人的な理解です。私も独学なので、石を触って渡るしかありません

私の意見では、CSSレイアウトモデルと同じコアコンセプトです。ボックス モデルですが、レイアウト モデルはボックス モデルに依存しています。より一般的に言うと、CSS レイアウト モデルは外側から見えるものではありません。本を読めば理解できることですが、多くの練習が必要です

レイアウト モデルには主に 3 つのタイプがあります:

1、フロー モデル (Flow)

2、フローティング モデル (Float)

3、Layer Model (Layer)

フローモデルは、デフォルトのWebページレイアウトモードです。デフォルト状態のWebページのHTMLページ要素は、フローモデルに従ってWebページのコンテンツを配布します。

機能：ブロック。デフォルト状態ではブロック要素の幅は 100% であるため、実際には、ブロック要素は行の形で位置を占めますが、インライン要素は行の形式で位置を占めるため、含まれている要素は上から下の順に垂直に拡張されます。包含要素内で左から右に水平に表示されます。これは、基本的に、前のブロックレベル要素とインライン要素の特性を別の要約にまとめたものと同等です。

フローティングモデル

私の理解では、フローティングモデル つまり、フローのすべてのルールに従わず、ブロックレベルの要素とインライン要素をカスタマイズされた方法で再配置します。ただし、これらはフローティングとして定義できます。 CSS スタイル シートに float 属性を追加するだけです。コード例:

div{

float:left;

}

この文は、この時点では、この

ブロックレベル要素を left float に設定することを意味します。 、このブロックレベル要素には、ブロックレベル要素の排他的な行、要素幅などの特性がなくなりました。つまり、フロートに設定された瞬間に、ブロックレベルとインラインの特性が消えます。

レイヤーモデル (これについては 1 日くらい話せます)

私にとって、レイヤー レイアウト モデルは、複数の重なった階層構造のように見えます。CSS は、レイアウト モデルをサポートする一連の位置決め属性を配置して、正確に制御できます。私はこれを完全に理解していないので、興味がある場合はBaiduにアクセスして他の人のブログを読んでください。私の個人的な理解は他の人よりもはるかに優れていません。

レイヤーモデルの 3 つの形式:

1、絶対配置 (position:absolute)

2、相対配置 (position:relative)

3、固定配置 (position:fixed)

1、絶対位置決め 以下の本では厳密な表現は使いませんが、私なりの理解でお伝えしますが、絶対位置決めとは、あるレベルの上に別のレベルを置く、つまり、1つのピースを上に置くことです。親レベルの正確な座標は絶対値を指定して、親レベルが移動しても子レベルが移動しないようにします。言い換えれば、これら 2 つの相対レベルは絶対的なものを使用します。レイアウトはロックされています。同時に、< にはさまざまなブロックの概念があります。 ;body> (

など) の場合、
は階層として理解され、この
の属性を に関連付けます。 、同じ
内に

があります。このとき、

のレベルは
に対して相対的に設定されます。

は

内で従順に動きます。 要約すると、これは絶対的な位置決めです! }

p{

位置:絶対;

}

このとき、

が

の内部タグの場合、

は

に対して相対的にロックされていますので、このときpスタイルシートを修正してpの位置を修正します。たとえば、レイアウトでボックス モデルの外側の間隔を変更し、div 内の p のレイアウトを変更し、さらに div のレイアウトを変更すると、p のレベルが div 上に残ることがわかります。このレイアウトが最も一般的に使用されるべきだと感じます。 2. 相対位置決め

相対位置決めでは、最初にこのレベルを float のような方法で浮動させ、次に元のレベルと比較してこのレベルの位置を決定します。 left、right、top、bottom プロパティを設定することによって位置を調整しますが、この最初のレベルは本質的にまだそこにあります。視覚的に見えるものはまだそこにあるため、相対的な位置は影響を受けません。他の位置要素のレイアウトは個別にフロートするため、自分で詳しく書いて練習する必要があると思います。ウィンドウ? よくわかりませんが、あえて言いません

3、固定位置

この効果は、通常、Web サイトの右下隅にあることを説明するのが簡単です。画面をスワイプすると、その位置は上にも下にも固定されず、より厳密に言えば、相対的な移動の座標に従います。 Webページウィンドウ自体の表示は固定されているため、ブラウザウィンドウの画面位置を画面上で移動したり、ブラウザの表示サイズを変更したりしない限り、ブラウザウィンドウのスクロールバーによって変更されることはありません。したがって、固定配置された要素は常にブラウザ ウィンドウ内のビューのどこかに配置され、ドキュメントの流れの影響を受けません。これは、background-attachment:fixed ;(背景画像の移動方法を定義します)と同じです。これは、相対配置と同じです。詳しくは説明しません。

これら 3 つの配置方法は、親要素、サブ要素などを組み合わせて配置できます。 -要素は相対的に配置されるなど、非常に柔軟なレイアウトが可能になります。最初に学習したときは混乱するかもしれませんが、2 回目では改善され、3 回目では基本的に理解できるようになります。原則として、何かを学習したとみなされるには、3 回学習する必要があります。

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

関連記事

続きを見る