CSSボックスモデル
CSSボックスモデルは、境界線、マージン、パディング、および実際のコンテンツで構成されています
（1）ボーダーボーダー
border：1px solid black; //最初のパラメーター1pxは境界線の太さを示し、2番目のパラメーターsolidは境界線のスタイルを示します：実線
3番目のパラメーターは、境界線の色を参照します
border：1px破線の黒; //破線
ボーダー：1px点線の黒; //点線
（2）マージン（マージンは要素の境界と隣接する要素の間の距離を指します）
外側のマージンの重要な役割は、ブロックレベルのボックスを中央で水平に揃えることです。要件：1.ブロックレベルのボックスで幅を指定する必要があります。2。ボックスの左マージンと右マージンはautoに設定されています。最も一般的な方法：margin：0 auto;上と下のマージンは0に設定され、左と右のマージンはautoに設定されます
よくある問題として、ブロックレベルのボックスBがブロックレベルのボックスAにある場合、マージンを設定してブロックレベルのボックスBを下に移動することはできません。この問題を解決するには、境界線（またはボーダートップ）。
（3）内部パディング
まず、ボーダーのボーダーに幅があることを確認してください。幅100px、高さ100pxのdivボックスを設定する場合、幅1pxのボーダーを追加すると、実際の幅と高さは101pxになります。マージンは、要素の境界線と他の要素との間の距離です。マージンをどのように調整しても、要素自体の幅と高さは変わりません。パディングは、ボックス内のコンテンツとボックスの境界の間の距離を指し、パディングはボックスを開きます！！！
padding：5px; //上、下、左、右の内側のマージンは5pxです
padding：5px 10px 15px 30px; //最初のパラメーターは5pxの上のパディング、2番目のパラメーターは右のパディング、3番目のパラメーターは下のパディング、4番目のパラメーターは左のパディング、順序は時計回り、右上、左下
（4）内側と外側のマージンを削除する（重要）
多くのWebページ要素にはデフォルトの内側と外側のマージンがあり、異なるブラウザーのデフォルトのフォーマットにも一貫性がないため、レイアウトの前にWebページ要素の内側と外側のマージンをクリアする必要があります
* {
パディング：0;
マージン：0;
}
少し知識ポイントを追加し、liの前にある箇条書き（小さなドット）を削除します
list-style：none;
