01.CSSベース-ブロックレベル&インラインレベル

20859 ワード
CSS テキストリンク

🌈 block-level & inline-level


🔥 block-level&inline-levelとは何ですか?


🔥 属性の表示


🔥 可視性プロパティ


🔥 inline-blockプロパティ


1.block-level&inline-levelは?

  • すべてのタグはデフォルト値であり、block-level要素とin-level要素の属性
    • を有する.
  • inline level要素の各要素の内容は横にあるが、block-level要素は基本的にboxのように横に何も置くことができないため、1行の幅
    • を占める.

    1)block-levelの特性

  • は常に新しい行に次のタグを配置します:
  • スクリーン幅の
  • width、height、margin、paddingプロパティ
    • を設定できます.
  • ブロック要素にはinline要素
    • が含まれる.
  • defaul値、block-level特性を有するマーク:div/h 1~h 6/p、ol、ul、li、hr、table、form等
    • .

    2）inline levelの特性

  • 同じ回線上で他の要素に接続可能な
    • 幅
  • のコンテンツ幅
    • 属性
  • width、height、margin、paddingなどを設定できません
  • 上下の余白はline-heightとして指定できます
  • 行の特性を有するラベルにblock特性を有する要素
    • を含めることはできない.
  • defaul値、インラインレベル特性を有するラベル:span/a/strong/img/br/input/select/textarea/buttonなどの
    • を含む
    ✍🏻 html
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .spantag {
        background-color: tomato;
      }
      .divtag {
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <h2>div 태그 속에 span 태그</h2>
    <div class="spantag">
      이것 부분은 div 태그로 묶인 한 문장입니다.
      <span>"이 부분은만 span 태그로 감싸져 있습니다."</span> span은 inline-block 요소이기 때문에 줄 바꿈이 되지
      않습니다.
    </div>
    <h2>span 태그 속에 div 태그</h2>
    <span class="divtag">
      이것 부분은 span 태그로 묶인 문장입니다.
      <div>"이 부분만 div태그로 감싸져 있습니다."</div>
      div는 block-level 요소이기 때문에 모든 영역을 차지하여 줄바꿈이 됩니다.
    </span>
  </body>
</html>

    2.属性の表示

  • 🔍 セレクタ{display:block}:blockプロパティを持つ要素として指定された
  • 🔍 セレクタ{display:inline}:inlineプロパティを持つ要素として指定された
  • 🔍 selector{display:inline-block}:inline-blockプロパティを持つ要素として指定された
  • 🔍 セレクタ{display:none}:要素は画面に表示されず、要素が占める領域(空間)も
    • に消えます.

    3.可視性プロパティ

  • 🔍 セレクタ{可視性:可視}:画面に表示(デフォルト)
  • 🔍 セレクタ{可視性:非表示}:要素は画面に表示されませんが、
    • のスペースは保持されます.
  • 🔍 セレクタ{可視性:クラッシュ}:テーブル要素の行、列
    • は表示されません.
    ✍🏻 html
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        display: flex;
      }
      div {
        width: 300px;
      }
      span {
        background-color: tomato;
      }
      strong {
        background-color: aquamarine;
      }
      .display_none {
        display: none;
      }
      .visibility_hidden {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div>
      <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt facere iusto provident corporis? Nulla, exrerum voluptatem fuga rem saepe, quis, voluptatibus nihil consequuntur tempore repellat accusantium ab? Totam,tempora.</span>
      <strong>Can you see me? Can you see me? Can you see me? Can you see me?</strong>
      <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt facere iusto provident corporis? Nulla, exrerum voluptatem fuga rem saepe, quis, voluptatibus nihil consequuntur tempore repellat accusantium ab? Totam,tempora.</span>
    </div>
    <div>
      <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt facere iusto provident corporis? Nulla, exrerum voluptatem fuga rem saepe, quis, voluptatibus nihil consequuntur tempore repellat accusantium ab? Totam,tempora.</span>
      <strong class="display_none">Can you see me? Can you see me? Can you see me? Can you see me?</strong>
      <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt facere iusto provident corporis? Nulla, exrerum voluptatem fuga rem saepe, quis, voluptatibus nihil consequuntur tempore repellat accusantium ab? Totam,tempora.</span>
    </div>
    <div>
      <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt facere iusto provident corporis? Nulla, exrerum voluptatem fuga rem saepe, quis, voluptatibus nihil consequuntur tempore repellat accusantium ab? Totam,tempora.</span>
      <strong class="visibility_hidden">Can you see me? Can you see me? Can you see me? Can you see me?</strong>
      <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt facere iusto provident corporis? Nulla, exrerum voluptatem fuga rem saepe, quis, voluptatibus nihil consequuntur tempore repellat accusantium ab? Totam,tempora.</span>
    </div>
  </body>
</html>

    4.inline block特性

  • block-level要素に属性値「display:inline」を指定し、in-level要素のように横で連続的に使用できますが、コンテンツが含まれていない場合は
    • は画面に表示されません.
  • の場合、解決策は「display:inline-block」ではなく「display:inline-inline」であり、inlineとblockの属性
    • を同時に持つことができる.
  • しかし、このようにブロックレベルの要素を横に置くと、開発者ツールは数値的に見えない要素の間に空白が生じるため、手動でこれらの要素をソートする必要があります.
  • およびこれらの要素(ブロックレベル要素)が画面上でサイズ順に並べ替える問題は、これらの要素が
    • を制御することを困難にする.
  • これらの予期せぬ結果を解決するために現れる概念はdisplayである:“flex”属性
    • ✍🏻 html
    <!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      margin: 20px;
    }
    div {
      display: inline-block;
      width: 300px;
      height: 300px;
      background-color: teal;
      margin-right: 10.01;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>
    metabaseコンパイルエラー
    Openfire eclipseでコンソール表示ログを開く