つの寿司のレシピでCSSのフロートを考え出す

13237 ワード
beginners css webdev テキストリンク
この記事はoriginally published Freecodecampで.
数週間前に、私は基本的なCSSについて私が決して理解しなかったすべてのものを認めるべきであると決めました.私は彼らに深く意識的なダイビングをしようとすると最終的にそれらを取得します.今では、CSSについて初めて学んだ2年以上経っていたようですが、私が経験した全ての経験を利用できました.今回は、より簡単かつ明確にする必要があります.
月には、私は神秘的なペアのposition プロパティ.旅の2度目のストップです
The float プロパティは、料理のレシピの形で.

レシピインデックス

  • 寿司列 — 要素を均等にカバーする
  • クリアランススープ — 通常、フロートの下にあるコンテンツを

    • 寿司列🥢


    我々は、完全に(容器)幅で均一に要素を分配するために、floatsとパーセンテージ値を使います.寿司の行のようにプレートで.

    成分

  • 1容器または板
  • あなたがサイドバイサイドを配布する必要があるいくつかの寿司の作品.
  • % sign
  • 1フロート:左;

    • 指示


    あなたの寿司の部分、つまり、行に表示する要素を準備します.彼らはMakis、アイテムカード、nigiris、アイコン、あなたの好みに合っていることができる.
    あなたは、彼らにどんな非位置決めスタイリングも加えることもできます:色、テキスト調整、フォントまたは醤油.
    ボードのようにブロック容器に入れてください.最も基本的な形式では、これはdiv しかし、他のHTML 5の意味要素を使用することができますheader , footer , section , article , main ). 記述クラスを追加します.私は使用するnigiri .
    <html>
  <body>
    <div class="board">
        <div class="nigiri">
          <h1>/ / / / /</h1>
        </div>
        <div class="nigiri">
          <h1>/ / / / /</h1>
        </div>
        <div class="nigiri">
          <h1>/ / / / /</h1>
        </div>
    </div>
  </body>
</html>

<!-- Don't mind the `/`s, they're for the salmon's stripy effect. -->
    さて、クラスにぎりで我々のフロートを含むいくつかのスタイルを適用します.ちょっとお待ちください.
    .nigiri {
  margin: 0 10px;  /* fixed 10px margin and padding... for now! */
  padding: 0 10px;
  float: left;

/*  Extra things to makit look nice  */
  background-color: #fff;
  border-radius: 100px;
  box-shadow: inset -3px -6px 0 0 #ece0cd;
}

.nigiri > h1 {
  background-color: #fca35d;
  color: #fce2da;
  border-radius: 100px;
  font-weight: 100;
}

.board {
  width: 500px;
  height: 200px; /* we need this because floated elements don't occupy real Document Flow space, try removing it! */
  margin: 20px auto;
  padding: 10px;
  background: #CBAD8C;
  border-radius: 8px;
  box-shadow: 12px 8px 0 rgba(#000, 0.1);
}
    何float: left; つの側に固執するすべての要素を教えていますか — この場合、左 — そして、左から右の行でお互いの隣に立ってください.
    我々はボードに高さを追加していることに注意してください.通常、我々はこれを必要としません:ボードはどんなものにでもフィットするために拡大します.しかし、私たちのnigirisのような浮動小数点型の要素は異なります.そういうわけで、我々は板のために固定された、ピクセルサイズの高さを使用しています.
    さて、1行ですべての要素を見るべきです.しかし、何かは全く正しくありません.彼らはすべての左側に積んでいるし、おそらくあなたのボードの右側に空のスペースがたくさんある.

    我々は均等にスペースを必要とする.
    私たちは、許容値を使用して、そのコンテナ(この場合のボード)に相対的にNigiriの幅を設定することによって行うことができます.しかし、3つの要素のために、それはちょうど33.33 %ですか?まあ、それは簡単ではない.
    今これはトリッキーな部分です:あなたが設定する必要がある%
  • どのように多くのアイテムを
  • どのように、彼らは内的に構造化されているか
  • そして、彼らの間でどれだけのスペースを望む.
    • あなたは彼らが側によって互いの側に固執したり、それらの間にいくつかのマージンが必要ですか?寿司の部分が米詰め物を持っているならば、それは彼らに彼らの内容より大きくさせます.その幅を小さくすることで、それを補償しなければならない.このため、パディング値に%を使用することもお勧めします.
    私は、これが混乱することがありえるということを知っています.ハンドメイドのシングルプレスイラストです.さて、はっきりと説明してください.

    各握りはボードの全幅33.33 %です.
  • 各辺のマージンは2 %です.
  • 両側のパッドのための2 %
  • そして実際の幅の29.33 %です.
    • しかし、これは数学のレッスンではなく、レシピです.あなたのために容易にするために、親愛なる読者は、ここでは1 %の米パディングですべての肩とマージンの間隔の要素のためのいくつかの一般的な組み合わせがあります:
    /* Two elements in the row */

.two.shoulder {
  width: 48%;
  padding: 1%;
}

.two.spaced {
  width: 46%;
  padding: 1%;
  margin: 1%;
}


/* Three elements in the row */

.three.shoulder {
  width: 31.33%;
  padding: 1%;
}

.three.spaced {
  width: 29.33%;
  padding: 1%;
  margin: 1%;
}


/* Four elements in the row */

.four.shoulder {
  width: 23%;
  padding: 1%;
}

.four.spaced {
  width: 21%;
  padding: 1%;
  margin: 1%;
}


/* Five elements in the row */

.five.shoulder {
  width: 18%;
  padding: 1%;
}

.five.spaced {
  width: 16%;
  padding: 1%;
  margin: 1%;
}
    あなたが望むだけ多くを取ること自由に感じなさい.
    あなたはここでパターンに気づいたかもしれません.彼らは、要素のパーセント幅から2 %(1 %ごとに)を控えることによってそれを補償する必要があります.私たちの1 %マージンの呼吸にも行きます.今では、行の3つの要素に対して33.33 %の幅を使用しないようになります.代わりに、2 %のパディングを残した後、29.33 %に設定し、それぞれのマージンの2 %を設定します.
    それはたくさんの数学だった.今のところ、どのように多くの部分をあなたの寿司ロールがチョップに関係なく、どのようにうまくボードでそれらを提示する方法を知っている.
    あなたがこのセットアップで遊ぶことを望むならば、ここにありますCodePen 特にそのために作られます.

    And if you like CSS sushi, don't miss Sasha Tran's very inspiring CSS Sushi Board.


    クリアランススープ🍲


    あなたの部分がそれの中で泳ぐことを終えないことを確認している間、いくらかの浮いている寿司で持つ完全なスープ.

    成分

  • 浮き寿司1枚
  • それに続くスープやスープ.
  • 一つ明らかに:スープ

    • 指示


    一度フローティング寿司のピースのあなたの行を準備ができて、あなたのスープ容器をHTMLの下に配置します.
    私たちの寿司は優雅に“上”のドキュメントの流れをフロートし、他の要素に影響を与えるためのものです.私たちが注意しないならば、彼らはちょうどスープで浮いているかもしれません、そして、寿司ラーメンは世界が準備ができている何かでありません.
    浮動小数点数の要素が実際のドキュメントの高さを持っていないことを忘れないでください.これはまた、スープを“プッシュ”しないことを意味します.今この恐ろしい混乱を見てください.
    この残虐行為を防ぐために、我々は明確な:スープを追加する必要があります.私は両方とも言います!
    ここに二つのオプションがあります.
    私たちは単にスープをボウルまたは容器に入れて、ボウルにスタイルを与えることができますclear: both; . これは仕事を得るのをソートしますが、それは結果のような結果になりますmargin-top すべてのボウル上では動作しません.
    それで、我々が寿司部分がスープ氾濫から完全に保護されて欲しいならば — そして、途中ですべての機能を失うことはありません — 我々は、彼らが高い縁のプレートに含まれる必要があります.それを達成するために:after 寿司板(すなわち、我々の小さい握りの容器の容器)への擬似要素:
    
.nigiri-plate {
  background-color: #223;
  box-shadow: inset -8px -8px 0 0 #558;
  border-radius: 20px;
  height: 105px;
}

.nigiri-plate:after {
  content: "";
  clear: both;
  display: block;
}
    擬似要素は空を必要とするcontent 存在する.それから、「明確な:両方」と「表示:ブロック」は、このテクニックの目的のためにあります.
    あなたが遊んでいるもう一つの例が、以下にあります.私はプレートの高さと背景色を使用して表示させた.スープがきちんと置かれる必要がないとしても、それはちょうどfancierに見える🎩
    私も前にして古典的なスープボウルを中心にmargin: anything, auto; テクニック.
    この料理のやり方は、スープが浸水するのを防ぐために非常に高い南の壁を持っています.……いい壁.

    All right, I’m super glad that you made it this far and I hope this tiny recipe book helped you get a better idea on how floats work… and how we can work with floats. Stay tuned for more deep-dive-into-basic-but-elusive-things like this 😉

    [JavaScriptまとめ7]Array
    【PHP7.4】PHP7.4では変数に型指定できる & 菱形継承っぽいものができる