CSSのwidth :100%;の概念がよくわかりません。

Question

CSSのwidth :100%;の概念がよくわかりません。
これは該当の画像のもとの大きさのまま出力しますよ、と言う意味ですか？
あとよく画像とかのサイズで600×200みたいな感じで書かれてると思うのですが、
これは横幅(width)が600pxと言う意味ですか？
あとmin-widthとかの最小幅を指定する意味ってなんですか？
指定しないと不具合が出るのでしょうか？
具体的な不具合の例が思い浮かばないです。
プログラミング初心者です。解説よろしくお願いします。

Answer 1

これは該当の画像のもとの大きさのまま出力しますよ、と言う意味ですか？

違います。親要素の幅に対する100%です。

min-widthとかの最小幅を指定する意味ってなんですか？

widthに相対サイズ（%や、画面幅のvwなど）を使った指定を行うと、親のサイズが変われば際限なく拡大・縮小します。それに限度を設けたい場合にmin-widthが便利です。

Comments

[takawork]

わかりやすい回答ありがとうございます。

Answer 2

包含ブロックを参照します。

<percentage>

親となる包含ブロックの幅に対するパーセント値で定義します。

width - CSS: カスケーディングスタイルシート | MDN

---

あとよく画像とかのサイズで600×200みたいな感じで書かれてると思うのですが、

これは横幅(width)が600pxと言う意味ですか？

はい、そうです。
伝統的に、水平方向が先に書かれます。

---

あとmin-widthとかの最小幅を指定する意味ってなんですか？

指定しないと不具合が出るのでしょうか？

それより幅を小さくしたくない時に使います。たとえば、親要素の半分と同じにしたいけど、親要素が200pxより小さい時には100px、みたいな感じで。

指定しないことによる不具合はないです。