純粋なCSSで立体的な画像配置効果を実現するサンプルコード

1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準

要素の幅/高さ/パディング/マージンのパーセンテージを設定するときのベンチマークが何かをご存知ですか?

例えば：

。親 {
  幅: 200ピクセル;
  高さ: 100px;
}
。子供 {
  幅: 80%;
  高さ: 80%;
}
.childchild {
  幅: 50%;
  高さ: 50%;
 パディング: 2%;
  マージン: 5%;

}

<div class="parent">
        <div class="child">
            <div class="childchild"></div>
        </div>
    </div>

上記のコードでは、childchild 要素の幅はどれくらいでしょうか?高さとは何ですか？パディングとは何ですか?マージンとは何ですか?

要素の高さのパーセンテージは親要素の高さに基づいており、要素の幅、パディング、およびマージンのパーセンテージは親要素の幅に基づいています。

これで皆さんももうお分かりだと思います。ぜひ試してみてくださいね〜

面接では、アダプティブスクエアを実装するという簡単な CSS スタイルの質問によく遭遇します。原理は上記の知識に基づいています。ただ必要なだけ

＃箱 {
            幅: 50%;
            パディング上部: 50%;
            背景: #000;
        }

要素の幅とパディングの基本値は両方とも親要素の幅であり、本体の幅はブラウザウィンドウであるため、この設定により、ブラウザウィンドウのサイズが変わっても正方形が適応するようになります。

2. 純粋なCSSを使用して3次元画像配置効果を実現します。

さて、本題に戻りますが、次の図に示す画像の 3 次元配置効果を実現するには、パディング、幅、高さの知識を適用する必要があります。

ちょっと見覚えがありますね。小説ソフトのおすすめ本のスタイルに似ているのでしょうか？

ここでは、まずその配置を見てみましょう。1枚の絵は水平中央で正面に配置され、他の2枚の絵は左右に少し後ろに並んでおり、立体的な配置になっています。ここでは、CSS だけに頼ってこの 3 次元効果を実現する方法を学びました。

異なる高さは、大きいまたは小さい padding-top によってサポートされます。 · 前後の効果は、Z インデックスの折りたたみ順序によって制御されます。配置は、n 番目のタイプの疑似要素 + 位置によって制御されます。

何か考えはありますか？遠回しにせず、すぐにコードを見てみましょう。

<html>
    <ヘッド>
        <スタイル>
            * {
                マージン: 0;
                パディング: 0;
            }
            。箱 {
                幅: 300ピクセル;
                高さ: 200px;
                位置: 相対的;
            }
            .img {
                幅: 自動;
                高さ: 0;
            }
            .box 画像 {
                幅: 100%;
                表示: インラインブロック;
            }
            .box .img:n番目のタイプ(1) {
                表示: インラインブロック;
                位置: 絶対;
                左: 50%;
                上位: 50%;
                パディング下部: 50%;
                変換: translate(-50%, -50%);
                zインデックス: 6;
            }
            .box .img:n番目の型(2), .box .img:n番目の型(3) {
                位置: 絶対;
                上位: 50%;
                変換: translateY(-50%);
                パディング下部: 63%;
                zインデックス: 3;
            }
            .box .img:n番目のタイプ(2) {
                右: 0;
            }
            .box .img:n番目のタイプ(3) {
                左: 0;
            }
        </スタイル>
    </head>
    <本文>
        <div class="box">
            <div class="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
            <div class="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
            <div class="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
        </div>
    </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: HTML サブタグと sup タグ

>>: React 国際化 react-i18next の詳細な説明