まずインライン要素とブロック要素と聞いて何を思い浮かべます？
僕>>width/heightが決めれたり、
横いっぱい伸びたり、隣に並んでくれたりする要素？値？でしょ！
びっくりするくらいざっくりとでしか覚えてません。。
その都度、ネットで調べて適宜対応しています。
しかし！！！
もう頭の中に入れて、調べたくない、、、
調べる時間がもったいない、、、
そんな気がするので、備忘録として残します。
アウトプットまでがインプット！！！
目次
①インライン要素とブロック要素
- ①-1 それぞれの値の特徴
- ①-2 細かいところ
②widthとheight
- ②-1 width/height: auto;
- ②-2 auto と 100%の違い
③width指定ではみ出る
- ③-1h widthではみ出るの回避
④番外編 画面縮小時に、flexboxで指定した要素が縮小しないのを解決
①-1 それぞれの値の特徴
1) block
- p, div, ul, h1~h6タグの初期値
- 要素が横いっぱいにまで広がり、縦に並んでく(前後に改行)
- 高さ・幅・余白指定 可能！
- text-align/vertical-align 不可能！
2) inline
- a, span, imgの初期値
- 要素が横に並んでいく
- 幅・高さは文字の大きさで決まる
- 上下のmarginは指定できない
- text-align(親要素)/vertical-align 可能！
**リンクタグの幅を指定したいときは、
inline-block要素 か block要素を指定してあげる
3) inline-block
- displayで指定！！
- 横に並びつつ、少し距離をとる
- 高さ・幅・余白指定 可能！
- text-align(親要素)/vertical-align 可能！
4) none
→無視！！
①-2 細かいところ
- inline要素の中にblock要素は入ることはない
②-1 width/height: auto;
- block要素の場合 →何もしないと、横いっぱいに広がる
- inline/inline-block要素の場合 →要素の幅＝要素の中身（テキスト） 100%で指定することで、横いっぱいに広がる。
②-2 auto と 100%の違い
autoの場合
→ widthの中にpadding/border
が含まれる100%の場合
→ widthの中にpadding/border
が含まれない
余白をつけた分だけ、親要素からはみ出でしまう
③-1h widthではみ出るの回避
- 入れ子にする →外側の要素を100%にしてあげて包む
- calc()関数を使う →maring: 0; border: 2px; padding: 2px;の場合 左右のはみ出し合計は8px なので、その分を引いてあげる width: calc(100% - 8px）；
- box-sizingを利用 →box-sizing: border-box;を指定することで、 padding/borderまでwidthの指定範囲が広がる。
④番外編 画面縮小時に、flexboxで指定した要素が縮小しないのを解決
- widht/heightを指定してあげる。
長文・乱文失礼します🙇♂️