のデータ54日目のコード

9687 ワード
css display webdev 100daysofcode テキストリンク

導入
CSSシリーズは、いくつかの共通のCSS使用に関する注意事項です.3つのタイプのCSS位置:ブロック、インライン、インラインブロックです.

1 .ディスプレイ:ブロック

プロパティ
  • すべては尊重されます
  • 要素は並んで座っていない

    • デモ

    コード
    <div class="outer">
  <span class="inner">
    inner
  </span>
  <span class="inner">
    inner
  </span>
</div>

    .outer {
  position:relative;
  color:green;
  border: 3px solid green;
  height: 400px;
  width: 500px;
}

.inner {
  display:block;
  padding:2%;
  margin: 2%;
  color: blue;
  border: 3px solid blue; 
  text-align:center;
  font-size: 30px;
  height: 100px;
  width: 200px;
  top:50%;
}

    2 .ディスプレイ:インライン

    プロパティ
  • 幅と高さは、
  • トップとボトムマージンは尊重されません

    デモ

    コード
    <div class="outer">
  <span class="inner">
    inner
  </span>
  <span class="inner">
    inner
  </span>
</div>

    .outer {
  position:relative;
  color:green;
  border: 3px solid green;
  height: 400px;
  width: 500px;
}

.inner {
  display:inline;
  padding:2%;
  margin: 2%;
  color: blue;
  border: 3px solid blue; 
  text-align:center;
  font-size: 30px;
  height: 100px;
  width: 200px;
  top:50%;
}

    ディスプレイ:インラインブロック

    プロパティ
  • 幅と高さは、
  • トップとボトムのマージンは尊重されている
  • は、要素が並んで座っている

    • デモ

    コード
    <div class="outer">
  <span class="inner">
    inner
  </span>
  <span class="inner">
    inner
  </span>
</div>

    .outer {
  position:relative;
  color:green;
  border: 3px solid green;
  height: 400px;
  width: 500px;
}

.inner {
  display:inline-block;
  padding:2%;
  margin: 2%;
  color: blue;
  border: 3px solid blue; 
  text-align:center;
  font-size: 30px;
  height: 100px;
  width: 200px;
  top:50%;
}
    それだ!

    記事
    私の記事はいくつかあります.お気軽にチェックしてください!
  • ソフトウェア開発のための私のブログ柱:https://medium.com/a-layman
    • 私のウェブ再開242479172
  • フェイスブック・ページ:https://jenhsuan.github.io/ALayman/cover.html
  • 私の最新の側プロジェクト-毎日の学習:https://www.facebook.com/imalayman
    • MySQLテーブルのデフォルトのソートに関する質問
    バニラJavaScript(Vanillia JS)-6 ep.1