レイアウト崩れを直す:box-sizing border-box ＊とワンセット 【Progate】

レイアウト崩れを直す

box-sizingbox-sizingbox-sizingbox-sizingbox-sizingbox-sizingbox-sizin

paddingを以って追加したデザインを、「画像を崩することなく調整する方法のこと」

こう覚える

box-sizing: border-box;の仕組み

「画像を崩することなく調整する方法」には表題のbox-sizing,border-boxを使用する

borderの要素をpaddingに追加する。追加するとwidthの合計に２つの要素が加わる。

全要素にCSSを適用する

box-sizing: border-box;を指定する時*box-sizing: border-box;を指定す

ポイント

box-sizing　border-boxを使う時はアスタリスク＊を使用する

このように覚えておく

EX. アスタリスクを使用して全CSSにbox-sizing:border-box を適用する

* {

  boxsizing: boder-box;

}

このように書く