表示: なしと可視性: 非表示の違いは何ですか?
隐藏和显示最も一般的に使用される要素は、 display:none と Visibility:hidden です。
dispaly:noneこのプロパティを設定すると、この要素の下の要素が非表示になり、占有されたスペースが消えます。
visibility:hiddenこの要素を設定した後、要素は非表示になりますが、スペースを占有したままになります。
相違点:
1.visibility は継承され、その子要素もこのプロパティを継承します。visibility:visible が設定されている場合、子要素は
表示されます
。2.visibility はカウンタの計算に影響しません。カウンタは非表示ですが、カウンタは引き続き表示されます。は実行を続けます。
3. CSS3 トランジションでは可視性属性がサポートされていますが、表示はサポートされていません。
トランジションの実行が遅れる可能性があるため、可視性のある純粋な CSS を使用してホバー遅延表示効果を実現すると、
ユーザー エクスペリエンスが向上し
ます。 4.display:none ではリフロー (再配置) が発生します。可視性を再描画:非表示にすると再描画が発生します
位置の値は何ですか?その機能は何ですか?
静的配置:静的のデフォルト値はドキュメント フローを離れません。上、右、下、左、その他の属性は有効になりません。
位置が
見つからない場合は、ブラウザ ウィンドウを基準にして配置します
。 注: 位置を設定した後、次の操作を行います。絶対; 属性の場合、要素は通常のドキュメント フローから切り離され、スペースを占有しなくなります。
左右のマージンは自動の場合は無効になります。左、上、下、右の位置を決定するために使用されます。要素
。相対位置: 相対
参照オブジェクト: 要素がオフセットされる前の位置。
注: 相対位置が設定されている場合、左右のマージンは自動に設定されている場合でも有効であり、ドキュメント フローから切り離されることはありません。 。
固定位置: 固定
参照オブジェクト: ブラウザ ウィンドウ;
注: 固定位置はドキュメント フローから切り離されます。
絶対位置と固定位置参照オブジェクトの両方がブラウザ ウィンドウである場合の違い: スクロール バーが表示されると、固定位置要素は
追従しません。スクロール バーがスクロールします。絶対位置はスクロール バーに従います。
マージンの「崩壊」を解決するには？
マージン崩壊には 2 つのケースがあります。
1 つ目のケース: 同じレベルの 2 つの要素が垂直に配置され、上のボックスが margin-bottom に、下のボックスが margin-top に与えられ、それらの間のスペースが重なり合います
。そして大きい方が計算します。
解决这种情况 的方法为：两个外边距不同时出现
2 番目のケース: 親要素と子要素が 2 つあり、内側のボックスを margin-top に与え、その親にも影響が及び、同時に上部のマージンが生成され、親要素と子要素が接着されます。
解决方案：
1. 親ボックスの枠線を設定します。枠線を追加すると、親ボックスと子ボックスは本当の意味で合わなくなります（透明に設定できます：
枠線：1px 実線透明）;
2. 枠線のオーバーフロー：非表示を追加します。親ボックス;
3. 親ボックスの境界線を設定 パディング値を設定;
4. 位置を追加: 親ボックスに固定;
5. 表示: テーブルを親ボックスに追加;
6. 疑似要素を使用して空の要素を追加親要素の前