(1) Box

17002 ワード
CSS テキストリンク

Box


Boxモデルの4つの領域



😎 1) Content


文字通り、内容を含む枠
幅:width,
たてスクリーン

😎 2) Padding


コンテンツと枠線の間のスペース

😎 3) Border


名前の通り枠線を表示
  • border: 굵기 스타일 색깔
  • border: none
  • border-radius: 4px->border-top-left-radius等、一端のみ
    ->border-radius: 50%は円形の
    • であってもよい

    😎 4) Margin


    エレメント間のギャップを表す

    速記型(略記)

    top right bottom leftの順序で、上から時計回りに

    Box Sizing



    カセット分析



    cssコードの作成


    index.html
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Box Model</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="box"> Hello CSS </div>
  </body>
</html>
    styles.css
    body {
  font-family: 'Poppins', sans-serif;
}

.box {
  width: 480px;
  height: 480px;
  padding-top: 40px;
  padding-left: 50px;
  background-color: #0066ff;
  color: #fff;
}

    😎 うん。スクェアクラッキング




    480 X 480正方形が530 X 520矩形に…!

    😎 Box Sizing: content-box


    htmlでは、デフォルトでは、すべての要素のデフォルトサイズはcontent-boxです.

    strong、liを付けて確認すればわかります.



    box-sizeの値はcontent-boxであり、boxの幅/高さ値はコンテンツのみの幅/高さとして定義される.

    😎 でも常識的にborderのwidth/hightは正しい...?

    box-siizing: border-boxに設定し、ライナーを入れると内容のサイズが自動的に縮小することが確認できます!

    😎 だからほとんどの場合、ディボルトゥーでbord-boxを敷きます!

    * {
   box-sizing: border-box;
}

    box


    box modelの前に、box typeを理解してください!


    cssはhtml要素をすべてボックスで表します.
    <4種類のBox type>
  • Box
  • Inline
  • Inline Block
  • Flex

    • 🚀 Block


    😎 Box Type -> Display


    displayはbox typeを決定するcss属性である.
    すべてのhtml要素にはdisplay値があります!


    😎 Block:「バリケード」


    blockといえば、「街のカーテン」を思い出すだけでいい!

    1000 pxスペースに400 pxボックスが2つあるなら、もちろん

    このように横にひっくり返すことができますが...
    🙅‍♂️ いや!
    Blockは道を塞ぐ性質があるので、

    widthを別途設定しない場合、boxのwidth=親content-boxの100%

    ブロックの例

    <div class="parent">
  <div class="child"> Child </div>
</div>
    コードを記述し、ブラウザで検証します.


    childとparentのwidth値が同じであることがわかります.

    blockのwidthを宣言しました。


    blockのwidthが宣言された場合、残りのスペースはmarginによって埋め込まれます.

    例)
    <div class="parent">
  <div class="child"> Child </div>
  <div class="other"> Other </div>
</div>
    .child {
  width: 500px;
  background-color: #ffc92c;
}

.other {
  width: 100px;
  background-color: #ff4949;
}


    道の縁が広くて道を塞いでいる.

    margin: 0 auto; 集中配置の魔法の呪文


    marging-top、marging-bottonは0、
    左、右、自動
    ->自動的に発生する利益を平均して左右します!
    margin-left:autoのみの場合、左側にmarginを集約します.(右に傾ける)

    blockのheightはどのように計算しましたか?


    親の身長を単独で宣言しなければ、
    子どもの身長の和=親の身長


    child、他の高さは50なのでparentの高さは100です.

    🚀 Inline


    Inline：「フロー」


    というように、box内を流れたいという性質があります!

    新しいinline要素が入ってくるが、十分なスペースがない.

    迷わず改行して新しい流れをつくる

    書類に字を書くのと同じです!

    block vs inline


    Blockは面(領域)です.
  • です.したがって、幅/高さ、塗りつぶし、枠線、余白など、枠モデルに使用できるものを与えることができます.
    直線は直線です!
    私は
  • 流量を妨害するのが嫌いです!
    だからwidth/heightと、padding、border、marginのトップ/ボトムをあげることはできません!

    • インライン例

        <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. consequat.
      <span>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. consequat.
      </span>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
      aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
      enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
      ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
      adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
      voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
      aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
      molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
    </p>

    spanで
    margin-left: 40px;
margin-right: 50px;
    与えると流れの妨げにならないので自然に適用します.
    でもここで
    padding-top: 60px;
    あげるなら?

    このように上の字を押し開くのではなく、蓋をします.
    margin-bottom: 100px;
    上下の縁をくれれば役に立たない.
    (何の差異も生じません)

    🚀Inline Block


    Inline Block:BlockとInlineの利点


    blockの場合、バリケードの性質上、左右操作が難しい
    Inlineでは,ストリームの性質上,上下に適用できない.
    しかしinline blockは基本的にinlineの流動特性とblockの領域バリアの特性を有する.

    inline-block例

    display: inline-block;
width: 800px;
height: 200px;

    上のように他の子供を押しのけているのが見えます!
    EL (Expression Language)
    210409 NEW携帯電話本人認証01