CSS3 変換が HTML ドキュメント フローに与える影響
htmlはいつも本当に素晴らしいです
「ハードウェアアクセラレーション」から来ています
暇なときにまとめた、年の初めのメモ。
多くのオンライン記事では、ページのレンダリング速度とアニメーションの流暢性を向上させるために、ブラウザーのハードウェア アクセラレーションをオンにすることをお勧めします。これは、実際に役立つかどうかに関係なく、多くの人のページ作成のほぼ標準機能になっています:
html，body {
transform: translate3d(0,0,0);
}しかし、多くの場合、HTML レベルのドキュメント フローに「異常」を引き起こします。
W3C 仕様には次の説明があります:
HTML 名前空間では、変換に none 以外の値を指定すると、スタッキング コンテキストと包含ブロックの両方が作成されます。
オブジェクトは、固定位置の子孫の包含ブロックとして機能します。 .
の意味:
HTML では、スタックされたオブジェクトとコンテナ ブロックの両方である DOM を変換する transform ほど無意味なものはありません。 transform 变换更没有意义的了。
这类对象也扮演着 positioned(主要是 absolute/fixed ) 子孙元素容器的角色。
。。。翻译能力有限，不理解的人估计这句话看了后更晕，下面详述。
标准文档流
页面中的 dom 元素按照其在 HTML 中的标签位置顺序进行从上到下、从左往右的排布过程
想必大家对这个基础的定义已经很熟悉了吧。但是，这个究竟在实际中有什么体现呢？
如果你在页面中放置一大堆 display: inline-block 的元素，它们会很乖巧的 上 -> 下 左 -> 右 排的很整齐。这就是标准文档流的基础体现。
当你用position、float等属性使其脱离文档流时，就会又产生一个页面 层级 的概念。(扯远了...)
transform 改变定位默认属性
例子代码如下：
<body> <header style="position: fixed; top: 0; width: 100%; background: red;">header</header> <p style="height: 2000px;"></p> <footer style="position: fixed; bottom: 0; width: 100%; background: blue;">footer</footer> </body>
点击查看例子
dom 元素的默认定位属性是 position: static; 这也是标准文档流的标准定位方式。
例子中，不管 p 怎么上下滚动，header 和 footer 会永远置于屏幕的最上和最下部。
但是如最初所述，给 body 或 html 加上一个 transform: translate3d(0,0,0);，你再去试，就会发现，原本 position: fixed; 的两个元素都不听话了，会随着屏幕进行滚动。
实际上，position: fixed; 的参考对象并不是大家所说的屏幕，而是一个 viewport 的html对象，一般地一个页面(document.documentElement)会生成一个 viewport。
你用 document.documentElement.clientHeight 就可以的看到实际 viewport 的高度，其中 fixed 的元素都是以此为容器进行定位的。
body(或html) 加了 transform 属性以后，整个 body DOM 既会产生相应的变换，但此时的“整个”仅是指 body 下标准文档流元素，对于那些 position: absolute; / position: fixed; 元素，因为已经脱离了 body 所属的文档流，所以无法凭借 body 的变换使自己也自然的达到相应的变换效果。
此时，浏览器为了让此类 DOM 得到相应的变化，会产生一个新的 viewport，这个 viewport 作为定位元素的容器存在，会响应 body 的 transform 变换效果，从而让里面那些脱离文档流的 positioned 元素也能进行变换。
这个 viewport 会严重影响 position: fixed; 的定位，当它随着“本尊”dom同步滚动的时候，会带着 fixed 元素一块滚，此时会产生一种类似 absolute 的诡异效果：
fixed 元素似乎变成了 absolute，存在于一个和document.documentElement大小一致的“看不见”容器内。
引申情况
在一些移动端设备(或APP)上，给 <video> 标签的播放默认开启的硬解码，此时也会产生上述现象，视频会"浮"在页面上面，不会随页面元素正常滚动。
还有一些低版本移动端浏览器上，也会出现类似的情况，可按此思路尝试解决。
总结
其实上面的情况不只会发生在 body 上，一个任意的 dom 添加了 transformこのタイプのオブジェクトは、位置指定 (主に絶対/固定) 子孫要素コンテナーの役割も果たします。
。 。 。私の翻訳能力には限界があるので、理解できない人はこの文を読んでさらに混乱するかもしれません。詳細は以下のとおりです。ページ内の dom 要素は、HTML のタグ位置の順序に従って上から下、左から右に配置されますこれは誰もがよく知っていると思います基本的な定義はすでによく知られています。しかし、これはどのように実践に移されるのでしょうか?
標準的なドキュメント フロー
ページに多数の
display: inline-block要素を配置すると、top->bottomleft->rightきれいに整理されています。これは、標準ドキュメント フローの基本的な実施形態です。
position や float などの属性を使用してドキュメント フローから分離すると、ページ level という別の概念が作成されます。 (遠すぎます...)transform はデフォルトの位置属性を変更しますコード例は次のとおりです:
html，body {
transform: translate3d(0,0,0);
}position: static です; これも標準です ドキュメント ストリームを配置する標準的な方法です。 🎜🎜この例では、p がどのように上下にスクロールしても、ヘッダーとフッターは常に画面の上部と下部に配置されます。 🎜🎜しかし、最初に述べたように、transform:translate3d(0,0,0); を body または html に追加すると、次のようにすることができます。試してみると、もともと position:fixed; の 2 つの要素が従属せず、画面とともにスクロールすることがわかります。 🎜🎜実際、position:fixed; の参照オブジェクトは、一般にスクリーンと呼ばれるものではなく、viewport の HTML オブジェクト、通常はページ ( document. documentElement) はビューポートを生成します。 🎜🎜 document.documentElement.clientHeight を使用すると、実際のビューポートの高さを確認できます。fixed 要素は、これをコンテナとして使用して配置されます。 🎜🎜 transform 属性を body (または HTML) に追加すると、body DOM 全体が対応する変換を受けますが、現時点での「全体」とは、 body.ドキュメント フロー要素。これらの position:Absolute; / position:fixed; 要素は、本文が属するドキュメント フローから分離されているため、これらの要素は使用できません。身体の変化に依存して自分自身を変化させ、対応する変化効果を自然に達成します。 🎜🎜現時点では、このタイプの DOM に対応する変更を加えるために、ブラウザーは新しいビューポートを生成し、要素を配置するためのコンテナーとして存在し、transform 変換エフェクトに応答します。これにより、ドキュメント フローの外にある positioned 要素も変換できるようになります。 🎜🎜このビューポートは、position:fixed; の位置に重大な影響を及ぼします。「self」dom と同期してスクロールすると、fixed 要素とともに回転します。 absolute に似た奇妙な効果を生成します: 🎜🎜fixed 要素は absolute になり、document .documentElement に存在するようです。コード>同じサイズの「目に見えない」コンテナ内。 🎜🎜状況の拡大🎜🎜一部のモバイルデバイス（またはアプリ）では、ハードデコードによる<video>タグの再生がデフォルトで有効になっており、このとき上記の現象も発生します。ビデオは「フローティング」します。「ページ上では、ページ要素とともに正常にスクロールしません。 🎜🎜同様の状況は、一部の低バージョンのモバイル ブラウザでも発生します。この考え方に従って解決してみてください。 🎜🎜概要🎜🎜 実際、上記の状況は body でのみ発生するわけではありません。transform を追加すると、どの dom でもビューポートのような効果が生成されます。行ってみることができます。 🎜🎜🎜引用:🎜http://www.php.cn/🎜🎜🎜🎜🎜🎜html いつも本当に素晴らしいです🎜🎜🎜は「ハードウェアアクセラレーション」から来ています🎜🎜🎜🎜今年の初めにまとめたメモ私の暇な時で 。 🎜 多くのオンライン記事では、ページのレンダリング速度とアニメーションの流暢さを向上させるために、ブラウザーのハードウェア アクセラレーションをオンにすることをお勧めします。これは、実際に役立つかどうかに関係なく、多くの人のページ作成の標準機能になっています:
html，body {
transform: translate3d(0,0,0);
}ログイン後にコピーログイン後にコピーログイン後にコピーログイン後にコピー
しかし、多くの場合、HTML レベルのドキュメント フローに「異常」を引き起こします。
W3C 仕様には次の説明があります:
HTML 名前空間では、変換に none 以外の値を指定すると、スタッキング コンテキストと包含ブロックの両方が作成されます。
オブジェクトは、固定位置の子孫の包含ブロックとして機能します。 .
の意味:
HTML では、スタックされたオブジェクトとコンテナ ブロックの両方である DOM を変換する transform ほど無意味なものはありません。 transform 变换更没有意义的了。
这类对象也扮演着 positioned(主要是 absolute/fixed ) 子孙元素容器的角色。
。。。翻译能力有限，不理解的人估计这句话看了后更晕，下面详述。
标准文档流
页面中的 dom 元素按照其在 HTML 中的标签位置顺序进行从上到下、从左往右的排布过程
想必大家对这个基础的定义已经很熟悉了吧。但是，这个究竟在实际中有什么体现呢？
如果你在页面中放置一大堆 display: inline-block 的元素，它们会很乖巧的 上 -> 下 左 -> 右 排的很整齐。这就是标准文档流的基础体现。
当你用position、float等属性使其脱离文档流时，就会又产生一个页面 层级 的概念。(扯远了...)
transform 改变定位默认属性
例子代码如下：
<body>
<header style="position: fixed; top: 0; width: 100%; background: red;">header</header>
<p style="height: 2000px;"></p>
<footer style="position: fixed; bottom: 0; width: 100%; background: blue;">footer</footer>
</body>
ログイン後にコピーログイン後にコピー
点击查看例子
dom 元素的默认定位属性是 position: static; 这也是标准文档流的标准定位方式。
例子中，不管 p 怎么上下滚动，header 和 footer 会永远置于屏幕的最上和最下部。
但是如最初所述，给 body 或 html 加上一个 transform: translate3d(0,0,0);，你再去试，就会发现，原本 position: fixed; 的两个元素都不听话了，会随着屏幕进行滚动。
实际上，position: fixed; 的参考对象并不是大家所说的屏幕，而是一个 viewport 的html对象，一般地一个页面(document.documentElement)会生成一个 viewport。
你用 document.documentElement.clientHeight 就可以的看到实际 viewport 的高度，其中 fixed 的元素都是以此为容器进行定位的。
body(或html) 加了 transform 属性以后，整个 body DOM 既会产生相应的变换，但此时的“整个”仅是指 body 下标准文档流元素，对于那些 position: absolute; / position: fixed; 元素，因为已经脱离了 body 所属的文档流，所以无法凭借 body 的变换使自己也自然的达到相应的变换效果。
此时，浏览器为了让此类 DOM 得到相应的变化，会产生一个新的 viewport，这个 viewport 作为定位元素的容器存在，会响应 body 的 transform 变换效果，从而让里面那些脱离文档流的 positioned 元素也能进行变换。
这个 viewport 会严重影响 position: fixed; 的定位，当它随着“本尊”dom同步滚动的时候，会带着 fixed 元素一块滚，此时会产生一种类似 absolute 的诡异效果：
fixed 元素似乎变成了 absolute，存在于一个和document.documentElement大小一致的“看不见”容器内。
引申情况
在一些移动端设备(或APP)上，给 <video> 标签的播放默认开启的硬解码，此时也会产生上述现象，视频会"浮"在页面上面，不会随页面元素正常滚动。
还有一些低版本移动端浏览器上，也会出现类似的情况，可按此思路尝试解决。
总结
其实上面的情况不只会发生在 body 上，一个任意的 dom 添加了 transformこのタイプのオブジェクトは、位置指定 (主に絶対/固定) 子孫要素コンテナーの役割も果たします。
。 。 。私の翻訳能力には限界があるので、理解できない人はこの文を読んでさらに混乱するかもしれません。詳細は以下のとおりです。
標準的なドキュメント フロー
ページ内の DOM 要素は、HTML 内のタグ位置の順序に従って上から下、左から右に配置されます
🎜おそらくこの基本的な定義は誰もがすでによく知っています。しかし、これはどのように実践に移されるのでしょうか? 🎜🎜 ページに多数の display: inline-block 要素を配置すると、top->bottomleft->rightきれいに整理されています。これは、標準ドキュメント フロー の基本的な実施形態です。 🎜🎜 position や float などの属性を使用してドキュメント フローから分離すると、ページ level という別の概念が作成されます。 (遠すぎます...)🎜transform はデフォルトの位置属性を変更します
🎜 コード例は次のとおりです:🎜 html，body {
transform: translate3d(0,0,0);
}ログイン後にコピーログイン後にコピーログイン後にコピーログイン後にコピー🎜クリックして例を表示します🎜🎜 dom 要素のデフォルトの位置属性は position: static; code> これは、標準ドキュメント ストリームの標準位置決め方法でもあります。 🎜🎜この例では、p がどのように上下にスクロールしても、ヘッダーとフッターは常に画面の上部と下部に配置されます。 🎜🎜しかし、最初に述べたように、transform:translate3d(0,0,0); を body または html に追加すると、次のようにすることができます。試してみると、もともと position:fixed; の 2 つの要素が従属せず、画面とともにスクロールすることがわかります。 🎜🎜実際、position:fixed; の参照オブジェクトは、一般にスクリーンと呼ばれるものではなく、viewport の HTML オブジェクト、通常はページ ( document. documentElement) はビューポートを生成します。 🎜🎜 document.documentElement.clientHeight を使用すると、実際のビューポートの高さを確認できます。fixed 要素は、これをコンテナとして使用して配置されます。 🎜🎜 transform 属性を body (または HTML) に追加すると、body DOM 全体が対応する変換を受けますが、現時点での「全体」とは、 body.ドキュメント フロー要素。これらの position:Absolute; / position:fixed; 要素は、本文が属するドキュメント フローから分離されているため、これらの要素は使用できません。身体の変化に依存して自分自身を変化させ、対応する変化効果を自然に達成します。 🎜🎜現時点では、このタイプの DOM に対応する変更を加えるために、ブラウザーは新しいビューポートを生成し、要素を配置するためのコンテナーとして存在し、transform 変換エフェクトに応答します。これにより、ドキュメント フローの外にある positioned 要素も変換できるようになります。 🎜🎜このビューポートは、position:fixed; の位置に重大な影響を及ぼします。「self」dom と同期してスクロールすると、fixed 要素とともに回転します。 absolute に似た奇妙な効果を生成します: 🎜🎜fixed 要素は absolute になり、document .documentElement に存在するようです。コード>同じサイズの「目に見えない」コンテナ内。 🎜拡張機能
🎜一部のモバイル デバイス (またはアプリ) では、ハード デコードによる <video> タグの再生がデフォルトで有効になっており、上記の現象も発生します。この時点では、ビデオはページ上で「フローティング」し、ページ要素と一緒に通常はスクロールしません。 🎜🎜同様の状況は、一部の低バージョンのモバイル ブラウザでも発生します。この考え方に従って解決してみてください。 🎜概要
🎜 実際、上記の状況は body で発生するだけでなく、 transform を追加すると、どの dom でもビューポートのような効果が生成されます。興味があれば試してみることができます。 🎜🎜 HTML ドキュメント フローに対する CSS3 変換の影響に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。 🎜🎜🎜
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7700
15
1640
14
1393
52
1287
25
1230
29
純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例)
Jun 28, 2022 pm 01:39 PM
純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。
CSS を使用して要素の背景の回転アニメーション効果を実現する方法
Nov 21, 2023 am 09:05 AM
CSS を使用して要素の回転背景画像アニメーション効果を実装する方法 背景画像アニメーション効果は、Web ページの視覚的な魅力とユーザー エクスペリエンスを向上させることができます。この記事では、CSS を使用して要素の背景の回転アニメーション効果を実現する方法を紹介し、具体的なコード例を示します。まず、背景画像を用意します。太陽や扇風機など、好きな画像を使用できます。画像を「bg.png」という名前で保存します。次に、HTML ファイルを作成し、ファイルに div 要素を追加して、次のように設定します。
CSSを上手に使って色々な変わった形のボタンを実現（コード付き）
Jul 19, 2022 am 11:28 AM
この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。
スペースを取らずにCSS内の要素を非表示にする方法
Jun 01, 2022 pm 07:15 PM
2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。
CSS3でレースボーダーを実装する方法
Sep 16, 2022 pm 07:11 PM
CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレース スタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。
CSS3でマウスクリックで画像を拡大する方法
Apr 25, 2022 pm 04:52 PM
実装方法: 1. ":active" セレクターを使用して、画像上のマウス クリックの状態を選択します; 2. 変換属性とscale() 関数を使用して、画像の拡大効果を実現します。構文 "img:active {transform : スケール(x 軸倍率、y 軸倍率);}"。
テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。
Jun 10, 2022 pm 01:00 PM
テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。
Vue で画像を圧縮してフォーマットするにはどうすればよいですか?
Aug 25, 2023 pm 11:06 PM
Vue で画像を圧縮してフォーマットするにはどうすればよいですか?フロントエンド開発では、画像を圧縮してフォーマットする必要が生じることがよくあります。特にモバイル開発では、ページの読み込み速度を向上させ、ユーザーのトラフィックを節約するために、画像を圧縮してフォーマットすることが重要です。 Vue フレームワークでは、いくつかのツール ライブラリを使用して画像を圧縮およびフォーマットできます。 compressor.js ライブラリを使用した圧縮 compressor.js は画像を圧縮するための JavaS です。
