CSSライン内要素、ブロックレベル要素

6043 ワード
テキストリンク

CSSライン内要素（ライン内要素）


デフォルトでは、
  • 行の要素の幅はコンテンツの終了です.
  • widthおよびheightプロパティは使用できません.
  • のダウンジャケットと柱面アトリビュートは使用できますが、余白アトリビュートは左右にしか調整できません.これらのアトリビュートの上下の値は、他の要素を伸張しません.
  • 行の要素のタイプには、a、img、span、input、selectなどが含まれる.

    CSSブロック要素（Block要素）

  • ブロック要素の両側には100%のスペースがあり、使用されていないスペースは空白の領域で満たされます.
  • widthプロパティとheightプロパティを使用してレイアウトを変更できます.
  • 個の要素のタイプには、dt、dd、ul、ol、div、h 1~6等が含まれる.

    • 実行コード

    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>인라인 블럭라인</title>
    <style>
        h1, div, a, span {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <h1>hello wodld</h1>
    <div>hello world</div>
    <br>
    <a href="">Inline element</a>
    <span>인라인 요소</span>
</body>
</html>

    独自のドキュメントを作成して検証する場合は、より分かりやすくなります.
    refバインド、class、value値、リストレンダリング、dangerouslySetInnerHTML
    GitHub - Deactivate Directory