CSSでの要素の幅

CSSでの要素の高さもほぼ同じ話

この3種類

自分自身で絶対値で指定する

block-level elementに対し、px, vwなどの絶対値で指定したとき

親のサイズによって決まる

block-level elementは何も指定しないと、親の幅まで広がる

%やem (単位)を指定することで、親のサイズに依存した幅を指定できる

object-fitのcontianとかもこれのイメージがあるmrsekut.icon

子のサイズによって決まる

子の幅が大きくなると、親の幅もそれを包含するように大きくなる

inline-level elementはこれ

block要素でも、min-contentやmax-contentなどを指定するとこれになる

CSS: Flexboxを使った場合は子の挙動が変わる

flex-direction: columnのとき、フロー方向が横向きに変わる

なので、横幅だけ見ると、子のサイズによって決まる様に見える

Grid Layoutは謎 #??

Codepen

https://codepen.io/mrsekut/pen/ZEjwoQY

自分自身で絶対値で指定

code:html

<p>親width = 500px</p>

自分自身で決まる

</div>

自分自身で決まる

</div>

指定によっては親をはみ出る

親のサイズによって決まる

code:html

<p>親width = 500px</p>

何も指定しないと親の横幅いっぱい(block要素)

</div>

%で親に依存した幅になる

</div>

子のサイズによって決まる

code:html

<p>親width = 500px</p>

この文字分だけ

</div>

#WIP

flexは適当に伸縮されるので、伸縮したくないものに対しては使うべきじゃいんだよなたぶん

#??

gridのときの、width/heightの扱い

gridってwidth/heightきかないんだっけ？

これ、幅のはなししてるけど、高さはまた違うよな #??

block要素とかの扱いが違うので。

「子のサイズによって決まる」のが強めになるイメージが有る

html要素によってもデフォルトのwidthの指定が異なる

display属性で変えられる

これはbrowserによって異なることもある(?)

通常はReset CSSを使って統一する