CSSにおけるborder:noneとborder:0の違い
テキストリンク:https://segmentfault.com/q/1010000000694683/a-1020000001818777原作ありがとう!
違いを説明するには、まずborderという属性を紹介しなければなりません. border-width border-style border-color
普段書くときは3つの属性を揃える必要はありません.そのうちの1つか2つを書くことも許可されています.例えば、
なぜこれが可能なのか、このように書くと、ブラウザはこの欠落した属性のデフォルト値を設定します.プロセス等価
同理
だから以下のコードは
に等しい
以上の例では、この2つの書き方の違いを説明できるでしょう.
CSSにはbackground,fontなど似たような属性がありますが、略記属性は前の単一定義の属性値を上書きすることに注意してください.
違いを説明するには、まずborderという属性を紹介しなければなりません.
border
は、簡潔なプロパティです.次のプロパティを設定できます.普段書くときは3つの属性を揃える必要はありません.そのうちの1つか2つを書くことも許可されています.例えば、
border: 1px solid;
なぜこれが可能なのか、このように書くと、ブラウザはこの欠落した属性のデフォルト値を設定します.プロセス等価
border-width: 1px;
border-style: solid;
border-color: value of color; /* `border-color` `color` */
同理
border: 0;
は(疑似コード)に等しいborder-width: 0;
border-style: none; // `border-style` `none`
border-color: value of color;
border: none;
等価border-width: medium; // `border-width` `medium`,
border-style: none;
border-color: value of color
だから以下のコードは
border-width: 1px;
border: solid;
に等しい
border-width: 1px;
border-width: medium; /* default */
border-style: solid;
border-color: value of color; /* default */
以上の例では、この2つの書き方の違いを説明できるでしょう.
CSSにはbackground,fontなど似たような属性がありますが、略記属性は前の単一定義の属性値を上書きすることに注意してください.