入れ子のボックスサイズが違って、レイアウトが崩れないようにするための知識を学習します。
ボックスサイズの指定や注意点について、理解することが目的です。
heightプロパティを使う場面
背景色や背景画像を表示する時
See the Pen 11-3 by Rayout-gw (@Rayout-gw) on CodePen.
ボックス内の文章をスクロール表示する時
See the Pen 11-3-2 by Rayout-gw (@Rayout-gw) on CodePen.
widthプロパティは単位に注意
widthに限らず、ボックスサイズの単位には注意しましょう。
See the Pen 11-3-4 by Rayout-gw (@Rayout-gw) on CodePen.
box-sizingプロパティで便利にデザイン
box-sizingプロパティを使うと、widthの他にpaddingやborderの外観の大きさを計算しなくて済むので、ボックスサイズによるレイアウト崩れがしにくくなります。
See the Pen Untitled by Rayout-gw (@Rayout-gw) on CodePen.
リセットCSSを使うとbox-sizingが有効になります