HTML と CSS における重要かつ困難な問題

この記事では主に HTML と CSS の重要な問題と難しい問題について説明します。お役に立てれば幸いです。

1. Flex
を使用して、幅と高さを可変にして中央に配置する方法は次のとおりです。 ;

CSS3 変換を使用します

親ボックスの設定: 表示:相対

p 設定: 変換: 変換(-50%、-50%);位置: 絶対;上: 50%;左: 50%; - セルメソッド

親ボックスの設定：display:table-cell; text-align:center;vertical-align:middle;

p 設定：display:inline-block;vertical-align:middle;

2.position いくつかの属性

位置の 4 つの一般的な属性値: 相対、絶対、固定、静的。通常、「left」、「top」、「right」、「bottom」属性と組み合わせて使用​​されます。
静的:デフォルトの場所。

通常の状況では、特に宣言する必要はありませんが、継承が発生した場合、要素によって継承された属性がそれ自体に影響を与えるのを見たくない場合があるため、Position:static を使用して継承をキャンセルできます。つまり、デフォルト値の位置にある要素を復元します。静的に設定された要素は、常にページ フローによって指定された位置に配置されます (静的要素は、上、下、左、または右の宣言を無視します)。一般的にはあまり使われない。

relative: 相対的な位置決め。

相対位置は、他の要素に何が起こるかに関係なく、要素の上、右、下、左のオフセット値はすべて元の位置に基づいてオフセットされます。相対的に移動された要素は、依然として元の位置のスペースを占有していることに注意してください。 absolute: 絶対的な位置決め。
絶対に設定された要素。その親コン​​テナに位置属性が設定されており、位置属性値が絶対または相対である場合、親コンテナに従ってオフセットされます。親コンテナが位置プロパティを設定していない場合、オフセットは本体に基づきます。絶対属性が設定された要素は、標準フロー内の位置を占めないことに注意してください。 fixed: 位置を修正しました。
位置が固定に設定されている要素は、ブラウザウィンドウを基準にして指定された座標に配置できます。要素は、ウィンドウがスクロールされているかどうかに関係なく、その位置に留まります。それは常に身体に基づいています。 固定属性が設定された要素は、標準フロー内の位置を占めないことに注意してください。 3. float のフローティングとクリア
3.1 フローティング関連の知識
float 属性の値:

left: 要素は左にフローティングします。

right: 要素は右にフロートします。

none: デフォルト値。要素はフロート表示されず、テキスト内のどこにでも表示されます。

フローティングの特徴:

フローティング要素は通常のドキュメントフローから分離されますが、フローティング要素はそれ自体に影響を与えるだけでなく、周囲の要素の配置や周囲の要素にも影響を与えます。
要素がインライン要素であってもブロックレベル要素であっても、float に設定すると、floating 要素はブロックレベルのボックスを生成し、その幅と高さを設定できるため、float がよく使用されます。横に並べたメニューを作成し、サイズを設定して横に並べることができます。
フローティング要素の表示には、状況に応じて異なるルールが適用されます。

フローティング要素がフローティングである場合、そのマージンは、それを含むブロックのパディングを超えません。 PS: 要素を超えたい場合は、margin 属性を設定できます。2 つの要素が左側にフロートし、1 つが右側にある場合、左側のフローティング要素の marginRight は、右側のフローティング要素の marginLeft に隣接しません。

フローティング要素が複数ある場合、フローティング要素は重ならないように順番に配置されます。
複数のフローティング要素がある場合、次の要素の高さは前の要素を超えず、含まれるブロックを超えることはありません。
非浮動要素と浮動要素が同時に存在し、非浮動要素が前にある場合、浮動要素が非浮動要素よりも高くなることはありません

浮動要素は上に揃えられます。

オーバーラップ問題

インライン要素がフローティング要素に重なる場合、その境界線、背景、コンテンツがフローティング要素の上に表示されます
ブロックレベルの要素がフローティング要素に重なる場合、境界線と背景がフローティング要素の上に表示されますはフローティング要素の下に表示され、コンテンツはフローティング要素の上に表示されます。
clear 属性
clear 属性の上: 現在の要素の左側と右側にフローティング要素がないことを確認します。 clear は要素自体のレイアウトにのみ影響します。
値: left、right、both

3.2 親要素の高さの崩壊の問題

なぜフロートと親要素の高さの崩壊をクリアする必要があるのでしょうか?
親要素の高さの崩壊の問題を解決します: ブロックレベルの要素がそうでない場合高さを設定すると、その高さは子要素 Spread open によって決まります。子要素で float を使用すると、子要素は標準のドキュメント フローから外れます。つまり、親要素には高さを拡張するコンテンツがないため、親要素の高さは無視されます。いわゆる高さ崩れです。

3.3 floatをクリアする方法

方法1:親pの高さを定義する

原理:親pに固定の高さ(高さ)を定義することで、親pが高さを取得できない問題を解決できます。
長所: コードが簡潔です。

短所: 高さが固定されているため、固定内容のモジュールに適しています。 (お勧めしません)

方法 2:

(.clear{clear:both}) などの空の要素を使用します。
原則: 空の p タグのペアを追加し、CSS の clear:both 属性を使用して float をクリアします。親 p はそれを高く取得できます。
長所: 優れたブラウザサポート
短所: 空の p タグがたくさんある ページ上に多数のフローティング モジュールがある場合、空の p タグが多くなり、あまり満足のいくものではありません。 (非推奨)

方法 3: 親 p も浮動させる
これにより、現在の浮動問題を最初に解決できます。ただし、親もフローティングになるため、新たなフローティングの問題が発生します。 使用はお勧めしません

方法 4: display:table で親 p を定義する
原則: p 属性をテーブルに強制する
利点: 不可解
欠点: 新しい未知の問題が発生します。 (非推奨)

方法 5: 親要素のオーバーフロー設定: hidden、auto;
原則: このメソッドの鍵は、BFC をトリガーすることです。 IE6 では、hasLayout (zoom: 1) もトリガーする必要があります
利点: コードの導入、構造的および意味論的な問題がない
欠点: オーバーフローする必要がある要素を表示できない (非推奨)

方法 6: 親 p 定義 疑似クラス: 後とズーム

.clearfix:after{
内容:'.'; 表示:ブロック
身長:0; クリア:両方
Visibility: hidden;
}
.clearfix {zoom:1;}
原則: IE8 以降および非 IE ブラウザのみサポート:after 原則は方法 2 と似ています。zoom (IE 転送には属性があります) を解決できます。 ie6 と ie7 の浮動問題 質問
長所: 構造とセマンティクスは完全に正しく、コード量は適度で、再利用可能です (パブリック クラスを定義することをお勧めします)
短所: コードはあまり簡潔ではありません (非常に複雑です)推奨)

優れたライティングを目指して努力します

.clearfix: after {

内容:「200B」 表示:ブロック

身長:0; クリア:両方
}
.clearfix { *zoom:1; } IE6 に注意してください。IE7 は問題ありません
フローティングに関する詳細な知識については、次の記事を参照してください:
http://luopq.com/2015/11/08/C…


4. BFC 関連の知識

定義: BFC (ブロック フォーマット コンテキスト) は文字通りです。 「ブロックレベルの書式設定コンテキスト」として翻訳されます。これは、ブロック レベル ボックスのみが参加する独立したレンダリング領域であり、内部のブロック レベル ボックスのレイアウト方法を指定し、この領域の外側とは何の関係もありません。 BFC レイアウト ルール

BFC はページ上で分離された独立したコンテナーであり、コンテナー内のサブ要素は外部の要素に影響を与えません。およびその逆。

BFC要素の垂直マージンはマージンによって決定され、最大値を取ると、

BFCの領域はフローティングボックスと重なりません（フローティング原理をクリアします）。
BFC の高さを計算するとき、浮動要素も計算に参加します。

どの要素が BFC を生成するか

ルート要素
float 属性は none ではない
位置は絶対または固定である

表示は inline-block、table-cell、table-caption、flex、inline-flex である

オーバーフローは表示されない

5 .box-sizingとは


CSSのボックスモデルを標準モデルまたはIEモデルに設定します。標準モデルの幅にはコンテンツのみが含まれ、2 番目の IE モデルにはボーダーとパディングが含まれます。box-sizing 属性は 3 つの値のいずれかになります: content-box、デフォルト値。コンテンツの幅のみが計算されます。 、およびボーダーとパディングは幅に計算されません

padding-box、パディングは幅に計算されます

border-box、ボーダーとパディングは幅に計算されます

px、em、remの差。

px ピクセル (ピクセル)。絶対単位。ピクセル px は、モニタ画面の解像度に関連しており、コンピュータ システムの仮想的な長さの単位であり、物理的な長さに変換する場合は、精度 DPI を指定する必要があります。
em は、現在のオブジェクト内のテキストのフォント サイズに対する相対的な長さの単位です。インライン テキストの現在のフォント サイズが手動で設定されていない場合は、ブラウザのデフォルトのフォント サイズを基準とします。親要素のフォントサイズを継承するため、固定値ではありません。 rem は、CSS3 の新しい相対単位 (ルート em) です。 rem を使用して要素のフォント サイズを設定する場合も相対サイズですが、HTML ルート要素に対してのみ相対的です。

7. CSSの導入方法は何ですか?

インライン(要素のスタイル属性)、外部リンク(リンク)の違いは何ですか? )、インポート (@import)

link と @import の違い: link は CSS の読み込みに加えて、RSS などの他のトランザクションも定義できます。 CSSを読み込みます。

リンクが CSS を参照する場合、ページのロードと同時にロードされます。@import では、ページが完全にロードされた後にロードする必要があります。

link は XHTML タグであり、互換性の問題はありません。@import は CSS2.1 で提案されたものであり、以前のバージョンのブラウザではサポートされていません。
link は、JavaScript を使用して DOM を制御してスタイルを変更することをサポートしていますが、@import はサポートしていません。

8. 流動的なレイアウトとレスポンシブなレイアウトの違い

フロー レイアウト
非固定ピクセルを使用して Web コンテンツを定義します。つまり、ボックスの幅がパーセンテージに設定され、
画面の幅に応じて拡大縮小されます。内容は両面に埋め込まれています。

レスポンシブ開発
CSS3のメディアクエリを使用して、画面の幅をクエリすることで、特定の幅の範囲のWebページのレイアウトを指定します。

超小型画面 (モバイルデバイス) 768px 以下
小型画面デバイス 768px-992px
中画面 992px-1200px
ワイドスクリーンデバイス 1200px 以上
レスポンシブ開発はより煩雑なため、一般的にサードパーティのレスポンシブフレームワークが使用されますブートストラップなど、作業の一部を完了するために使用されます。もちろん、独自のレスポンシブ スタイルを作成することもできます。

違い

• フローレイアウト レスポンシブ開発
  開発方法 モバイルWeb開発 + PC開発 レスポンシブ開発
  適用シナリオ 一般に、すでにPC Webサイトがある場合、モバイル版を開発する場合は、モバイル版を別途開発するだけで済みます。一部の新しいプロジェクトでは、Web サイトがモバイル端末に対応する必要があるため、一連のページはさまざまな端末に対応しています。
  開発はさまざまな端末に対応していますが、効率は低いです。モバイルデバイスに適応しており、パッドでのエクスペリエンスは比較的悪いです さまざまな端末に適応できます
  効率 コードはシンプルで読み込みが速いです コードは比較的複雑で読み込みに時間がかかります
  
  9.

主な違いは、重点を置くコンテンツと、この違いがもたらす結果です。 ワークフローの違い

グレースフル デグラデーションの観点では、Web サイトは最も高度で完全なブラウザー向けに設計されるべきだと考えています。

プログレッシブ拡張の観点では、下位バージョンを優先し、コンテンツ自体に焦点を当てる必要があると考えています。
10. CSS 非表示要素のいくつかの方法と違い

display:none

要素はページ上で完全に消え、その要素が元々占めていたスペースは他の要素によって占められます。つまり、ブラウザーは配置を変えて再塗装します。

クリック イベントはトリガーされません
visibility:hidden

display:none の違いは、要素がページから消えた後も、その要素が占有するスペースは保持されるため、ブラウザーは再描画を行うだけで、再描画は行われません。リフロー。

クリック イベントはトリガーできません
要素が非表示になった後にページ レイアウトが変更されることが予想されないシナリオに適しています
opacity:0

要素の透明度を 0 に設定した後、ユーザーの目には、要素も非表示になります。これは要素を非表示にする方法とみなされます。

と Visibility:hidden の共通点の 1 つは、要素が非表示になった後もスペースを占有することですが、透明度を 0 に設定した後は要素が非表示になるだけで、ページ上にまだ存在することは誰もが知っています。
クリックイベントをトリガーできます
高さや幅などのボックスモデルの属性を0に設定します

簡単に言うと、要素のマージン、ボーダー、パディング、高さと幅、および要素ボックスモデルに影響を与えるその他の属性を設定することを意味します要素またはコンテンツに子要素がある場合は、その子要素を非表示にするためにその overflow:hidden も設定する必要があります。これは一種のトリックです。

要素の border、padding、その他の属性が 0 以外に設定されている場合、明らかに、要素は引き続きページ上に表示され、要素のクリック イベントのトリガーに問題はありません。すべての属性が 0 に設定されている場合、この要素が消えることは明らかです。つまり、クリック イベントをトリガーできません。
この方法は実用的ではなく、いくつかの問題がある可能性があります。ただし、私たちが通常使用する一部のページ効果は、要素の overflow:hidden を設定し、タイマー margin- を通じて要素の高さと margin-top を継続的に設定する jquery の slideUp アニメーションなど、この方法で完成する場合があります。 bottom、border-top、border-bottom、padding-top、padding-bottom は 0 なので、slideUp 効果が得られます。
その他のクリエイティブな方法

要素の位置と左、上、下、右などを設定し、要素を画面の外に移動します。

要素の位置と Z インデックスを設定し、Z インデックスを小さく設定します。可能な限り負の数。

以上がHTML と CSS における重要かつ困難な問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。