[カカオ豆クローン]3.3~3.5メモ

10157 ワード
kokoa clon html css テキストリンク

CSS-htmlにcss効果を適用する


注意:ブラウザがCSSを読み込むと、上から順に読み込みます.同じセレクタを指すcssが複数ある場合は、最後のスタイルを適用します->つまり,コードの順序が結果に影響する.

📌Blocks and Inlines

<head>
    <style>
      div {
        height: 150px;
        width: 150px;
        background-color: tomato;
      }
      span {
        background-color: turquoise;
      }
    </style>
  </head>

  <body>
    <div></div>
    <div></div>
    <div></div>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
  </body>
👉結果
あの赤いブロックは1つのように見えますが、違います!
3つのブロックがあります
spanの隣に他の要素があるかもしれませんが、boxはできません.
block:隣に他の要素はありません
inline:他の要素が来る可能性があるex)span,a,image...これ以外はほとんどblockです.

📌Margin Part One

<!--display속성 : block을 inline으로 inline을 block으로 바꾸는거-->

      div {
        display: inline;
        height: 150px;
        width: 150px;
        background-color: tomato;
      }
      span {
        display: block;
        background-color: turquoise;
      }
👉結果
赤い箱はどこへ行きますか?
=inline要素は高さと幅を持たないため、消えてしまいます
inlineは高さと幅がなく、blockは高さと幅があります
<head>
    <style>
      html {
        background-color: tomato;
      }
      div {
        height: 150px;
        width: 150px;
        background-color: white;
      }
    </style>
  </head>

  <body>
    <div></div>
  </body>
👉結果
しかし、白いブロックと赤いブロックの割れ目を見ましたか?白い四角はどうして左上に貼らないで、少しふわふわしていますか?
marginはboxのborder(境界)の外部空間である.
<style>
      html {
        background-color: tomato;
      }
      body {
        background-color: thistle;
      }
      div {
        margin: 0;
        height: 150px;
        width: 150px;
        background-color: white;
      }
    </style>
👉結果
<!--margin 없애는 방법-->

body {
        margin: 0;
        background-color: thistle;
      }
👉結果
<!--margin값 주기-->

div {
        margin-left: 100px;
        height: 150px;
        width: 150px;
        background-color: white;
      }
👉結果

📌Margin Part Two


margine-top,left,right,bottomなど
  • margin: 20px;
    上下左右両側全て20 px
  • margin: 20px 15px;
    =margin値が2の場合、最初の値は上下、後の値は左右、上下20 px程度15 px
  • margin: 20px 5px 12px 9px;
    上20右5下12左9.時計回り方向
    •       body {
        margin: 0;
        background-color: thistle;
      }
      div {
        margin: 50px 100px;
        height: 150px;
        width: 150px;
        background-color: white;
      }
    👉結果
    Q)私は白い箱の上下角だけを50 pxと指定します.なぜbody部分のbox角まで50 pxなのでしょうか.どうしたんですか.
    A)それが崩壊のエッジ現象である.この現象は、白ボックスの境界が紫ボックスの境界と同じである場合に発生し、この場合、2ボックスの境界は1である.上と下だけ立って左の右側がそうでなければ.
    16進数コードメールアドレス-爬虫類がメールアドレスを収集することを避ける
    簡易版Linuxサーバー初期化Shellスクリプトの共有