frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【検証】max-width は width を上書きしますが、min-width は max-width を上書きするとは?

スポンサードリンク

developer.mozilla.org

max-width、min-widthについてMDNには下記のように書かれています。

max-width は要素に与えられる幅の上限を指定する為に用いる CSS プロパティです。このプロパティは、 width プロパティの値が max-width で指定された値より大きくなることを防ぎます。

max-width は width を上書きしますが、min-width は max-width を上書きします。

ちょっとわかりづらいので検証してみました。

codepen.io

.box1,.box2は単純なmax-width、min-widthの特性ですが.box3については矛盾したスタイルを充てています。

.box3 {
  width: 100%;
  min-width:200px;
  max-width:100px;
  height:100px;
  background:#ccc;
}

最小値が200pxで最大値が100px。こうした場合(こんなことすることはないと思いますが)min-width:200pxが適応されました。

max-width は width を上書きしますが、min-width は max-width を上書きします。はこういうことでしょうか。