bugfix> html > 投稿

模範的なdivがある場合:

#div {
max-height: 100px;
height: auto
}

#div {
height: auto;
max-height: 100px;
}

出力ファイルに違いはありますか?

回答 5 件
  • 注文する 場合によっては重要です。たとえば、ベンダープレフィックス付きバージョンをW3準拠のプロパティと共に使用する場合。

    -webkit-transform: ;
    transform ;
    
    

    transform: ;
    -webkit-transform: ;
    
    

    ブラウザは最後のプロパティを使用します。したがって、常にW3C準拠のプロパティを使用してください最終 利用可能であれば!

  • あなたのシナリオではしかし、他の人ははい。例えば:

    .add-margin {
        margin: 0;
        margin-left: 5px /** element will have 5px on left margin **/
    }
    
    

    .add-margin {
        margin-left: 5px;
        margin: 0 /** element will have no margins **/
    }
    
    

    一般的な経験則として、特別なケースが必要でない限り、すべてのプロパティをアルファベット順に配置します-これにより、オーバーライドが正しく追加されることが保証されます(コードの最初の例のように)

  • シナリオのプロパティに従って、順序は重要ではありません。

  • ほとんどの開発者は、CSSの注文に関して具体的な計画を立てていません。しかし、私は個人的に、選択した要素またはその周囲の他の要素にどれだけの影響があるかに基づいて方法を提案します。

    レイアウトプロパティ(位置、フロート、クリア、表示)

    ボックスモデルプロパティ(幅、高さ、マージン、パディング)

    ビジュアルプロパティ(色、背景、境界線、ボックスシャドウ)

    タイポグラフィのプロパティ(font-size、font-family、text-align、text-transform)

    その他のプロパティ(cursor、overflow、z-index)

    いくつかのcssコーディング標準に関する研究中にこれを読むようになりました。ここでもっと読むことができます

  • いいえ、プロパティの順序は、同じプロパティを変更せず、使用可能な2つ以上のプロパティを切り替えるまでは重要です。

    例:

    #div{
        color: red;
        height: auto;
        max-height: 20px;
    }
    #div{
        color: blue;
    }
    
    

    したがって、この場合、色のプロパティは最後のプロパティに置き換えられ、色は青い ただし、高さと最大高については、最初に割り当てられた同じプロパティが反映され、上書きされない限り、上書きされません。

あなたの答え