最近、フロントエンドの学習でXiaomi Mallの公式サイトを真似してみたところ、2つの問題に遭遇しましたが、現在解決済みですので、解決した経験を共有させていただきます。
1. ネストされたブロック要素の折りたたみ
まず、Web ページのレイアウトはボックスと見なすことができることがわかっています。その後、入れ子になったボックス内で、次の図に示す状況に遭遇しました。これは、問題が発生しているブロックの左隣です
。
は問題のあるブロックです:
簡単です 問題が見つかりました: このブロックは左隣のブロックと位置合わせされていません。マージン設定に問題があると思われるので、コードを確認して、2 つのサブ-ブロック内のブロックは margin-top で設定されていますが、親ブロックに影響しますので、自分で情報を調べてください
。次の 3 つの方法が推奨されます:
1. 親要素のボーダートップを定義できます。
2. 親要素のpadding-topを定義できます。
3. 親要素に overflow:hidden を追加できます。（プロテストは効果的！そして便利）
2. ブロック要素の無効なマージンの問題
同じプロジェクトは依然として Xiaomi Mall の Web ページを模倣しています。ネストされたブロック要素の崩壊の問題を解決した直後に、ブロック要素のマージン障害の問題に遭遇しました。ここでは両方の入力タグに margin-top: 27px; を設定しましたが
、
情報とチュートリアルを検索した後、問題が見つかりました:左側
のブロックの一連のオプションは、私が作成したulテーブルであり、float:leftを使用してulを変更しましたが、そのため、隣接するブロックの外側のマージンが無効に設定されます。解決策は非常に簡単です: 隣接するブロックに装飾float:left親ブロックの下のサブブロックに追加することをお勧めします。ul 、他のサブブロックで同じ問題が発生するのを避けるため。