Boolean Education_Yan Shiba_HTML ビデオ リソース コースウェア

「Boolean Education_Yan Shiba_HTML チュートリアル」では、最も基本的な概念から始まり、段階的に深くなり、HTML と CSS スタイルの基礎知識を学び、よく使用されるさまざまなタグの意味と基本的な使い方を理解します。 CSS スタイル コードは、後続のケース レッスンの基礎を築くために追加されます。

コース再生アドレス: http://www.php.cn/course/222.html

先生の教え方:

先生の講義はシンプルで奥深く、わかりやすいです論理的思考力を使用して生徒の注意を引き、理性を使用して教室での指導プロセスを制御することで、層ごとに連動し、厳密な議論と厳密な構造を組織化して分析します。先生の講義を聞くことで、学生は知識を学ぶだけでなく、思考力の訓練も受け、先生の厳格な学習態度に影響を受け、影響を受けます

このビデオのさらに難しい点は、オーバーフロー処理です:

という疑問が生じます:
最も単純なケースは、小さな固定幅の p 要素 (ナビゲーション、参照など) を他の要素コンテンツと一緒に大きな p に含めることです。たとえば、次のコード:

<p id="outer">     
  <p id="inner"> <h2>A Column</h2> </p>     
  <h1>Main Content</h1>     
  <p>Lorem ipsum</p>     
</p>

"#inner" に幅の値 (たとえば、20%) を設定できますが、p はブロックレベルの要素であるため、幅を設定しても、その後ろのコンテンツはfloat 属性 (左にフローティングまたは右にフローティング) を設定しない限り、次の行にのみ表示できます。そうすると、このときに上で述べたような問題が発生することになります。

「#inner」の幅と高さが両方とも「#outer」より小さければ問題ありません。

ただし、「#inner」の高さが「#outer」の高さを超えると、 の底部が「#outer」の底部を超えます。これは、「#inner」にfloat属性を設定した後、テキストの流れから外れてしまい、幅や高さがどんなに変化しても「#outer」がその変化に追従しないためです。

例1: floatをクリアしない場合のレイアウトパフォーマンス
この例では、最初は「#inner」の高さが「#outer」よりも小さいので問題ありませんが、「拡張」をクリックすると、 " #inner" の下端が "#outer" の範囲を超えていますが、"#outer" は変化していないことを確認します。これは、前述した「フロートのクリア (フロート要素のクローズ)」または「フロートのクローズ」の問題です。

解決策:
1) 追加タグの方法
最初の方法は、W3C によって推奨されている方法でもあり、追加のタグを使用することです。この方法は、コンテンツの最後に空のタグを追加する方法です。一般的な方法は、

<br style="clear:both;" />

のようなものを使用するか、HTML 要素を追加して外側のコンテナを強制的に開く方法です。ただし、この方法ではタグが追加されるため、HTML 構造の簡潔さが失われます。

こちらから資料をダウンロードすることもお勧めします:

http://www.php.cn/xiazai/learn/1857

lionhit

1. minilionhit

2. xhtml

以上がBoolean Education_Yan Shiba_HTML ビデオ リソース コースウェアの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。