反応型ビデオを作る時ではないのになぜpadding-topを使うのですか?

7218 ワード

テキストリンク

🤔反応型ビデオを作る時ではないのになぜpadding-topを使うのですか?

YouTube動画をiframe要素に含めてお見せしたいと思います.これが全てだけど
これが事件の起因だ

反応型映像を作成しました.😏😏😏
しかし、コードが読めません.

「パーセンテージダウンタワーを使用すると、画像の高さが反転します」
これはどういう意味ですか.
この質問に答えるために、特別講座を用意しました...

第1話全席完売記念ダウンジャケットタワー割れ

私はここで共有した物語を共有します.

問題の鍵は相対長さの単位%にある。

コードを振り返ってみましょう.
CSSコード

	body {
        margin: 0;
        padding: 0;
      }
      .cont-video {
        position: relative;
        padding-top: 56.25%;
      }
      .video-next-level {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

htmlコード

<article class="cont-video">
      <iframe
        class="video-next-level"
        src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
        title="YouTube video player"
        frameborder="0"
        allowfullscree 
      ></iframe>
    </article>

親要素bodyに対する%値の値はwidthであるため、親要素の幅に対して高さがある.

正しい表現は構図の影響を受ける

この言葉は私の頭を混乱させた.
一つ一つ見てみましょう.

1.親要素の高さが決定されていないため、子要素の高さのパーセントを指定できません。

サブエレメントの高さの値を指定するとメンテナンスが難しくなり、内側のレイヤーの塗りつぶしや内容が高さに蓄積されるため、より高い値を特定するのは難しいです.

2.要素のサイズと位置は、ブロックを含む影響を受けます。

サブエレメントには高さの値、すなわち、フィラーラインの内側の高さ+コンテンツの高さがあります.

既定では、要素の高さはwidthとheightの値で、外角線に基づいて内側の内容と塗りつぶしが加算されます.これらのプロパティのため、divボックスにバックグラウンドカラーを追加し、塗りつぶしのみを追加すると、divボックスはコンテンツとして画面に印刷されます.

4方向のダウンジャケット値を与えたが、ブロックレベル要素の特性により左右両側に背景色があり、上下100 px、合計200 pxであった.childの高さ値は200 px,width値は100%であった.

3.ダウンタワーの価格を設定すると、内容によって上の方に行くと、体が大きくなります。

ダウンジャケットの上部に値を付けると、その値は内容に対して上向きになるので、スタイルが大きくなります.

ここまで理解すればもうすぐ
この時、私たちの難関は、%単位で現れた.

ソースパッケージ
ここの表を見てください.
説明%単位は、親要素に対するパーセント単位です.
このスタイルでDevboxを見直す

このdivボックスの親要素はbodyです.この値は、ボディの幅が100%であることに基づいて使用します.この時、ダウンジャケットタワーに100%の価格を代入するとどうなりますか?

ダウンジャケットタワーの位置を100%(水平100%)に押し上げ、水平100%、垂直100%の正方形を生成します.
50%はどうなりますか?
50%のダウンジャケットをあげると、幅100%の節全体を私の位置から50%上げるだけで、高さ50%の矩形を作ることができます.

理解しましたか?ここまでできるよ正常です.見続けましょう.
ビデオの割合は2:1です.幅2、高さ1.通常、YouTubeまたはビデオは16:9の割合で使用されるため、この値は56.26%;です.

ダウンジャケットタワー技術は反応型ビデオだけではない。

YouTubeビデオだけでなく、さまざまな画像のサイトもロードできる一般的な方法です.これは、サーバが画像のwidth、height値を予め受信し、下位層:%を満たす比を生成するため、非常に一般的なWebパフォーマンス最適化方法である.
もちろん、IEが世界に存在しなければaspect-ratio:16/9;属性は天下無敵.ほほほ、ダウンジャケットはいらないし、子供の要素もいらない.

アスペクト比aspect-ratioプロパティ

このアトリビュートは、自動サイズやその他のレイアウト機能を計算するボックスの既定のアスペクト比を設定します.

aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

値はautoとratioです.

auto-唯一のアスペクト比で置き換えられた要素は、アスペクト比を使用します.それ以外の場合は、ボックスにデフォルト値はありません.

ratio-ボックスのデフォルトのアスペクト比はwidth/です.height. heightと前のスラッシュ文字を省略すると、デフォルトheightは1になります.選択したアスペクト比に関連する寸法計算は、指定したボックスの寸法で実行されます.
コメントサイト
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio