TIL03. 属性の表示

3735 ワード
CSS WeCode html テキストリンク

属性の表示


Displayプロパティで最もよく使用される行内、行内ブロック、およびブロックについて説明します.

1. Block


Blockシェイプアトリビュートを持つTagは、常に新しい行から始まり、その行のすべての幅を占有するBlockシェイプを有する.幅と高さ、余白、塗りつぶし値を指定することもできます.
  • は、他のHTMLタグを組み合わせたり、CSSスタイルを同時に適用したりするために使用されます.

    • 2. Inline


    行の形式プロパティを持つタグは、新しい行から始まりません.行の幅はコンテンツと同じになります.widthとheightの値を指定できません.marging-topとmarging-bottomは適用されません.
    CSSスタイルを強調表示または適用する場合、
  • がよく使用されます.

    • 3. Inline-Block


    BlockとInlineの特徴を持つ要素.幅、高さ(Blockなど)の値、または値が指定されていない場合、行の幅は行内で使用されるコンテンツ単位です.また、直線のように新しい行から始まることはありません.

    ex) block, Inline, Inline-block



    html
        <script src="index.js"></script>
    <div class="block">block</div>
    <div class="block2">block2</div>
    <div class="inline">inline</div>
    <div class="inline-block">inline-block</div>
    css
    .block, .block2, .inline, .inline-block{
  border: 1px solid black;
}

.block{
  display: block;
}

.block2{
  display: block;
  width: 100px;
  height: 50px;
}

.inline{
  display: inline;
}

.inline-block{
  display: inline-block;
  width: 100px;
  height: 50px;
}
    白駿2960エラ菌体
    C#教科書を身につける.クラスを継承に拡張