CSS - 5

7661 ワード
Poiemaweb テキストリンク
210514 - 3

1.展示番組


レイアウトを定義する重要なプロファイル

1.1ブロックレベル要素

  • 常に新しい線から
  • の幅は画面サイズの100%を占めています(
    • )
  • widht、高さ、余白、塗りつぶしプロファイル
    • を指定できます.
  • ブロックレベル要素内にインラインレベル要素
    • を含めることができる.
  • ブロックレベル要素の例
    div/h1~h6/p/ol/ul/li/hr/table/form

    • 1.2インラインレベル要素

  • 新しい線からではなく、文の真ん中に入ることができます.
    • 改行せず、他の要素と同じ行に配置
    アスペクト比
  • 、アスペクト比
  • の幅、高さ、余白-上部、余白-下部プロファイルは指定できません.上、下マージンはline-height、
    • と指定されています.
  • 行のレベル要素の後ろにスペース(エンタープライズ、スペースなど)がある場合、定義されていないスペース(4 px)は
    • を自動的に指定します.
  • 行の内部レベル要素にはブロックレベル要素は含まれません.inlineレベル要素は通常、
    • を使用してブロックレベル要素に含まれる.
  • 行内レベル要素の例
    span/a/strong/img/br/input/select/textare/button

    • 1.3 inline-ブロックレベル要素


    blockとinlineレベルの要素を持つすべての特徴.inline level要素などの行で、width、height、margin propertyを指定できます.
  • デフォルトでは、インライン・レベルの要素と似ています.改行せずに他の要素と同じ行に配置できます.
  • ブロックレベル要素のようにすべてのProperty
    • を定義できます.
    アスペクト比
  • 、アスペクト比

    • 2.表示率


    要素を表示するかどうかを定義します.(要素をレンダリングするかどうか)

    3.不透明度の割合


    要素の透明度の定義0.0～1.0
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=4, initial-scale=1.0">
  <title>Document</title>
    <style>
      div, img {
        float: left;
        width: 150px;
        height: 150px;
        margin: 30px;
        background-color: blue;
        color: white;
        opacity: 0.5;
        transition: opacity 1s;
      }
      div:hover, img:hover {
        opacity: 1.0;
      }
    </style>
</head>
<body>
  <div>opacity: 0.5</div>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeWMROnWszBhw4kIAIhPJC28aNUU0f5tNplDf3LxlfQ-old63S7iuGoXFu7l7yVUSA9Cw&usqp=CAU" alt="doug">
</body>
</html>


    divサスペンション状態

    imgサスペンション状態
    リファレンス
    https://poiemaweb.com/css3-display
    個々の接続リストの挿入
    【kafka】partitionパーティションポリシー