マージン/パディングのパーセンテージ値を賢く使用して、高い適応性を実現します (主にちらつきを避けるためにスペースを占有するために使用されます)_html/css_WEB-ITnose

基本的だが混乱しやすい CSS の知識ポイント

この記事は、基本的だが混乱しやすい CSS の知識ポイントに依存しています: margin/padding が、左/右かどうかに関係なく、パーセンテージの形式で値を取る場合上/下はすべて親要素の幅に基づいています。

left/right は親要素の幅を基準にするのはわかりやすいと言われるかも知れませんが、top/bottom もなぜ親要素の幅を基準にするのでしょうか？

1. 高さに応じたスペース占有率

次のようなシナリオがあるとします。画像は正方形です（実際にはアスペクト比が固定されている限り、正方形は例の便宜上使用されています）。

PC側で行うのは簡単です。コンテナの幅と高さをpxで記述するので、画像が読み込めなくてもコンテナが変形することはありません。しかし、モバイル側では、各モデルの解像度が違いすぎるため、ピクセルを記述することは絶対に不可能です。結局のところ、適応を達成するにはパーセンテージに依存する必要があります:

コンテナの幅を 50% に設定します。 1 行に 2 つのコンテナーがあり、それぞれが画面幅の半分を占めていますが、問題ありません。

コンテナの幅を取るために画像の幅を 100% に設定しても問題ありません。

コンテナの幅と高さの参照オブジェクトが異なるため、コンテナの高さを設定できません。また、高さと幅は一致している必要があるため、コンテナのパーセンテージを設定することによっては実現できません。コンテナの高さだけを拡張できます。

1. 画像が正方形の場合、画像の高さは画像の幅と一致します、つまりコンテナの幅と同じで大丈夫ですよね？実際、ブラウザが画像をロードする前は画像の高さはゼロであるため、コンテナを開く方法はありません。このように、画像がすぐにロードされたとしても、コンテナは画像のロードの前後で変形します。このプロセスは一般に「フラッシュ」として知られており、画像をロードできない場合、全体のレイアウトはさらに見苦しくなります。

2. ここで、画像自体に頼らずにコンテナの高さをどのように拡張するかという問題が生じました。

3. コンテナのpadding-bottom/topを設定します

4. マージン/パディングのパーセンテージ値を使用して適応高さを解決するための鍵は次のとおりです: コンテナのマージン/パディングのパーセンテージ参照は親要素の幅です。 、コンテナの幅のパーセンテージ。参照オブジェクトは親要素の幅でもあり、2 つの属性の参照オブジェクトは同じであるため、これら 2 つの属性の値を統一するのは非常に簡単です。
   最適化計画は次のとおりです。padding-top/padding-bottom をコンテナーの幅と同じ値 (パーセンテージ) に設定します。

1 <div id="container" class="placeholder"></div>

1 #container {2   width: 50%;  //父元素宽度的一半3   background-color: red;  //仅为了方便演示}4 .placeholder {5   padding-top: 50%; //与width: 50%;的值保持一致，也就是相当于父元素宽度的一半。6 }

その結果、コンテナの視覚効果は次のようになります:

コンテナのボックス モデルは次のとおりです:

ボックス モデルからわかるように、コンテナのコンテンツの高さは次の理由により 0 です。コンテンツは同じ幅でパディングされるため、全体的な視覚効果が引き伸ばされているように見えます。このソリューションのブラウザー互換性は非常に優れています。唯一の欠点は、max-height 属性はコンテナーに設定できないことです。これは、max-height はコンテンツの高さのみを制限できますが、パディングは制限できないためです (私は当初、box-sizing を設定する必要があると考えていました)。 : border-box; max-height にパディングを制限させることはできますが、個人的なテストでは無効です)

コンテナを開くために子要素/疑似要素のマージン/パディングを設定します

上記の解決策から、次のことが可能ですmax-height が失敗する理由は、コンテナの高さが元々パディングはサポートされているものの、コンテンツの高さが 0 であるため、max-height が機能しないことであることを確認してください。これを最適化する唯一の方法は、パディングではなくコンテンツの高さを使用して拡張することです。この解決策は、フローティングを排除するために使用される解決策と非常によく似ています。つまり、子要素/疑似要素をコンテナに追加し、子要素/疑似要素を追加します。 -要素をコンテナに追加し、実際の高さがコンテナの幅と同じになるように、margin/padding を 100% に設定します。このようにして、コンテナの高さを幅と一致させることができます。子要素の追加は HTML セマンティクスに反するため、この解決策を実装するには疑似要素 (:after) を使用することをお勧めします。

1 <div id="container" class="placeholder"></div>

#container {  width: 50%;  position: relative;  background-color: red;  overflow: hidden;  //需要触发BFC消除margin折叠的问题}.placeholder:after {  content: '';  display: block;  margin-top: 100%; //margin 百分比相对父元素宽度计算}

この時点の視覚効果は前のソリューションと同じです。この時点でコンテナのボックス モデルに注目してみましょう:

コンテナのコンテンツの高さが変化していることがわかります。現時点では、コンテナの高さを max-height で制限できないことを心配する必要はありません。

また、margin を使用する場合は、margin の折り畳みの問題を考慮する必要があります (参考) が、padding にはこの問題はありません。

コンテナ内にコンテンツを追加する方法

上記の解決策は、コンテナのコンテンツに依存せずにコンテナを開く方法のみを説明しています。したがって、コンテナを開いた後、コンテンツ（写真、テキストなど）を追加する方法について説明します。コンテナは？

答えは非常に簡単です。position:Absolute;を使用することです。

1 <div id="container" class="placeholder">2   <img src="http://img.arrayhuang.cn/product/miya-1060079/multiple/0.jpg@1e_415w_415h_1c_0i_1o_1x.jpg" />3 </div>

 1 #container { 2   width: 50%; 3   position: relative; 4   background-color: red; 5   overflow: hidden;  //需要触发BFC消除margin折叠的问题 6 } 7 .placeholder:after { 8   content: ''; 9   display: block;10   margin-top: 100%; //margin 百分比相对父元素宽度计算11 } 12 img {13   position: absolute;14   top: 0;15   width: 100%;16 }

Backfill

幅と高さを一貫性なく調整するにはどうすればよいですか?

友達の中には、上記のすべての状況で幅と高さが一致しているのですが、一致していない場合はどうすればよいのかと尋ねるかもしれません。実際、アダプティブの重要な点は、要素の幅と高さが一定の比率を維持する必要があることです。たとえば、幅と高さが一定の場合、比率は 1:1 になり、幅が高さの 2 倍の場合、次のようになります。この比率が明確で固定されている限り、マージン/パディングのパーセンテージ値を変更するだけで、さまざまな幅と高さの比率に適応できます。

他に幅と高さに適応するソリューションはありますか?

もちろん、たとえば、css3 で導入された新しい長さの単位 vw は、画面の幅に基づいています。要素の幅と高さが vw 単位を使用している限り、幅と高さを簡単に同じに設定できます。ただし、css3 であるため、ブラウザの互換性には間違いなく問題があります:

概要

適応性の本質は幅にあり、マージン/パディングの設定パーセンテージは、要素の高さを適応的にできないという欠点を補います。要素の幅と一致します。