知識ポイント:
1、輸入
import コマンドは CSS スタイルをインポートするために使用されます。リンク タグは外部 CSS スタイルをインポートでき、import は引き続き外部スタイルをインポートできます。
import の基本的な使用法:
1) HTML ファイルに外部スタイルをインポートします。
<style>
@import url('./index.css')
</style>@import を使用して外部 CSS ファイルを HTML ソース コードに直接インポートするには、style タグに @import を入れる必要があります。
2) CSS ファイル内に別の CSS ファイルを導入します
@import url('./index.css')
(后面书写其他样式)3) @import ルールはメディア クエリもサポートしているため、メディアに依存したインポートを許可できます。
@import "printstyle.css" print;
只在媒体为print时导入“printstyle.css”样式表
@import "mobstyle.css" screen and (max-width:768px)
只在媒体为screen且视口最大宽度768像素时导入“mobstyle.css”样式表インポートとリンクの違い:
1) Link は HTML タグであり、@import は完全に CSS によって提供されます。CSS のロード以外に、リンク タグは RSS の定義、rel 接続属性の定義など、他の多くのことも実行できます。@import は CSSl のみをロードできます。
2)読み込み順序の違い: たとえば、import を使用して a.css 内の b.css を参照する場合、ブラウザは import コマンドを使用してホスト CSS ファイル a.css の後にのみ別の b.css があることを認識します。 cssはダウンロードする必要があるのでこの時点でダウンロードされ、ダウンロード後に解析やレンダーツリーの構築などの一連の作業が開始されます。
3)互換性の違い: @import は CSS2.1 で提案されているため、古いブラウザではサポートされていません @import は IE5 以降でのみ認識されますが、リンクタグにはこの問題はありません
4) JS を使用して DOM を制御してスタイルを変更する場合、@import は DOM によって制御できないため、link タグのみを使用できます。スキン可能な Web サイトの場合、2 つの href 値を変更することで変更できます。リンクタグの未使用の外部スタイルシートを適用しますが、ラベルではないため、インポート時に操作できません。
さらに、パフォーマンス最適化の観点から、@import の使用は避けるようにしてください。@import を使用して CSS を導入すると、ブラウザの並列ダウンロードに影響があり、@import によって参照される CSS ファイルは、CSS ファイルの後にのみダウンロードおよび解析できます。それを参照するものがダウンロードされて解析されると、ブラウザはダウンロードする必要がある別の CSS があることを認識し、それをダウンロードし、ダウンロード後に解析を開始してレンダー ツリーを構築します。
@import が複数あると、ダウンロードの順序が狂います。IE では、@import によりリソース ファイルのダウンロード順序が乱れます。つまり、@import の後に配置された JS ファイルが @import より前にダウンロードされ、@import 自体の並列ダウンロードが中断または破壊されます。
2. CSS3のcalc機能
Calcとは英語のcalculate(計算)の略で、CSS3の新機能で、任意の長さ、値、時間、角度で使用できるとMDNは説明しています
頻度などの構文は次のとおりです。
width:calc(100% - 80px)一般的な +-*/ 記号は計算に使用できますが、+- はスペースで区切る必要があることに注意してください。理由は非常に簡単です。- 記号と計算された数値が近くにある場合、ブラウザはそれを考慮します。解析中 これは負の値である可能性があります。
計算されたプロパティと絶対位置を組み合わせた垂直方向のセンタリング:
父元素：
position:relative;
子元素：
position:absolute;
top:calc(50% - 自身高度的一半)
left:calc(50% - 自身高度的一半)3. CSS3 メディアクエリ
メディアクエリの正式な英語名は Media Query で、その名の通り、ユーザーが使用しているメディアをクエリします。携帯テレビなど ウェブサイトが異なる画面サイズや異なるデバイスでまったく同じに見えることを保証することはできませんが、少なくともウェブページをユーザーの端末に適応させる必要があります。CSS3 の Media Query (メディア クエリ) モジュールは、ページをさまざまな端末に適応させるために使用されます。
CSS でサポートされているメディア タイプ: 一般的に使用されるのは、all (すべて)、screen (画面)、および print (ページ印刷または印刷プレビュー モード) です。
メディアタイプの参照方法：
1) リンク メソッド: メディア タイプを導入するリンク メソッドは、次のように、リンク タグがスタイルを参照するときに、リンク タグの media 属性を通じてさまざまなメディア タイプを指定します。
<link rel="stylesheet" href="index.css" media="screen and (max-width:600px)"/>
<link rel="stylesheet" href="print.css" media="print"/>2) XML メソッド: XML メソッドは link メソッドに似ており、次のように media 属性によっても指定されます。
<? xml-stylesheet rel="stylesheet" media="screen" href="style.css" ?>3) @import: @import でメディア タイプを導入するには主に 2 つの方法があり、1 つは CSS スタイル シートの @import を通じて別のスタイル ファイルを呼び出す方法、もう 1 つはスタイル タグで導入する方法です。注: IE6 および IE7 はこの方法をサポートしていません。
スタイル ファイルにメディア タイプを導入します。
@import url（'./index.css'） screenstyle タグにメディア タイプを導入します。
<style>
@import url('./index.css') screen
</style>4) @media の方法 (一般的に使用される) : @media は CSS3 で導入された新しい機能で、メディア クエリと呼ばれます。@media がメディアを紹介するには、次の 2 つの方法もあります。
スタイル ファイルにメディア タイプを導入します。
@media screen and (max-width:600px){
具体样式
}style タグにメディア タイプを導入します。
<style>
@media screen{
具体样式
}
</style>具体的な式:
@media 媒体类型 and (媒体特性){
具体样式
}例えば：
@media screen and (min-width:480px) and (max-width:900px){
具体样式
}注:
1) not キーワード: 特定のメディア タイプとメディア特性を除外するために使用されます。
@media not print and (max-width:480px){
具体样式
}スタイル コードは、印刷デバイスと 480 ピクセル以下の画面幅を除くすべてのデバイスで使用されます。
2) 未指定のメディア タイプ: メディア クエリでメディア タイプが明示的に指定されていない場合、デフォルト値は all です。
@media (max-width:900px){
具体样式
}上記のスタイルは、画面サイズが 900 ピクセル以下のすべてのデバイスに適用されます。
4. CSS3 トランジションとアニメーション
遷移: 要素の属性が変化するときの状態を指します。
div{
width:100px;
transition:all 1s;
}
div:hover{
width:200px
}上記の例は、div 内のすべての属性が変更されるときに 1 秒間の遷移を受けることを意味します。
遷移は複合プロパティです。
transition-property: トランジションの CSS プロパティを指定します。 none: どのプロパティもトランジション効果を取得しません。 all: すべてのプロパティがトランジション効果を取得します。 property: トランジション効果を適用する CSS プロパティ名のリストとそのリストを定義します。はカンマで区切られます。すべての属性を移行できるわけではなく、中間値を持つ属性のみが移行効果を実行できます。
transition-duration: 移行が完了するまでに必要な時間を指定します。
transition-timing-function: 遷移関数を指定します。この属性は遷移の速度を設定するために使用されます。
遷移遅延: 遷移の遅延時間を指定します。遷移遅延がトリガーされる長さを秒またはミリ秒単位で指定しますが、値は正の整数、負の整数、および 0 にすることができます。
複数の要素トランジションがある場合は、カンマで区切ってください。
transition:background-color 2s,height 5s移行イベント
場合によっては、トランジション効果が終了した後に一部のコンテンツが実行され、対応するtransitionend イベントが存在します。これは、トランジション効果が終了したかどうかを監視するのに便利です。次に例を示します。
<div id="oDiv"></div>
div{
width:100px;
height:100px;
background-color:skyblue;
transition:all 3s
}
var div = document.getElementById("oDiv");
div.onclick = function(){
div.style.height = "400px"
}
div.ontransitionend = function(){
console.log("过渡结束后触发")
}CSS3 でのアニメーション:
CSS3 アニメーションを使用したアニメーションは、キーフレームでアニメーションを宣言する部分と、キーフレームで宣言されたアニメーションをアニメーション内で呼び出す部分の 2 つの部分で構成されます。
アニメーションを宣言するための構文: @keyframes アニメーション名 {keyframes-selector {css-styles;}}
アニメーション名: 必須、アニメーションの名前を定義します。
keyframes-selector: 必須、アニメーション期間のパーセンテージ、有効な値: 0 ～ 100%。
css-styles: 必須。1 つ以上の有効なスタイル。
アニメーションの使用: CSS3 のアニメーション プロパティを通じてアニメーションを呼び出す
アニメーション:名前 (バインドされるセレクターのキーフレーム名) 継続時間 (完了するまでの秒数を指定) タイミング関数 (サイクルを完了する方法) 遅延 (アニメーションが開始する前の遅延間隔を設定) 反復回数 (アニメーションの定義)アニメーション時間の再生) 方向 (アニメーションを順番に逆方向に再生するかどうかを指定します) fill-mode (アニメーションが再生されていないときに要素に適用するスタイルを指定します) play-state (アニメーションが実行中かどうかを指定します)または一時停止)
アニメーション対応イベント：
animestart : CSS アニメーションの開始後にトリガーされます。
animeiteration: CSS アニメーションが繰り返し再生されるときにトリガーされます。
animeend: アニメーションの完了後にトリガーされます
5. プログレッシブエンハンスメントとグレースフルデグラデーション
プログレッシブ エンハンスメント、英語の正式名はプログレッシブ エンハンスメントです。これは、最も基本的な機能を保証するために低バージョンのブラウザー用のページを構築し、その後、より良いユーザー エクスペリエンスを実現するために高度なブラウザー用の機能を改善および追加することを指します。
グレースフルデグラデーション、英語の正式名はgraceful degradationで、最初から完全な機能を構築してから、下位バージョンのブラウザとの互換性を持たせます。
この 2 つの概念は、「上位互換性」と「下位互換性」です。プログレッシブ エンハンスメントは上位互換に相当し、グレースフル デグラデーションは下位互換に相当します。下位互換性とは、上位バージョンのブラウザが下位バージョンをサポートすること、または、後から開発されたバージョンが以前に開発されたバージョンと互換性があることを意味します。
ユーザーグループの決定を前提に、プログレッシブエンハンスメント：低バージョンブラウザ向けに基本機能を確保したページを構築し、高度なブラウザ向けにエフェクトやインタラクションなどの機能を改良・追加してより良いユーザーエクスペリエンスを実現、グレースフルデグラデーション：1つのビルド最初から完全な機能を備え、その後、下位バージョンのブラウザと互換性を持たせることができます。
違い: グレースフル デグラデーションは複雑な現状から始まり、ユーザー エクスペリエンスの提供を削減しようとしますが、プログレッシブ エンハンスメントは基本的な機能バージョンから始まり、将来の環境のニーズを満たすために拡張されます。
たとえば、次の 2 つのコードの記述順序に注目すると、記述順序が異なっているように見えますが、実際には開発の焦点が示されています。
渐进增强写法：
transition{
-webkit-transition:all 5s;
-moz-transition:all 5s;
-o-transition:all 5s;
transition:all 5s;
}
优雅降级写法：
transition{
transition:all 5s;
-o-transition:all 5s;
-moz-transition:all 5s;
-webkit-transition:all 5s;
}プレフィックス CSS3 (-webkit-、-moz-、-o-) および通常の CSS3 のブラウザー サポートは次のとおりです。
1) かなり前: ブラウザーのプレフィックス CSS3 と通常の CSS3 はサポートされていません。
2) 少し前まで: ブラウザは通常の CSS3 ではなく、プレフィックス付きの CSS3 のみをサポートしていました。
3) 現在: ブラウザはプレフィックス CSS3 と通常の CSS3 の両方をサポートしています。
4) 将来: ブラウザはプレフィックス付き CSS3 をサポートせず、通常の CSS3 のみをサポートします。
大企業の大多数が漸進的強化手法を採用しているのは、営業マンが優先され、ユーザー エクスペリエンスの向上が最優先されることはないからです。
6. CSS変形
CSS3 で提供される変換関数:
1) X/Y を伴う関数:translateX、translateY、sclaeX、scaleY、skewX、skewY
2) 2D 変形機能: 平行移動、スクレイピング、回転、傾斜、マトリックス
3) 3D変形機能：rotateX、rotateY、rotate3d、translateZ、translate3d、scale3d、scaleZ、matrix3d
CSS3 の Transform プロパティ:
1) 変換: 変形属性;
２）transform-orign：変形の中心点の位置。
3)transform-style: 3D 空間の重要な属性で、ネストされた要素が 3D 空間でどのように表示されるかを指定します。 flat: すべてのサブ要素が 2D 空間で表示されます。preserve-3d: 左右のサブ要素が表示されることを示します。 3D 空間で表示されます。
4) 遠近法: ビューアの位置を設定するために使用され、視覚コンテンツを表示円錐にマッピングし、それを 2D 表示面にキャストできます。このプロパティが指定されていない場合、Z 軸空間内のすべての点が同じ 2D 表示平面に並べて表示され、変換結果には深さの概念がありません。簡単に理解すると、視距離はユーザーと要素の 3D 空間の Z 平面との間の距離を設定するために使用されます。効果はその値によって決まり、値が小さいほどユーザーが 3D 空間の Z 面に近づき、視覚効果がより印象的になり、逆に値が大きいほどユーザーとユーザーとの距離が遠くなります。 3D 空間の Z 面に近いほど、視覚効果がより印象的になります。
5）perspective-orign：視聴者の視点位置
6) backface-visibility 属性: 要素の回転の背面が表示されるかどうかを決定します。
2D変形：
ディスプレイスメント: 変換: 平行移動(-50%、-50%)
スケーリング: スクレー
回転：回転
傾き: スキュー
3D変形：
変位:translate3d(tx,ty,tz)
回転:rotate3d(x, y, z, a); x、y、z は 0 ～ 1 の値で、回転軸方向のベクトルです。a は回転角度を表し、正の値は時計回りを表します。回転、負の値は反時計回りの回転を示します。
ズーム: スケール(sx,sy,sz)
7. プログレッシブレンダリング
プログレッシブ レンダリング (英語の正式名称はプログレッシブ レンダリング、遅延レンダリングとも呼ばれます) は、ユーザーが認識する読み込み速度を向上させるために、ページをできるだけ早く表示するテクノロジを指します。プログレッシブレンダリングとは、特定の技術を指すのではなく、さまざまな技術の集合体を指します。例: スケルトン画面、画像の遅延読み込み、画像プレースホルダー、Web リソースの分割
8. CSS レンダリング パフォーマンスの最適化
パフォーマンス最適化の重要性: ユーザーの観点から: Web サイトの最適化により、ページの読み込みが速くなり、よりタイムリーに応答できるようになり、ユーザー エクスペリエンスが大幅に向上します。サービス プロバイダーの観点から: 最適化により、ページ リソース リクエストの数とリクエストによって占有される帯域幅が削減されます。これにより、かなりの帯域幅リソースが節約されます。
最適化方法：
1) ID セレクターを使用する
2) 深いコードを避ける
3) 属性セレクターを使用しないでください。
4) 通常、ブラウザーのプレフィックスを最初に置き、標準スタイルのプロパティを最後に置きます (プログレッシブ拡張)
5) CSSLint ルールに準拠する
6) @import を使用しないでください
7) 過剰な再配置を避ける (リフロー): リフローとは、ブラウザがレイアウトの位置とサイズを再計算することを意味します。
8) 依存関係の継承
9. カスケードコンテキスト
カスケード コンテキストを作成するには 3 つの方法があります。
1) HTML 自体のルート要素 HTML には、「ルート スタッキング コンテキスト」と呼ばれるスタッキング コンテキストがあります。
2) 通常の要素の場合、position 属性を非静的値に設定し、z-index 属性を特定の値に設定します。これにより、カスケード コンテキストが生成されます。
3) CSS3 の新しいプロパティもカスケード コンテキストを生成できます
カスケード レベルとカスケード順序:
どちらも同じスタック コンテキストにおける Z 軸上の要素の表示順序を意味し、前者は概念であり、後者は具体的なルールであるというだけです。
要約:
1) まず、比較する 2 つの要素が同じスタック コンテキスト内にあるかどうかを確認します。
「はい」の場合、誰のカスケード レベルが大きく、誰が一番上にいますか。
2 つの要素が同じスタッキング コンテキストにない場合は、最初にそれらが存在するスタッキング コンテキストのスタッキング登録を比較してください。
2) 2 つの要素が同じスタック レベルと同じスタック順序を持つ場合、DOM 構造における後者の要素のスタック レベルは前の要素よりも上になります。
3) スタック順序: z-index が正 > z-index: auto/0 > inline/inline-block 水平ボックス > float ボックス > ブロック ボックス > z-index が負 > スタッキングコンテキスト
10. CSS3マスキング
アプリケーション: 反射の設定
-webkit-box-reflect:below 15px linear-gradient(transparent 10%,blue)最初の値は反射の位置 (上、上、下、左、左、右、右) です。
2 番目の値は反射距離です。
3 番目の値はマスクです。線形グラデーションを指定できます。
面接の質問：
1. CSSの参照方法にはどのようなものがありますか? リンクと @import の違いは何ですか?
CSS 参照は次のとおりです。
1) 外部リンク、リンクタグによる外部リンクスタイルシート
2) インラインで、style タグを使用して head タグでスタイルを定義します。
3) 埋め込み、要素の開始タグの style 属性を通じてスタイルを定義します。
リンクと @import の違い:
1) Link は HTML タグであり、@import は完全に CSS によって提供されます。CSS のロード以外に、リンク タグは RSS の定義、rel 接続属性の定義など、他の多くのことも実行できます。@import は CSSl のみをロードできます。
2)読み込み順序の違い: たとえば、import を使用して a.css 内の b.css を参照する場合、ブラウザは import コマンドを使用してホスト CSS ファイル a.css の後にのみ別の b.css があることを認識します。 cssはダウンロードする必要があるのでこの時点でダウンロードされ、ダウンロード後に解析やレンダーツリーの構築などの一連の作業が開始されます。
3)互換性の違い: @import は CSS2.1 で提案されているため、古いブラウザではサポートされていません @import は IE5 以降でのみ認識されますが、リンクタグにはこの問題はありません
4) JS を使用して DOM を制御してスタイルを変更する場合、@import は DOM によって制御できないため、link タグのみを使用できます。スキン可能な Web サイトの場合、2 つの href 値を変更することで変更できます。リンクタグの未使用の外部スタイルシートを適用しますが、ラベルではないためインポート時に操作できません。
2. CSS の計算されたプロパティをご存知ですか?
つまり、calc() 関数は主に要素の長さを指定するために使用され、すべての CSS の長さ単位をサポートします。演算子の前後にはスペースを確保する必要があります。例: width: calc(100% - 50px)
3. メディアクエリを使用して、ビューポートの幅が320pxより大きく640px未満の場合にdiv要素の幅が30%になることを実現する方法
@media screen and (min-width:320px) and (max-width:640px){
div{
width:30%;
}
}4. CSS3 のトランジションとアニメーションの属性は何ですか?
トランジショントランジションアニメーション:
トランジション プロパティ: トランジションの CSS プロパティを指定します。
transition-duration: 移行が完了するまでに必要な時間を指定します。
遷移タイミング関数: 遷移関数を指定します。
遷移遅延: 遷移遅延時間を指定します。
アニメーションキーフレームアニメーション:
アニメーション名: セレクターにバインドされるキーフレームの名前を指定します。
アニメーション期間: アニメーションは完了するまでにかかる秒数を指定します。
アニメーションタイミング関数: アニメーションがサイクルを完了する方法を設定します。
アニメーション遅延: アニメーションが開始する前の遅延間隔を設定します。
anime-iteration-count: アニメーションが再生される回数を定義します。
アニメーション方向: アニメーションを順番に逆方向に再生するかどうかを指定します。
anime-fill-mode: アニメーションが再生されていないときに要素に適用されるスタイルを指定します。
anime-play-state: アニメーションが実行中か一時停止中かを指定します。
5. CSSアニメーションを実装するにはどうすればよいですか?
つまり、アニメーション属性は、要素の 1 つ以上の属性の変更を制御し、複数のキーフレームを設定できます。プロパティには、アニメーションの名前、完了時間、期間、間隔、再生回数、繰り返し再生するかどうか、再生しないときに適用するスタイル、アニメーションが一時停止中か実行中かが含まれます。イベントをトリガーせずに、時間の経過とともに要素のスタイルを変更できます。
CSS でアニメーション化する:
1) @keyframes はアニメーションを指定します。
2) アニメーションのすべてのアニメーション プロパティの短縮形プロパティ。
3) anime-name は @keyframes アニメーションの名前を指定します。
4) anime-duration は、アニメーションが 1 サイクルを完了するのにかかる時間を秒またはミリ秒で指定します。デフォルトは 0 です。
5) anime-timing-function はアニメーションの速度曲線を指定します。デフォルトはイーズです。
6) anime-fill-mode は、アニメーションが再生されていないときに要素に適用されるスタイルを指定します。
7) アニメーション遅延はアニメーションの開始時期を指定します。デフォルトは 0 です。
8) anime-iteration-count はアニメーションが再生される回数を指定します。デフォルトは 1 です。
9) アニメーションの方向は、次のサイクルでアニメーションを逆再生するかどうかを指定します。デフォルトは通常です。
10) anime-play-state は、アニメーションが実行中か一時停止中かを指定します。デフォルトは実行中です。
6. プログレッシブエンハンスメントとグレースフルデグラデーションについて話しますか?
プログレッシブ エンハンスメント (英語の正式名称は Progressive Enhancement) は、最も基本的な機能を確保するために低バージョンのブラウザー用のページを構築し、その後、より優れたユーザー エクスペリエンスを実現するために高度なブラウザー用に機能を改善および追加することを指します。
グレースフルデグラデーション、英語の正式名はgraceful degradationで、最初から完全な機能を構築してから、下位バージョンのブラウザとの互換性を持たせます。
7. CSS3 の新しい変形の使用方法を簡単に説明してください。
CSS3の変形は2D変形と3D変形に分かれており、全体としては以下の3つに分類できます。
X/Y を伴う関数:translateX、translateY、sclaeX、scaleY、skewX、skewY
2D 変形機能: 平行移動、スクレイピング、回転、傾斜、マトリックス
3D 変形関数:rotateX、rotateY、rotate3d、translateZ、translate3d、scaleZ、scale3d、matrix3d。
8. プログレッシブ レンダリングとは何ですか?
プログレッシブ レンダリング (英語名 Progressive Rendering、遅延レンダリングとも呼ばれます) は、ユーザーが認識する読み込み速度を向上させるために、ページをできるだけ早く表示するテクノロジを指します。ただし、これは特定のテクノロジーを特定するものではなく、一連のテクノロジーの集合体です。例: スケルトン画面、画像の遅延読み込み、画像のプレースホルダー、リソースの分割。
9. CSS レンダリングのパフォーマンスを向上または最適化する方法を要約しますか?
CSS レンダリング パフォーマンスの最適化はあらゆる側面から行われます。一般的な方法をいくつか紹介します。
1) ID は一意であるため、ID セレクターの使用は非常に効率的です。
2) セレクターの深いネストを避けます。
3) マッチング速度が遅いため、属性セレクターの使用は避けてください。
4) プログレッシブエンハンスメントスキームを使用します。
5) CSSLint ルールに準拠します。
6) @import は使用しないでください。
7) 過度の再配置は避けてください。
8) 継承に依存する。
9) 値の略語。
10) パフォーマンスを消費するプロパティを避けます。
11) 背景画像が最適化され、統合されます。
12) ファイル圧縮。
10. カスケード コンテキスト、カスケード レベル、カスケード順序とは何ですか? について簡単に説明してください。
スタッキングコンテキストの概念: CSS2.1仕様では、各ボックスモデルの位置は平面キャンバス上のX軸、Y軸、スタックを表すZ軸の3次元となります。一般に、要素はページ上で X 軸と Y 軸に沿って並べて表示され、Z 軸上での要素のカスケード関係を認識することはできません。要素を積み重ねると、ある要素が別の要素を覆ったり、別の要素によって覆われたりすることがわかります。
カスケードコンテキストトリガー条件:
1) HTML のルート要素 HTML 自体には、「ルート スタッキング コンテキスト」と呼ばれるスタッキング コンテキストがあります。
2) 通常の要素は、position 属性を非静的な値に設定し、z-index 属性を特定の値に設定して、カスケード コンテキストを生成します。
3) CSS3 の新しいプロパティもカスケード コンテキストを生成できます
カスケードレベル:
2 つの要素が同じスタッキング コンテキストにある場合、より高いスタッキング レベルを持つ要素が前面に表示されます。カスケードレベルは概念であり、カスケードレベルの大きさはカスケード順序に従って判断できます。
重ね順：
積み重ね順序とは、要素が積み重ねられるときに、特定の順序規則に従って Z 軸上に垂直に表示されることを意味します。簡単に言うと、要素が同じスタックコンテキストにある場合のスタックの判断方法です: z-index が正の場合 > z-index: auto/0 > inline/inline-block 水平ボックス > float ボックス > ブロック ボックス > z-index が負の値です > カスケード コンテキスト。
11. 再描画と並べ替え
DOM の変更によってスタイルが変更され、幾何学的プロパティには影響しない場合、再描画が発生します。
DOM 構造の変更により DOM の幾何学的サイズが変更されると、再撮影プロセスが発生します。例: DOM 要素の幾何学的プロパティが変更されます。一般的な幾何学的プロパティには、幅、高さ、パディング、マージン、左、 top、border など、DOM ノードが増加または減少したとき、および offset、scroll、client 属性の読み取りと書き込みの際、ブラウザはこれらの値を取得するために再配置操作を実行し、window.getComputedStyle メソッドを呼び出す必要があります。
再配置プロセス: レンダリング パイプラインに従って、並べ替えがトリガーされると、DOM 構造が変更されると、DOM が再レンダリングされ、レンダリング プロセスが再度実行されます。
要約: 再描画は必ずしも再配置につながるわけではなく、再配置は再描画につながる必要があります。
12. css3 の新機能:
border-color: 境界線に複数の色を設定します。
border-radius: 丸い境界線;
box-shadow: シャドウ効果;
背景サイズ: 背景画像のサイズを指定します。
text-shadow: テキストシャドウ