ダークホースプログラマーのピンク氏のチュートリアルを参考に、フロントエンドのCSSノートを少し学んでください。
1.インライン要素
1. 1行で複数表示可能
2. デフォルトではコンテンツによって幅と高さが拡張されます
3.幅と高さは設定できません
代表タグ：a、span、b、ui、s、strong、ins、em、del
2.インラインブロック要素
1. 1行で複数表示可能
2.幅と高さを設定できます
代表レーベル：
入力、テキストエリア (テキスト ボックス)、ボタン、選択
3. 要素表示モードの変換
表示:ブロック レベル要素に変換されたブロック
display:inline-block はインライン要素を変換します
display:inline はインライン要素に変換されます
4. ボックスモデル
パディング内マージン
マージンマージン
フレーム
実線
境界線のスタイル: 無地;
破線 点線
上の枠が赤、残りが青です コードを上から下に実行すると、次のように記述されます。
境界線: 2px 単色の青; border-top: 2px 単色の赤。
パディング パディングもボックスのサイズに影響します。体重と身長を直接引くだけ
ボックスを水平方向に中央揃えにします
マージン崩壊
製品モジュールケースは、画像が完全に表示されることを保証します
.box img {
幅: 100%;
5: 丸みを帯びた境界線
1. 正方形が円に設定されます
border-radius: 100px; 円
または
border-radius: 50% になります;
2. 長方形が丸くなり、角丸長方形が
高さ
の半分に設定されますwidth: 200px;
高さ: 400px;
border -radius: 200px;
3.border-radius 長方形の左上隅から時計回りに border-radius を設定します
: 200px 100px 20px 30px
6. ボックス シャドウ/テキスト シャドウ
ボックスの影: 10px 10px 10px 10px 黒;
テキストの影
セブン、フローティング
ページレイアウト
1. 標準ストリーム
2.フローティング
3.ポジショニング
垂直は標準的な流れです
横位置合わせ用フロート
役割: 複数のブロックレベル要素を一列に並べることができるようにする
未公認
フローティングノート
クリアフロート
CSSの書き順（重要）
位置
ポジショニング = ポジショニング モード + エッジ オフセット
スプライト マップ
フォント アイコン
マウススタイル
