<DAY88>指示書を基づくデザイン構築を終えて
学習状況
●学習日数 88日
●学習時間(本日) 12時間
●累計学習時間 349.0時間
●一日あたりの平均学習時間 3.96時間
*この記事でわかる事
.box-sizing: border-box;を使用する理由 .clearflix afterを使用する理由
*指示書に基づくデザインについて、基礎だけど忘れがちなポイントを 2点、忘備録とアウトプットの為に、記述する。
*box-sizing: border-boxについて
親要素が子要素を含む時に、padding,margin幅を含んで、子要素を表示するようにする。 レスポンシブ対応しているサイトがほとんどであり、サイト構築の際に、形を崩れにくくする為に必要。 box-sizing:content-boxはデフォルトで指定されており、border-boxの逆である。
box-sizing: border-box
参考サイトがこちら
*clearflix afterについて
子要素のブロック要素や、インラインブロック要素に対して、floatを用いて、展開位置を調整するが floatはその字のごとく、浮いている状態になる。親要素から見たら、子要素が浮いているので、 親要素が子要素の高さや幅を認識できずに、デザインが崩れがちになる。
<div class="クラス名 clearfix"> .clearfix::after { display: block; clear: both; content: ""; }
クラス名に含めるやり方もできるので、こちらで覚える
参考サイト