1. 共通のブロックレベル要素 インライン要素 p - 最も一般的に使用されるブロックレベル要素 dl - dt-dd で使用されるブロックレベル要素 フォーム - インタラクティブフォーム h1 -h6- タイトル hr - 水平区切り線 ol - 順序付きリスト p - 段落 ul - 順序なしリスト フィールドセット - フォーム フィールド セット Colgroup-col - フォーム列グループ化要素 table-tr-td テーブルと行セル - フォーマット済みテキスト a - ハイパーリンク (アンカー) br - 改行 i - イタリック体 em - 強調 img - 画像入力 - 入力ボックス ラベル - フォーム ラベル スパン - テキスト ブロックを定義するために一般的に使用されるインライン コンテナ Strong - 太字強調 sub - 下付き文字 sup - 上付きテキスト エリア - 複数行テキスト入力ボックス u - 下線選択 - プロジェクト選択 2. いくつかの条件text-overflow 属性 は、テキストがオーバーフローした場合に省略マークを表示するかどうかのみであり、オーバーフローを実現する際に生成される 他の スタイル属性の定義はありません。省略記号の値を定義する必要があります: 1. コンテナの幅: width: value; (px、%、両方を使用できます) 2. テキストを 1 行で表示します: white-space: nowrap ; 3. オーバーフロー コンテンツを非表示にする: overflow: hidden; 4. オーバーフロー テキストに省略記号を表示する: text-overflow: ellipsis; 注: この記事のオーバーフローを設定するには、1 行のテキストを指定する必要があります。 ! ! IE6+; chrome1.0+; (Firefox、Opera はまだサポートされていません) 3. コンテナ内で要素を垂直方向に中央揃えに設定するには、変更する必要がありますdisplay属性値は inline-block;であり、兄弟要素 (ruler) を追加します (兄弟要素 [ruler] スタイルは vertical-align:middle;width:0;height: に設定されています) 100%;表示:インラインブロック;)。 3 つの条件: 1: text-align:center をコンテナー (親要素) に追加する必要があります。 2: 現在の要素をインライン ブロック要素 (display:inline-block;) に変換して追加する必要があります。現在の要素にvertical-align:middle;3を追加します: 現在の要素の後に兄弟要素spanを追加し(改行なし)、vertical-align:middle;width:0;height:100%;display:inline -block; 4. 置換要素と非置換要素 置換要素と非置換要素a) 置換要素: ブラウザは、タグと属性に基づいて要素の具体的な表示コンテンツを決定します。 たとえば、ブラウザは画像情報を読み取り、 タグの src 属性の値に基づいて表示しますが、(x)html コードを表示すると、画像の実際の内容は表示されません。 タグのタイプ 属性は、入力ボックスやラジオボタンなどを表示するかどうかを決定します。 HTML の (x)、、、 はすべて置換要素です。これらの要素には実際のコンテンツがない、つまり空の要素であることがよくあります。 置換要素は表示内にボックスを生成します。これが、一部のインライン要素 (img、input) で幅と高さを設定できる理由です。 b) 置換不可能な要素 (置換不可能な要素): (x) html のほとんどの要素は置換不可能な要素です。つまり、その内容はユーザー (ブラウザなど) に直接表示されます。 5. スプライトとは何ですか?利点は何ですか? 画像の統合、小さな単一の背景画像を 1 つの大きな背景画像に統合します。 画像統合の利点: 1) 画像統合によりサーバーへのリクエスト数が削減され、ページの読み込み速度が向上します。 2) 画像を統合してサイズを小さくします。 6. CSSカスケードスタイルシートとは何ですか? 優先度アルゴリズムはどのように計算されますか? a. 重要性とソースの優先順位は低位から高位までです: 1) ブラウザーのデフォルトのスタイル 2) class/id....セレクターの重み 3) インラインスタイル 4) インラインまたはアウトライン(書き順) 5) !重要最高 7. display:none と visibility:hidden の違い 前者: スペースを占有せずに非表示にする 後者: 非表示にするがスペースを占有する8. float をクリアするいくつかの方法hack1: にオーバーフロー ステートメントを追加します。親要素 :hidden;hack2: 親要素に高さを追加しますhack3: フローティング要素の下に空の p を追加し、要素にステートメントを追加します。 :hidden;} ハック 4: ユニバーサルクリアフロートメソッド p:after{content: “.”;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}9.属性は継承できますか? 1) テキスト関連: font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height 、text-align、text-indent、text-transform、word-spacing2) リスト関連: list-style-image、list-style-position、list-style-type 、list-style3) 色関連: color4) 透明度 (子要素は祖先要素の不透明度を継承しますが、変更することはできません)注: font-size は、比率ではなく、親要素のサイズを継承します。 。 line-height 親要素がパーセント値またはピクセル値の場合、子要素は親要素と同じになります。 親要素が標準または数値の場合、子要素の行の高さは子のフォントサイズになります。要素に数値を乗算します。 10. 配置方法position 属性値: static、relative、absolute、fixed1) staticstatic 要素はドキュメント フロー内に配置され、top と が通常どおり表示されます。要素の下部の 、left、right 属性は無視されます。 z-index 属性は常に 0 です。 2) 相対 相対位置決め、ドキュメント フロー内の要素が占める位置とサイズを保持し、相対移動距離と元の位置は左/右/上/によって決定されます。ボトム属性 3) 絶対絶対位置決めを保持し、オブジェクトをドキュメントフローから切り離し、left/right/top/bottomなどの属性を使用して、位置設定で最も近い親要素を基準とした絶対位置決めを実行します。そうでない場合は、body オブジェクトに基づきます 4) fixedfixed は、absolute と似ていますが、ウィンドウの左上隅を基準とした相対的なものであり、ドキュメントと一緒にスクロールしません。ただし、マルチフレーム ページ内の場合は、ブラウザの左上隅ではなく、フレームの左上隅を基準とします。 11. リンクと @import の違いは何ですか? 1. 先祖の違い。 LinkはXHTMLタグに属しており、@importは完全にCSSが提供するメソッドです。 2. link タグは、CSS のロードに加えて、RSS の定義、rel 接続属性の定義など、他の多くのことも行うことができます。 @import は CSS のロードのみを行うことができます。3. ロード順序の違い。ページが読み込まれるとき (つまり、ビューアで表示されるとき)、link によって参照される CSS は同時に読み込まれますが、@import によって参照される CSS は、ページのダウンロードが完了するまで待ってから読み込まれます。そのため、@import が CSS を読み込むページを閲覧すると、スタイルが表示されないことがあります (ちらつくだけです) 4. 互換性の違い。 @import は CSS2.1 で提案されたものなので、古いブラウザではサポートされていません。 @import は IE5 以降でしか認識できませんが、リンクタグではこの問題は発生しません。 5. dom を使用してスタイルを制御する場合の違い。 javascriptを使用してdomを制御してスタイルを変更する場合、@importはdomによって制御できないため、リンクタグのみを使用できます。12. ポジショニングの属性値は何ですか?それぞれに価値はありますか? 各属性値の役割: static: デフォルト値。位置が静的に設定されている要素は、通常、ドキュメント フローによって指定された位置に常に表示されます (静的要素は、上、下、左、または右の宣言を無視します)。 absolute: 親要素の絶対位置を基準として、スペースを占有せず、その位置は最も近い位置にある親要素の位置を基準とします。 「left」、「top」、「right」、「bottom」のプロパティを直接指定できます。親が配置されていない場合は、html (ルート要素) が使用されます。 (重なり順 z-index: 値) relative: デフォルトの位置を基準としたオフセット位置です。左、上、右、下の値を設定することで、通常の位置 (開始位置の移動 [通常のレイアウト フローは中断されません] 固定: ブラウザーを基準とした絶対位置。この要素の位置は、ブラウザー ウィンドウの指定された座標を基準にして配置できます。 、「top」、「right」、「bottom」属性。ウィンドウがスクロールされているかどうかに関係なく、要素はその位置に留まります13. html5mainに15個の新しいタグを書き込みます。 余談 記事セクション 図 データリスト ビデオ オーディオ フィールドテスト ラベル キャプション14. BFC とはどのように生成されるのですか? 1. 内部フロートをクリアし、垂直方向のマージンを防止します。 重複から (2 つの BFC に配置) 3. ルート要素、float 属性が none ではない、位置が絶対または固定、表示が inline-block、table-cell、table -caption、flex、inline-flex、およびオーバーフローは表示されません15. .px、em、rem、pt の違い1) px を使用してフォント サイズを設定すると、より安定して正確になります。この方法の問題点は、ユーザーがブラウザーで作成した Web ページを閲覧するときに、ブラウザーをズームすると Webページ レイアウトが崩れてしまうことです。したがって、Web ページのフォントを定義するために「em」を使用することが提案されました。 2) em はベースラインに基づいてフォント サイズを調整します em は親要素を基準にしてフォント サイズを設定するため、要素を設定するには、その親要素のサイズを知る必要がある場合があります 3 )。 rem はルート要素のフォント サイズに相対して表示されます rem はルート要素 に相対的に表示されます。つまり、ルート要素内の参照値を決定するだけで済みます 4) pt のサイズは次と等しいです1インチ/72ポイント: テキストの測定単位ですこの測定方法は印刷デザインの背景に由来しており、メディアに最適ですが、モニターでも広く使用されています16.垂直方向と水平方向のセンタリングを実現するには? 1.p{幅:200px;高さ:200px;背景:#f00;位置:固定;左:0;右:0;上:0;下:0;余白:自動;}2. p{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}17、プログレッシブエンハンスメントとグレースフルデグラデーション段階的な強化: 最も基本的な機能を保証するために低バージョンのブラウザー用のページを構築し、効果やインタラクションを改善し、高度なブラウザー用の機能を追加して、より良いユーザー エクスペリエンスを実現します。 グレースフルデグラデーション: 最初から完全な関数を構築し、それより低いバージョンのブラウザーと互換性を持たせます18. CSS セレクターとは何ですか? 1) ワイルドカードセレクター *2) タイプセレクター/要素セレクター a3) 属性セレクター input[type="button"]4) セレクター p.code を含む5) サブオブジェクトセレクター ul.test>li 6) ID セレクター #7) クラス セレクター .8) グループ セレクター body,ul,li9) 疑似クラス と疑似オブジェクト セレクター p:first-letter a:hover10) 隣接selector li+li19. アニメーションとトランジションの違いは同じで、どちらも要素の属性値が時間の経過とともに変化します。 違い: トランジションは、時間の経過とともに css プロパティを変更する前に、 イベント (ホバー イベントやクリック イベントなど) をトリガーする必要があります。アニメーションは、イベントをトリガーせずに時間の経過とともに明示的に変更することもできます。 アニメーション効果を実現するには要素 css を使用する必要があります。css3 アニメーションには明確なアニメーション属性値が必要です。 20. 標準のボックスモデルと奇妙なボックスモデルとは何ですか。 2 つの違い、奇妙なボックス モデルと標準の合計モデルの実装方法 標準のボックス モデル: content+border+padding 奇妙なボックス モデル: content 奇妙なボックスモデルの実装: box-sizing: border-box標準のボックスモデル: box-sizing:content-box 21. 要素を上、下、左の中央に配置する方法そして親要素1.css内で: .box{display:flex;width:800px;height:300px;justify-content:center}.box p{align-self :center}html: 2.css:.box{display:flex;width :800px;height:800px;justify-content:center; align-items:center;}html: 22. ビデオとオーディオの一般的に使用される形式は何ですかvideoの場合: video/ogg video/mp4 video/webm audioの場合: audio/ogg audio/mpeg23. 属性と属性について簡単に説明します。 フレックスボックスモデルの値 (少なくとも6つの属性を記述します) display:flex;flex-direction:justify-content:align-items:align-self:align-content: flex-wrap:23. 線形性の簡単な説明 グラデーション、放射状グラデーション、繰り返しグラデーションの使用法線形グラデーション: Linear-gradient()放射状グラデーション: Radial-gradient()繰り返し線形グラデーション: 繰り返し線形-gradient()放射状グラデーションの繰り返し:repeat-radial-gradient()24.アニメーションの使い方を簡単に紹介しますアニメーションは2つの部分で構成されています:アニメーション: アニメーション名 アニメーション実行時間 アニメーションタイプ アニメーション遅延時間 アニメーション繰り返し数 アニメーション方向; @keyフレームアニメーション名 25. css3Dの主な属性と属性値 1. オブジェクトを大きく見せたい場合は、値を小さく設定します。オブジェクトを小さく表示したい場合は、値を大きく設定します2. 3D ステージ:transform-style:preserve-3d;3.translateZ()rotateZ()scaleZ()26. 2Dではtransform:translate()rotate()skew()scale()transform-origin:27.トランジションアニメーションの属性と属性値を簡単に紹介しますtransition:属性名(allを使用可能) ) アニメーション実行時間 アニメーションの種類 アニメーション遅延時間 28、css3 の新しい background 属性background-origin: 背景の原点 background-clip: 背景クリッピング background-size: the背景画像のサイズは以下の通りですbackground-sizelengthの3つの値は背景画像のサイズを指定します。最初の値は幅、2 番目の値は高さです。 パーセンテージ(%)背景画像のサイズをパーセンテージで設定しますcover背景画像が背景領域を完全に覆うように、背景画像を十分な大きさに拡大します 29 5つの中核を書きます。主要ブラウザと代表作品*Trident: IE、Maxthon、Tencent、Theworld、360ブラウザ*Gecko:: 代表作品Mozilla Firefoxはオープンソースです*Webkit: 代表作品Safari、Chrome、オープンソースですプロジェクト。 *Presto:代表作Opera、PrestoはOpera Softwareが開発したブラウザレイアウトエンジンです。世界最速のレンダリング エンジンとしても認められています。 ※Blink:GoogleとOpera Softwareが開発し、2013年4月にリリースされたブラウザレイアウトエンジン。 30. IE6 の一般的なバグと解決策をいくつか書き留めます (少なくとも 4 つ) 1) 画像に境界線がある 解決策: border:0; または border:0 none を追加します 2. ) 解決策: 表示: inline3、デフォルトの高さ (IE6、IE7) 解決策: 要素にステートメントを追加します: font-size:0; 解決策 2: 要素にステートメントを追加します: overflow:hidden; 4.ボタン要素のデフォルトのサイズが異なります。 解決策: 31 をシミュレートするタグを使用します。 IE の フィルター とは何ですか? 1, _ 下線属性フィルター 2, 9: IE バージョン認識; 他のブラウザーは認識しません 構文: selector {属性: 属性値 9;}3,