幅値max / minのコンテンツとフィット感・コンテンツでCSS3:戦闘へのWebフロントエンドの取得

コンテンツベースの方法を実現するための最小コンテンツとフィット・コンテンツ、フィルavailablea、サイズの計算、最​​大-内容:幅の新しいCSS3の属性値で。

それぞれ、これら3つの属性の重要性を紹介:

1.fill-利用可能な意味-自動的に残りのスペースを埋めるには
どんなスタイルなしのdivを持つことで、ブラウザが自動的にプレゼンテーションのスタイルに合わせて満たされる満たされた100%の幅のスタイルです。ボックスは、モデルに応じて、ブロック内だけでなく、要素が自動的スタイルで提示することができるインラインブロック内のスペースを埋めるも(インラインブロックは収縮特性を有することをここパッケージ収縮のインラインブロック要素)、このようなAを示すことができます。

div { display:inline-block; width:fill-available; }

2.maxコンテンツ分含量、及びそれが最大値と最小値の幅を追跡する一定の幅を持って、収縮しません。

3.fitコンテンツ属性幅:同時に内側センタリング効果の自動適応実装要素:フィットコンテンツ要素が収縮効果を実現することができるが、水平状態を維持するために、元ブロックは、その後、直接マージンを使用することができます。適応divの幅は100%ではありませんが、コンテンツのサイズ。良いを達成するために、レベルのブロック要素が中心。

撮影画像の下には4つのプロパティのパフォーマンスを反映しています

幅値max / minのコンテンツとフィット感・コンテンツでCSS3:戦闘へのWebフロントエンドの取得

要素の内容は、線幅を超えていない場合には、幅が最終的な内容の幅であるMAX-コンテンツとフィット・コンテンツ、:ことを言及する必要があります。線幅を超える場合には、MAX-コンテンツのパフォーマンスをラップしていなかった、水平スクロールバーが表示され、フィット感・コンテンツは、パフォーマンスをラップします。

互換性:

幅値max / minのコンテンツとフィット感・コンテンツでCSS3:戦闘へのWebフロントエンドの取得

コードは以下の通りであります:

学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(从零基础开始到前端项目实战教程,学习工具,职业规划)
<style>
    .dom{
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content; 
    }
</style>

おすすめ

転載: blog.51cto.com/14592820/2459790