アダプティブ内部要素_html/css_WEB-ITnose

デザイン シーン

---

• 要素に固定の高さを指定しない場合、要素はそのコンテンツの高さに基づいて調整されます。 width も同様の動作をすることを願っています

アプリケーション シナリオ

---

実際のアプリケーション シナリオを示すために画像を使用します:

perfect.png

分析:

• 幅は 外部要因 ではなく、内部要因によって決定されます
• 水平方向のセンタリング

昔ながらのソリューション

---

• コード構造

  <p>文本</p><figure>  <img src="" alt="" width="" height="" />  <figcaption>标题/描述</figcaption></figure><p>文本</P>

• 正しい幅を取得し、Figure 要素をフロートさせましたが、それによって新たな問題が発生し、全体のレイアウト モードが変更されました

float.png

• Figure 要素に display: inline-block を適用して、内容に基づいてサイズを決定できるようにします。これにより、正しい幅を実現できますが、水平方向に中央揃え< 🎜 になります。 >上記の実装は少し面倒です。text-align: cener 属性を親要素に適用し、次に text-align: left<🎜 を all に設定する必要があります。中央揃えする必要のない子要素 > 属性

inline-block.png

新しいスタイルのソリューション

---

説明:

figure {    max-width: 502px;    max-width: min-content;    margin: 20px auto;}figure > img {    max-width: inherit;}

min-content
• 属性。このコンテナ内の最大の分割不可能な要素 (固定幅の最も幅の広い単語、画像、または要素) の幅を取得します。 )、ここで非常に重要な役割を果たします 関数 ブラウザ互換性のためのフォールバック スタイルを作成します

《CSS SECRETS》