[カカオ豆クローン]3.6~3.11メモ

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

CSS


Paddings and IDs


paddingはmarginとは逆

マージンえっじ:枠の境界外のスペースわくのきょうかいがいがいがいのくうかん
padding:box境界の「内側」空間
<!-- body에 padding추가 -->

<style>
      html {
        background-color: tomato;
      }
      body {
        margin: 0;
        padding: 20px 10px;
        background-color: thistle;
      }
      div {
        height: 150px;
        width: 150px;
        background-color: white;
      }
    </style>
結果
<!--body에 margin, padding 둘 다 추가 -->

body {
        margin: 30px;
        padding: 20px;
        background-color: thistle;
      }
結果

idを指す場合は、#id名を指定します.
<head>
   
    <style>
      html {
        background-color: tomato;
      }
      body {
        margin: 30px;
        padding: 20px;
        background-color: thistle;
      }
      div {
        height: 150px;
        width: 150px;
        background-color: whitesmoke;
        padding: 10px;
      }
      #first {
        background-color: whitesmoke;
      }
      #second {
        background-color: teal;
      }
      #third {
        background-color: blue;
      }
      #fourth {
        background-color: blanchedalmond;
      }
    </style>
  </head>

  <body>
    <div id="first">
      <div id="second">
        <div id="third">
          <div id="fourth"></div>
        </div>
      </div>
    </div>
  </body>
結果

ここで質問!
divに10 pxのpaddingを上下左右に加えると同じpadding値が与えられるので、大きさは同じはずで、1つのブロックにしか表示されないのではないでしょうか.どうしてそんな結果になったのですか.
=>divの中にdivが入っていてダウンジャケットをくれました!
paddingの内容にもっと多くのpaddingの内容を入れて、重ねていくと、重ねて、どんどん下に重ねていく形になります!
尻尾疑問!
ではdivにdivを入れるのではなく、
bodyにdivをリストする方法は?
=>ではboxはオーバーラップXで、前回blockboxを勉強したように、そのまま縦にブロックを並べます!
<!--div에 설정된 크기값 제거, 각 id에 따로 크기값 추가-->

      div {
        background-color: white;
        padding: 10px;
      }
      #first {
        background-color: whitesmoke;
        width: 150px;
        height: 150px;
      }
      #second {
        background-color: teal;
        width: 100px;
        height: 100px;
      }
      #third {
        background-color: blue;
        width: 50px;
        height: 50px;
      }
      #fourth {
        background-color: blanchedalmond;
        width: 25px;
        height: 25px;
      }
結果

border


border:boxの境界
<!--위 코드에서 fourth 지워주고 div에 border효과 추가-->

div {
        padding: 20px;
        border: 2px solid black;
      }
結果
*は全体を表します
<!--모든 요소에 2px의 검은색 실선으로 된 border를 만들 수 있음-->

      * {
        border: 2px solid black;
      }
結果

整理する
styleプロパティを使用してborderの外観を決定できます.
<!-- 위 코드에서 div third안에 문구 추가, 그 문구만 border효과 바꾸고싶어-->

    <style>
      span {
        border-style: dotted;
      }
    </style>
  </head>

  <body>
    <div id="first">
      <div id="second">
        <div id="third">
          <span>hello</span>
        </div>
      </div>
    </div>
  </body>
結果

Classes

  <head>
    <style>
      body {
      	background-color: wheat;
        margin: 20px;
      }
      span {
        background-color: teal;
      }
    </style>
  </head>

  <body>
    <span>hello</span>
  </body>
結果

paddingがspanに適用されるかどうか見てみましょう
<!--span에 padding, margin 추가 span문구 더 추가-->
		.
		.
		.

      span {
        background-color: teal;
        padding: 20px;
        margin: 30px;
      }
    </style>
  </head>

  <body>
    <span>hello</span>
    <span>hello</span>
  </body>
結果

span上のmarginは上下ともに30 pxであり,実際には左,右にのみ適用される.
=>inline
inline:高さと幅がないので、上下の距離X
padding:どこにでもある
=>前回学習したinline->block変換を使用(上、下ページでmarginを与えたい場合)
そうしたいとき.

悪いコード
<head>
  <style>
      #tomato {
        background-color: tomato;
      }
      #tomato2 {
        background-color: tomato;
      }
      #tomato3 {
        background-color: tomato;
      }
    </style>
 </head>

 <body>
    <span>hello</span>
    <span id="tomato">hello</span>
    <span>hello</span>
    <span id="tomato2">hello</span>
    <span>hello</span>
    <span id="tomato3">hello</span>
    <span>hello</span>
    <span>hello</span>
 </body>
良いコード.は類名の意味です
<head>
  <style>
      .tomato {
        background-color: tomato;
      }
    </style>
  </head>

  <body>
    <span>hello</span>
    <span class="tomato">hello</span>
    <span>hello</span>
    <span class="tomato">hello</span>
    <span>hello</span>
    <span class="tomato">hello</span>
    <span>hello</span>
    <span>hello</span>
  </body>
#トマトはid=「トマト」
・トマトはclass=「トマト」
class名は唯一必要なXです
複数の要素を同時に書き込むことができます
一度に複数のクラスに書き込むことができます
idは複数を同時に持つことはできません
1つの要素にはidが1つしかありません
ボックスを丸くする方法
border-radius: 5px;
そうしたいとき.

悪いコード
<head>
  <style>
      .teal {
        background-color: teal;
        padding: 5px 10px;
        border-radius: 5px;
      }
      .tomato {
        background-color: tomato;
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
      }
    </style>
  </head>

  <body>
    <span class="teal">hello</span>
    <span class="tomato">hello</span>
    <span class="teal">hello</span>
    <span class="tomato">hello</span>
    <span class="teal">hello</span>
    <span class="tomato">hello</span>
    <span class="teal">hello</span>
    <span class="teal">hello</span>
  </body>
良いコード
<head>
  <style>
      .btn {
        padding: 5px 10px;
        border-radius: 5px;
      }
      .teal {
        background-color: teal;
      }
      .tomato {
        background-color: tomato;
        color: white;
      }
    </style>
  </head>

  <body>
    <span class="btn teal">hello</span>
    <span class="btn tomato">hello</span>
    <span class="btn teal">hello</span>
    <span class="btn tomato">hello</span>
    <span class="btn teal">hello</span>
    <span class="btn tomato">hello</span>
    <span class="btn teal">hello</span>
    <span class="btn teal">hello</span>
  </body>
idには制限がたくさんあるのでclassをよく使います.

Inline Block

<head>
    <style>
      div {
        display: inline;
        width: 50px;
        height: 50px;
      	background-color: teatl;
      }
      
    </style>
  </head>

  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>
すると結局何も見えず白い画面
inlineは幅と高さがないからです.display: inline-block;に変えると.
結果

しかし、インラインブロックはあまりよくありません.
多くの問題がありますが、最大の問題はinline-blockが反応型設計をサポートしていないことです!

Flexbox Part One


だから人々が考えているのはflexboxです
flexboxは箱をどこにでも置くことができて、とても良い+とても柔軟です
2 Dレイアウトでよく機能しています.
flexboxを使用するルール
  • の子供のアパートに何も書かないでください.
  • のスピンドルを移動するスピンドル(デフォルト=水平)と、交差軸を移動する十字軸(デフォルト=垂直)
    videified-内容:主軸の適用
    align items:crossaxisの適用
    次に、低水平、垂直のデフォルト属性
    • を変更できます.
    ではここでdivの両親はbodyです.<style>の<body>にdisplay: flex;と入力
    完全なコード
    <head>
   <style>
      body {
        margin: 20px;
        display: flex;
      }
      div {
        display: inline-block;
        width: 150px;
        height: 150px;
        background-color: teal;
      }
    </style>
  </head>

  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>
    結果

    main axis
    では、そのdiv boxを中央に揃えたいなら?
    上のコードスタイルbodyにjustify-content: center;を追加
    <style>      
      body {
        margin: 20px;
        display: flex;
        justify-content: center;
      }
</style>
    結果

    n/a.結論
    中央揃えjustify-content: center;右揃えjustify-content: flex-end;左揃えjustify-content: flex-start;(デフォルト)
    追加(+)justify-content: space-evenly, space-around, space-between;:空き領域を同じサイズに分割
    順次運転
  • evenly
  • around
  • between
    • 私はdivに何もしていません.<style>属<body>には命令語のみが入力されている.
    cross axis
    では、その箱を一番上に並べないで、真ん中に置いてください.
    stylebodyにalign-items: centerと入力
    =>しかし、このようにするのは適用されません.なぜですか.
    理由:bodyが交差軸に垂直なitemを中心としていることをお伝えします.
    bodyは箱の大きさしかありません.既に垂直の中心になっているので適用されません!
    =>bodyにheight値を指定する必要があります
    height値はvh,ex)height: 100vh;に与えるべきである
    vh:viewport height,100 vh=画面高さの100%
    中央揃えalign-items: center;右揃えalign-items: flex-end;左揃えalign-items: flex-start;(デフォルト)
    div align-items: stretch;:divのheight値を除去するとstretchが適用されます
  • center
  • stretch
    • 整理する
  • felxboxを適用したい場合は、子供ではなく親に伝えるだけです.
  • justify-コンテンツとalign-temsを適用するには、まずflex、
    • を表示する必要があります.
  • display:flexはそのエンティティをflexコンテナ
    • にする.
  • flexコンテナには2つの軸があります.主軸(prevident-content)と交差軸(align-items)
    ★prevident-contentは水平に適用されません.後で垂直に適用する主軸に変更される可能性がありますから.★
  • スタイルでは、body height値を与えなければalign-items設定も変わりません=>上部と中心を占めているからです!
  • の値はpxではなくvhを使用します.vhは画面サイズによって変わります.iPhone、Mac、それより大きい画面では異なります.

    • ここで質問!


    では、div width値をpxではなくvhに設定すると、横方向も画面サイズによって変わりますか?

    いけません^^

    Flexbox Part Two


    flex-directionオプション=column,rowdisplay: flex=rowにポーリング
    主軸と交差軸を変更するには、次の手順に従います.flex-direction: column;エンコーディングの追加
    flex-方向が列の場合、主軸は垂直で、交差軸は水平です.
    結果

    align-items:垂直->水平
    qualified-content:水平->垂直
    テキストにも使用可能
      <head>
    <style>
      body {
        height: 100vh;
        margin: 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150px;
        height: 150px;
        background-color: teal;
      }
    </style>
  </head>

  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </body>
    結果

    flexboxプロパティ
    flex-wrap: nowrap; すべての要素を同じ行に配置します.widthを初期サイズと見なして画面サイズを小さくする場合は、widthを変更してすべての要素が同じ行にあるようにすることができます.

    flex-wrap: wrap; スクリーンを拡大または縮小しても、指定したwidthおよびheightサイズに反映されます.
    yii 2でgetErrors()メソッドの最初のエラーメッセージを取得する
    OpenDayLightソースコードコンパイルプロジェクト統合ノート