【コーディング初心者向け】max-widthとwidthの違い

widthの横幅の設定の違い

今回は「width」の使い方に関しまして、ご説明致します。
「max」がつくのとつかない場合で、用途は大きく違います!!
「max-width」と「width」の違いに関しましてご説明致します。

横幅に「max-width」を設定した場合。

<style>
.box01{
  border: 1px solid #ccc;/*外枠の線の設定*/
  max-width: 900px;/*最大の横幅の設定*/
}
</style>
<div class="box01">
				<p>max-widthた場合</p>
			</div>

<style>

.box01{

border: 1px solid #ccc;/*外枠の線の設定*/

max-width: 900px;/*最大の横幅の設定*/

}

</style>

<p>max-widthた場合</p>

</div>

このように全体がはみ出す事はありません。
maxで広がった時の大きさの設定を行なっているためです。

max-widthた場合

横幅に「width」を設定した場合。

<style>
.box02{
  border: 1px solid #ccc;/*外枠の線の設定*/
  width: 900px;/*横幅の設定*/
}
</style>
<div class="box01">
				<p>max-widthた場合</p>
			</div>

<style>

.box02{

border: 1px solid #ccc;/*外枠の線の設定*/

width: 900px;/*横幅の設定*/

}

</style>

<p>max-widthた場合</p>

</div>

このように右側が切れていると思います。
これはこの横幅で設定と横幅の幅を決めてしまっているので
それいかに縮まる事はありません。

widthた場合