まずインライン要素とブロック要素と聞いて何を思い浮かべます？
僕>>width/heightが決めれたり、
横いっぱい伸びたり、隣に並んでくれたりする要素？値？でしょ！
びっくりするくらいざっくりとでしか覚えてません。。
その都度、ネットで調べて適宜対応しています。
しかし！！！
もう頭の中に入れて、調べたくない、、、
調べる時間がもったいない、、、
そんな気がするので、備忘録として残します。
アウトプットまでがインプット！！！
目次
###①インライン要素とブロック要素
- ①-1 それぞれの値の特徴
- ①-2 細かいところ
###②widthとheight
- ②-1 width/height: auto;
- ②-2 auto と 100%の違い
###③width指定ではみ出る
- ③-1h widthではみ出るの回避
###④番外編 画面縮小時に、flexboxで指定した要素が縮小しないのを解決
####①-1 それぞれの値の特徴
- block
- p, div, ul, h1~h6タグの初期値
- 要素が横いっぱいにまで広がり、縦に並んでく(前後に改行)
- 高さ・幅・余白指定 可能！
- text-align/vertical-align 不可能！
- inline
- a, span, imgの初期値
- 要素が横に並んでいく
- 幅・高さは文字の大きさで決まる
- 上下のmarginは指定できない
- text-align(親要素)/vertical-align 可能！
**リンクタグの幅を指定したいときは、
inline-block要素 か block要素を指定してあげる
- inline-block
- displayで指定！！
- 横に並びつつ、少し距離をとる
- 高さ・幅・余白指定 可能！
- text-align(親要素)/vertical-align 可能！
- 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を指定してあげる。
長文・乱文失礼します🙇♂️