Boolean Education_Yan Shiba_HTML ビデオリソースコースウェア-htmlチュートリアル-php.cn

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

黄舟

リリース： 2017-12-04 11:27:00

オリジナル

4675 人が閲覧しました

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

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

コース再生アドレス: 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 によって推奨されている方法でもあり、追加のタグを使用することです。この方法は、コンテンツの最後に空のタグを追加する方法です。一般的な方法は、