width=100%、width=autoの違いは、box-sizingの設定に従うか、従わないかの違い(html,css)

こんにちは tanaka です。


注意)
width: auto は、

display: inline
display: inline-block

display:block
で、
結果が変わります。

display: inline
display: inline-block
width: auto文字列の幅が
contentの幅になる
display:blockwidth: auto親要素content幅を
引き継いで幅の数量とし
その中へ
自らのボックスモデル全てを入れる
(content+padding+border+margin)

この記事は、
display:block + width: auto
の話です。


width: 100%;
width: auto;

この二つは
どう違うのかなと
思ったことはありませんか?

よく似ていて
少し違います。

では、
どこが違うのでしょうか?

結論から言います。

width: 100%; は、
box-sizingの設定通りに動きます。

ですが、
width: auto; は、
box-sizingの設定を無視して
全てのボックスモデルを幅に適用させます。


これでは、
分かりにくいと思われるので
詳しく説明します。

ですが、その前に

まず、
幅はどうやって決定するかの
話をします。

幅の決定

幅は、
2つプロパティを使って決定します。
 1:width   = 幅の数量
 2:box-sizing = ボックスモデルのどこまでを
           幅にするか(ボックスモデルへの適用)

幅の決定の手順

1:width
  具体的な幅の数量決めます。

2:box-sizing
  決定した幅の数量を
  ボックスモデルのどこまで適用させるかを
  決めます。


例1)
1:幅の数量=500px
2:ボックスモデルへの適用=content

width: 500px;
box-sizing: content-box;

画像blog-width-auto-difference23

例2)
1:幅の数量=500px
2:ボックスモデルへの適用=content + padding + border

width: 500px;
box-sizing: border-box;

画像blog-width-auto-difference24

100%、autoの
説明に戻ります。

それでは、
100%
auto
どこが違うのでしょうか?

結論から言いますと、

100%は、
box-sizingの設定通りに
働きます。

autoは、
box-sizingの設定を無視し、
全てのボックスモデルを幅とします。

ここが違います。

それでは
さらに詳しく説明していきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

100%とautoの違い

box-sizingに対しての振る舞いが違う

100%とautoの違いは

100%は、
box-sizingの設定通りに動きます。

ですが、
autoは、
box-sizingの設定を無視して
全てのボックスモデルを幅に適用させます。

100%、auto 数量は、親要素のcontent幅

まずは、
100%、autoの
幅の数量について話します。

100%、autoは、
どちらとも
親要素のcontent幅を
自らの幅の数量としています。

もし親要素のcontent幅が500pxなら
 100% = 500px
 auto  = 500px


次に、
100%、autoの
ボックスモデルへの適用について話します。

100%、autoは、
ボックスモデルへの適用である
box-sizingに対して

100%とautoで
違う反応をします。

100%は、
box-sizingで設定した通りに動きます。

しかし、
autoは、
box-sizingの設定を無視して、
全てのボックスモデルを幅へ適用させます。

3つの例

これでは
よく分かりにくい思われるので、
例を3つあげます。

100% と box-sizing(content-box)
100% と box-sizing(border-box)
auto

100% と box-sizing(content-box)

100%は、

1:幅の数量

   親要素のcontent幅を引き継いで
   自らの幅の数量としています。

2:ボックスモデルへの適用

   box-sizing: content-box
   の設定に従います。

画像blog-width-auto-difference60

注意)数量は、親要素のcontent幅

100% と box-sizing(border-box)

100%は、

1:幅の数量

   親要素のcontent幅を引き継いで
   自らの幅の数量としています。

2:ボックスモデルへの適用

   box-sizing: border-box
   の設定に従います。

画像blog-width-auto-difference61

注意)数量は、親要素のcontent幅

auto

autoは、

1:幅の数量

   親要素のcontent幅を引き継いで
   自らの幅の数量としています。

2:ボックスモデルへの適用

   ・box-sizing: content-box
   ・box-sizing: border-box
   の設定が入っていたとしても
   無視します。

   全てのボックスモデルへ
   幅の数量を適用させる。

画像blog-width-auto-difference62

注意)数値は、親要素のcontent幅

まとめ

100%とautoの違い

100%とautoの違いは

100%は、
box-sizingの設定通りに動くが、

autoは、
box-sizingの設定を無視して
全てのボックスモデルを幅に適用させる。

画像blog-width-auto-difference62

注意)幅の数量は、親要素のcontent幅

autoはwidthとbox-sizing両方の機能

autoはある意味

width: auto;
1つで、

幅を決定づける
プロパティの2種、

どちらの機能も兼ね備えている。
とも言えます。

幅を決定づけるプロパティ

1:width   = 幅の数量の決定
2:box-sizing = ボックスモデルのどこまでを
          幅にするかの決定
         (ボックスモデルへの適用)

以上、
width=100%、width=autoの違いは、
box-sizingの設定に
従うか、従わないかの違い(html,css)
の話でした。

ありがとうございました。

タイトルとURLをコピーしました