生活コードCSS-ブロックレベルレイヤー、ライン内レイヤー、グリッド

3907 ワード
テキストリンク
ブロックレベルシンボル(block level element):画面全体に書き込まれるタグ
ラインエレメント(inline element):自分のコンテンツの大文字と小文字のタグ
ブロックレベルの装飾でも、自分のボリュームで使えます.
display: inline;
インテリアにもこのように書いてあるとブロック級の飾りになります.
display: block;
<style>
        h1, a {
            border-width: 5px;
            border-color: red;
            border-style: solid;
        }
        
    
    </style>
CSS部分では、このように短く書くことができます.
このようにして.
  <style>
        h1, a {
            border: 5px solid red;
        }
        
    
    </style>
内容と枠線の間に白を残す
padding: 20px;
このように追加すればいいです.

あそこに空白があるのは縁のためです.
margin: 0px
このまま入れると真ん中の空白が消えてしまいます
DIVはブロックレベルレイヤー
SPANは内蔵されています
レイアウトでグリッドを使用します.
こうし
    <div id = "grid">
        <div>NAVIGATION</div>
        <div>ARTICLE</div>
    </div>
それぞれdivで分けてdivで包む
idを付与する.
まだあります.
   #grid {
            border: 5px solid pink;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
このようにスタイル部分を入れます
displayは、プロパティ値を使用して特定のコンテンツを決定します.
タグの表示方法を変更できます.
人々はなぜその香りに惹かれるのか...
奇跡Mu分析-各種主流BT機能実現