実践で遭遇するフロントエンドの基本（HTML、CSS）

1.

div css マウスの手の形は cursor:pointer; です。

2.

HTML の相対および絶対レイアウトに関する注意: absolute は、position 属性が absolute に設定されている場合、常にブラウザウィンドウに従って配置されることを示していますが、これは実際には誤りです。

sub1 の位置が絶対値に設定されている場合、オフセットの対象は誰ですか?ここでは 2 つの状況があります。

（１）sub1の親オブジェクト（または親オブジェクトであれば曽祖父オブジェクト）も位置属性を設定し、位置属性値が絶対値または相対値、つまりデフォルト値でない場合、sub1はこの親に従って配置されます。

オブジェクトは決定されていますが、注意が必要な詳細がいくつかあります。つまり、親のどのアンカーポイントを配置に使用する必要があるかということです。親が margin、border、padding などのプロパティを設定している場合、このアンカーポイントは padding を無視し、padding の先頭 (つまり、padding の左上隅からのみ) から配置されます。これは、配置が margin の左上端から開始されることを当然と考えるという考え方とは異なります。
次の質問は、sub2 の場所はどこですか?位置が絶対値に設定されている場合、sub1 は通常のドキュメントフローをオーバーフローするため、親に属していないのと同じように、上に浮き上がります。DreamWeaver では、これは「レイヤー」と呼ばれ、実際には同じ意味です。この時点で、sub2 は sub1 の位置を取得し、そのドキュメントフローは sub1 に基づくのではなく、親から直接開始されます。

（２）sub1に位置属性を持つ親オブジェクトがない場合、bodyが配置オブジェクトとして使用され、ブラウザウィンドウに応じて配置が行われます。これは比較的理解しやすいです。

3.

CSS 透明度フィルター:alpha(opacity=0);opacity:0;-moz-opacity:0; これら 3 つの CSS を追加した場合にのみ、すべてのブラウザーと互換性があります。

4. ウィンドウの関係とフレーム

一番上のオブジェクトは常に、ブラウザウィンドウである最も高い (最も外側の) フレームを指します。これを使用して、任意のフレームに適切にアクセスします。フレームワークで記述されたコードの場合、ウィンドウオブジェクトは常に、最上位のフレームワークではなく、そのフレームワークの特定のインスタンスを指します。例えば、子フレームでは、window は自身のオブジェクトを参照します。このフレームの src と親ウィンドウの iframe または frame の src を変更する場合、window は使用できません。この場合は、window.top.$(selector) を使用してアクセスする必要があります。

<<: CSS3で蓮の花が咲くアニメーション効果を実現

>>: HTML の基本 - CSS スタイルシート、スタイル属性、フォーマット、レイアウトの詳細