Css

css:パディングパーセンテージの詳細な説明



Css Detailed Explanation Padding Percentage



今日は、私たちがよく使用するCSSプロパティのパディングを紹介します。しかし、それは私たちがあまり使用しない値を持っています、そしてそれはパーセンテージです!

パディング率の特徴:

パディングのパーセンテージは、親要素の幅に関連しています。親要素に幅がある場合、それは親要素の幅を基準にしています。そうでない場合は、親要素の幅を見つけます。幅がない場合は、画面の幅を基準にしています。



1.パディングのすべての値は画面幅に関連しています

The bad scenery, the plane that was sent in time, the hitting the plane, the place, the bad scenery, the plane that was sent in time .padding-test { width: 200px height: 100px padding-top: 25% padding-bottom: 25% border: 1px solid red }

2.パディングのすべての値は、親要素の幅を基準にしています



.padding-wrap { width: 400px } .padding-test { width: 200px height: 100px padding-top: 25% padding-bottom: 25% border: 1px solid red }

要素の高さはそれ自体の幅の半分です

1.パディングを使用して

body { margin: 0 } .inner { text-align: center background: blue color: #fff padding: 25% 0 height: 0 } A

2.vwを使用して達成する

body { margin: 0 } .inner { text-align: center background: blue color: #fff width: 100vw height: 50vw }

vwの互換性は次のとおりです。



この図は、vwのサポートを示しています。 PC側では、IEのサポートは特に良くなく、他のすべては問題ありません。携帯端末の場合、AndroidやiOSは基本的に問題ありません。 Android4.4およびiOS8以降がサポートされています。

パディング率の使用シナリオ

PC側では画像の幅と高さを自由に設定できますが、モバイル側ではハンドヘルドデバイスごとに画面の幅が異なるため、全画面で固定の幅と高さを設定することはできません。画像。現時点では、パディングは非常に便利です。画像に固定アスペクト比を設定するか、画像の外層に固定アスペクト比ボックスを追加して、画像の自己適応を実現できます。