Html/CSS (初心者向けパート 3)

1. 学習体験 --- 優れた Web ページを参照して学習します。

1当社だけが作成する静的 Web ページに使用されている主なテクノロジーは何ですか? html+cssはインターネット上で見ることができる限り、ソースコードは公開されています。
【1】まずページがどのようにレイアウト（構造化）されているかを分析し、
【2】を実行してみてください。---そのプロセスを真似してください。
[3] 最後に、私たち自身がイノベーションを試すことができます—マスターにつながるプロセス。

CSS ウィザードのスキル、Web ページの http リクエストの数を最適化し、Web ページの効率を向上させます。
*****css スプライトの中心となるアイデアは、複数の画像を 1 つの画像に結合し、背景属性の位置決めによって画像のどの部分を表示するかを制御することです。
*****Web ページ上で画像が選択できる場合は、挿入された画像である必要があります。選択できない場合は、背景画像です
[フォント アイコンは、従来の小さなアイコン (今後の動向）】

2. CSS レイアウト方法:
1. デフォルトはドキュメント フローの順序です。 htmlの構造順序によると。
2. フローティング方式
3.

3. フローティング

フローティングは、ブロック要素の横暴な属性と行を占有する動作をキャンセルし、他の要素が同じ行に参加できるようにします。
フローティングとは、実際には、このブロックが元のドキュメント フロー モードから分離され、その背後にあるオブジェクトが存在しないかのように扱われることを意味します。
1 行の並列など、一般的に使用されるレイアウト効果は、複数のブロック要素を 1 行に表示します。

CSS は、Web ページ要素を 2 つのカテゴリに分類します。1 つはブロック要素、もう 1 つはインライン要素です。

body、div、p、h1、ul、li はデフォルトでブロック要素です。それらを 1 行で表示したい場合は、float を使用する必要があります。

制作中は、さまざまなブラウザの違いを知るために、さまざまなブラウザを使用して結果を表示してください。

***** は、IE6 の親要素内の子要素の高さが親要素の高さを超えると、IE6 はデフォルトで自動的に親要素の高さを増やすと結論付けました。
****複数のブロックを同じ行に表示したい場合は、これらのブロックをフローティングおよび同じ方向にフロートするように設定できます。
****フロート フロート、最初に浮いてから移動します。浮遊オブジェクトは最初に浮いて、元の位置から離れます。最後の動きはその後ろのオブジェクトです。元の位置に戻ります。

4. フロートのクリア: 前のオブジェクトのフロートが次のオブジェクトに及ぼす影響を除去できます。

ブラウザウィンドウのサイズの変更により、元々1行にあった2つのブロックが元の位置を変更するのはなぜですか。 (ボックスを追加して囲むこともできます)
*****ブロックを水平方向に中央揃えに設定する場合、ブロックの幅の値が設定されます。
****親要素に高さが指定されておらず、その子要素がフローティングの場合、親要素の高さは自動的に増加しません。
1. 最初の方法: コンテンツのない空のタグを追加します。コードが追加されます。
2. 2 番目のメソッド: overflow: hidden を親要素に追加します。
3. メソッドの後に疑似オブジェクトを使用します。
インターネット上で最も人気のあるクリア フローティング コード:
.clearFix:after{
clear:both;
display:block;
Visibility:hidden;
height:0;
line-height:0;
content:”。 ;
}
****配置レイアウトとは、要素の位置属性を介して要素の位置を制御できることを意味します。
****絶対レイアウトを使用したい場合は、2 つの条件
[1] を追加する必要があります。通常は、position: 相対位置指定を使用することをお勧めします。属性を子要素に追加します。同時に、方向属性を追加します。

****相対位置決めと絶対位置決め。

絶対配置とは、親要素が参照点として配置される場合です。ドキュメント フローから切り離されます。 (ドキュメントフローを離れた後、子要素は親要素の幅を継承しないことに注意してください)

相対位置決めは、それ自体を参照点として基づいて行われ、位置決め --- 元の位置を残しますが、依然として元のスペースを占有します。