ホームページ > 記事 > ウェブフロントエンド > フロントエンド面接ガイド、純粋な福利厚生
フロントエンド面接ガイド、純粋な福利厚生
- WBOYオリジナル
- 2016-08-04 08:53:173071ブラウズ
1.HTMLとCSS
1. 作成したページはどのブラウザでテストされましたか?これらのブラウザのコアは何ですか?
IE: トライデント カーネル
Firefox: gecko カーネル
Safari: Webkit カーネル
Opera: 以前は Presto カーネルでしたが、現在 Opera は Google Chrome の Blink カーネルに切り替わりました
Chrome:Blink (Google と Opera Software が共同開発した Webkit に基づく)
2. すべての HTML ファイルの先頭には、Doctype という非常に重要なものがあります。これが何のためにあるか知っていますか?
宣言はドキュメントの先頭、 タグの前にあります。このタグは、ドキュメントが使用する HTML 仕様または XHTML 仕様をブラウザに伝えます。 (キーポイント: どの仕様に従ってページを解析するかをブラウザーに指示します)
3. 癖モードとは何ですか?標準モードとの違いは何ですか
IE6 以降、標準モードが導入され、ブラウザは指定されたブラウザと同じように標準に準拠したドキュメントを処理しようとします。
CSS は IE6 より前では十分に成熟していなかったので、IE5 より前のブラウザや他のブラウザでは CSS のサポートが不十分でしたが、現時点では多くのページが古い Written in Layout モードに基づいているため、問題が発生します。また、IE6 が CSS をサポートしている場合、これらのページは異常に表示されます。既存のページが破壊されないようにして、新しいレンダリング メカニズムを提供するにはどうすればよいでしょうか。
プログラムを作成するときに、特に新しい機能が古い機能と互換性がない場合に、元のインターフェイスを変更せずに、より強力な機能を提供する方法についてよくこの問題に遭遇します。この種の問題が発生した場合の一般的なアプローチは、パラメーターと分岐を追加することです。つまり、特定のパラメーターが true の場合は新しい関数を使用し、パラメーターが true でない場合は古い関数を使用します。破壊しない オリジナルのプログラムも新しい機能を提供します。 IE6 は、DTD をこの「パラメータ」として扱います。これは、DTD が記述されていれば、このページでは CSS レイアウトがより適切にサポートされることを意味するとみなします。 、以前のレイアウトは互換性があります。これがQuirksモード（個性モード、奇妙なモード、奇妙なモード）です。
違い:
一般に、レイアウト、スタイル分析、スクリプトの実行という 3 つの側面に違いがあります。
ボックス モデル: W3C 標準では、要素の幅と高さを設定すると、Quirks モードでは、IE の幅と高さにパディングと境界線も含まれます。
インライン要素の高さと幅を設定する: 標準モードでは、 などのインライン要素の幅と高さの設定は有効になりませんが、互換モードでは有効になります。
高さのパーセンテージを設定する: 標準モードでは、要素の高さはその要素に含まれるコンテンツによって決まります。親要素が高さのパーセンテージを設定していない場合、子要素でマージンを使用して高さをパーセンテージで設定することは無効です。 auto を使用して水平方向に中央揃えに設定します。 margin:0 auto を使用すると、標準モードでは要素を水平方向に中央揃えにできますが、quirks モードでは失敗します。
(他にもたくさんあります。彼が何を答えるかは問題ではありません。重要なのは、彼が遭遇した答えが彼自身の経験から来ているのか、それとも記事から読んだだけなのか、それとも知らないのかどうかです。全く。）
4. table レイアウトと比較した div+css レイアウトの利点は何ですか?
バージョンを修正する場合はcssファイルを変更するだけで便利です。
ページの読み込み速度が速く、構造が明確で、ページ表示がシンプルです。
パフォーマンスは構造から分離されています。
最適化 (SEO) が容易な検索エンジンはよりフレンドリーであり、上位にランクされるのが簡単です。
5. img の alt と title の類似点と相違点は何ですか? Strong と EM の類似点と相違点は何ですか?
a:alt(alt text): 画像、フォーム、またはアプレットを表示できないユーザー エージェント (UA) の場合、alt 属性を使用して置換テキストを指定します。置換テキストの言語は、lang 属性で指定します。 (IEブラウザではタイトルがない場合はツールチップにaltが表示されます)
title(ツールチップ): この属性は、この属性が設定されている要素に関する推奨情報を提供します。
strong: 太字の強調タグ、強調、コンテンツの重要性を示します
em: 斜体の強調タグはより強く強調され、コンテンツの強調を示します
6. プログレッシブエンハンスメントとグレースフルデグラデーションの違いを説明できますか?
漸進的な機能強化: 最も基本的な機能を確保するために低バージョンのブラウザー用のページを構築し、効果やインタラクションを改善し、高度なブラウザー用の追加機能を追加して、より良いユーザー エクスペリエンスを実現します。
グレースフル デグラデーション: 最初から完全な機能を構築し、下位バージョンのブラウザーと互換性を持たせます。
違い: グレースフル デグラデーションは複雑な現状から始まり、ユーザー エクスペリエンスの提供を減らそうとしますが、プログレッシブ エンハンスメントは非常に基本的な機能バージョンから始まり、将来の環境のニーズに適応するために継続的に拡張します。劣化（機能の衰退）は過去を振り返ることを意味し、漸進的な強化は根を安全地帯に保ちながら前を向くことを意味します。
「グレースフルダウングレード」の視点
「グレースフル デグラデーション」の見解では、Web サイトは最も高度で完全なブラウザー向けに設計されるべきであると考えられています。 「古い」とみなされるブラウザや機能が欠落しているブラウザでのテスト作業は開発サイクルの最終段階で行われ、テスト対象は主流ブラウザ（IE、Mozilla など）の前のバージョンに限定されます。
この設計パラダイムでは、古いブラウザは「貧弱だがまあまあ」のブラウジング エクスペリエンスしか提供しないと考えられます。特定のブラウザに合わせて、いくつかの小さな調整を行うことができます。ただし、それらは私たちの注意の焦点ではないため、大きなバグの修正を除いて、その他の違いは無視されます。
「プログレッシブ・エンハンスメント」の視点
「漸進的強化」の観点では、コンテンツ自体に焦点を当てる必要があると考えています。
コンテンツはウェブサイトを構築する動機になります。表示する Web サイト、収集する Web サイト、検索する Web サイト、運営する Web サイト、これらすべてを含む Web サイトもありますが、すべてコンテンツが含まれることは同じです。これにより、「プログレッシブ エンハンスメント」がより合理的な設計パラダイムになります。これが、Yahoo! によってすぐに採用され、「段階的ブラウザ サポート (段階的ブラウザ サポート)」戦略の構築に使用された理由です。
そこで質問が来ます。プロダクト マネージャーは、IE6、7、および 8 の Web ページの効果は最新のブラウザーに比べて角の丸みや影 (CSS3) がはるかに少なく、互換性が必要である (画像の背景を使用し、CSS3 を放棄する) ことを理解しました。どうやって彼を説得しますか? ?
7. Web サイトのリソースを保存するために複数のドメイン名を使用する方が効果的であるのはなぜですか?
CDN キャッシュがさらに便利になりました
ブラウザの同時実行制限を破る
Cookieの帯域幅を節約する
メインドメイン名への接続数を節約し、ページの応答速度を最適化します
不必要なセキュリティ問題を防止します
8. ウェブ標準と標準設定組織の重要性についてのあなたの理解を話してください。
ウェブ標準と標準設定組織はすべて、開発者が統一標準に従い、開発の難易度や開発コストを軽減し、SEO が向上し、悪用によるさまざまな問題が発生しないようにするために設計されています。コードのバグやセキュリティの問題を解決し、最終的には Web サイトの使いやすさを向上させます。
9. Cookie、sessionStorage、localStorage の違いについて説明してください。
sessionStorage は、セッション内のデータをローカルに保存するために使用されます。これらのデータは、同じセッション内のページからのみアクセスでき、セッションが終了するとデータは破棄されます。したがって、sessionStorage は永続的なローカル ストレージではなく、セッション レベルのストレージにすぎません。 LocalStorage は、データがアクティブに削除されない限り、永続的なローカル ストレージとして使用されます。
ウェブストレージとCookieの違い
Web ストレージの概念は Cookie の概念に似ていますが、より大容量のストレージ用に設計されているという点が異なります。 Cookie のサイズは制限されており、新しいページをリクエストするたびに Cookie が送信されるため、帯域幅が浪費されます。また、Cookie はスコープを指定する必要があり、ドメイン間で呼び出すことはできません。
さらに、Web Storage には setItem、getItem、removeItem、clear などのメソッドがあります。Cookie とは異なり、フロントエンド開発者は setCookie と getCookie を自分でカプセル化する必要があります。しかし、Cookie も不可欠です。Cookie はサーバーと対話するために使用され、HTTP 仕様の一部として存在しますが、Web Storage はデータをローカルに「保存」するためにのみ作成されます。
10. srcとhrefの違いを簡単に説明します。
src は現在の要素を置換するために使用され、href は現在のドキュメントと参照されるリソース間の接続を確立するために使用されます。
src は、外部リソースの場所を指すsourceの略語で、srcリソースをリクエストすると、指定されたコンテンツがドキュメント内の現在のタグの場所に埋め込まれ、指定されたリソースがダウンロードされて適用されます。 js スクリプトなどのドキュメント、img 画像やフレームなどの要素。
ブラウザがこの要素を解析すると、リソースがロード、コンパイル、実行されるまで、他のリソースのダウンロードと処理が一時停止されます。これは、ピクチャやフレームなどの要素にも当てはまります。これは、指定されたリソースを埋め込むのと似ています。現在のタグ。これが、js スクリプトが先頭ではなく下部に配置される理由でもあります。
href は Hypertext Reference の略で、ネットワーク リソースの場所を指し、
をドキュメントに追加すると、現在の要素 (アンカー) または現在のドキュメント (リンク) へのリンクが確立されます。その後、ブラウザはドキュメントを CSS ファイルとして認識し、リソースを並行してダウンロードし、現在のドキュメントの処理を停止しません。このため、@import メソッドを使用する代わりに、link メソッドを使用して CSS を読み込むことが推奨されます。
11. Web ページの制作で使用される画像形式は何ですか?
png-8、png-24、jpeg、gif、svg。
しかし、上記のどれも、面接官が望む最終的な答えではありません。面接官は、Webp であることを聞きたいと考えています。 (新しい技術や新しいものに注目していますか)
Webp について学びましょう: WebP 形式は、画像の読み込みを高速化するために Google によって開発された画像形式です。画像圧縮量は JPEG の約 2/3 にすぎず、サーバーの帯域幅リソースとデータ容量を大幅に節約できます。 Facebook Ebay などの有名な Web サイトは、WebP 形式のテストと使用を開始しています。
同じ品質で、WebP 形式の画像の体積は JPEG 形式の画像より 40% 小さくなります
12. マイクロフォーマットとは何か知っていますか?理解について話してください。フロントエンド ビルドではマイクロフォーマットを考慮する必要がありますか?
Microformats は、機械可読なセマンティック XHTML 語彙のコレクションであり、構造化データのオープン標準です。特殊なアプリケーションのために開発された特殊な形式です。
利点: Web ページにスマート データを追加すると、Web サイトのコンテンツが検索エンジンの結果インターフェイスに追加のヒントを表示できるようになります。 (応用例：Douban、興味があれば自分でググってみてください)
13. CSS/JS コードがオンラインになった後、開発者は通常、ユーザーが Web ページを更新した時点からパフォーマンスを最適化します。JS リクエストはどこにキャッシュされますか?
答え: DNS キャッシュ、CDN キャッシュ、ブラウザ キャッシュ、サーバー キャッシュ。
14. ページ (大規模な電子商取引 Web サイト) に多数の写真があり、ユーザーのエクスペリエンスを向上させるためにこれらの写真の読み込みを最適化するにはどのような方法が必要ですか。
画像の遅延読み込み ページ上の非表示領域にスクロール バー イベントを追加して、画像の位置とブラウザの上部の間の距離、および前者とページの間の距離が小さい場合はその距離を決定できます。後者の場合、最初にロードされます。
スライドショーやフォトアルバムなどの場合は、画像プリロード技術を使用して、現在表示されている画像の前と次の画像を最初にダウンロードできます。
画像が CSS 画像の場合は、CSSsprite、SVGsprite、Iconfont、Base64 などのテクノロジーを使用できます。
画像が大きすぎる場合は、ロード時に特別に圧縮されたサムネイルが最初にロードされ、ユーザー エクスペリエンスが向上します。
画像表示領域が画像の実際のサイズより小さい場合、画像はビジネスニーズに応じてサーバー側で最初に圧縮され、圧縮された画像サイズは表示と一致します。
15. HTML 構造のセマンティクスをどのように理解しますか?
スタイルが削除または失われた場合、ページは明確な構造を示すことができます:
HTML 自体にはパフォーマンスがありません。たとえば、
はフォント サイズが 2em で、これが HTML のパフォーマンスであると考えないでください。実際には、HTML のデフォルトの CSS が機能するため、スタイルが削除または失われると、ページは明確な構造を表示できます。ただし、ブラウザーにはデフォルトのスタイルが備わっています。デフォルトのスタイルは HTML のセマンティクスをより適切に表現するものでもあり、ブラウザのデフォルト スタイルとセマンティクスの HTML 構造は切り離せないものであると言えます。
スクリーン リーダー (訪問者が視覚障害のある場合) は、マークアップに完全に基づいてページを「読み取り」ます。
たとえば、セマンティック タグを使用すると、スクリーン リーダーは単語を完全に発音しようとするのではなく、単語を「綴り」ます。
PDA、携帯電話、その他のデバイスでは、通常のコンピュータ ブラウザのように Web ページをレンダリングできない場合があります (通常、これらのデバイスの CSS サポートが弱いため)セマンティック マークアップを使用すると、これらのデバイスが意味のある方法で Web ページをレンダリングできるようになります。理想的には、表示デバイスはデバイス自体の条件に合わせて Web ページをレンダリングする必要があります。
セマンティックタグ付けにより、必要な関連情報がデバイスに提供されるため、考えられるすべての表示状況を自分で考慮する手間が省けます (既存のデバイスや将来の新しいデバイスを含む)。たとえば、携帯電話では段落にタグを付けることができます。タイトル付き テキストは太字で表示されますが、ハンドヘルド コンピュータではより大きなフォントで表示されます。どちらの場合でも、テキストをタイトルとしてマークすると、読み取りデバイスが自動的にページを適切に表示することを確信できます。条件。
検索エンジン クローラーもマークアップに依存して、個々のキーワードのコンテキストと重みを決定します
以前は、検索エンジンのクローラーも Web サイトの「訪問者」であるとは考えなかったかもしれませんが、現在では、クローラーは実際に非常に貴重なユーザーであり、クローラーがなければ、検索エンジンは Web サイトのインデックスを作成できません。一般の方は来店しにくいです
クローラーはプレゼンテーションに使用されるマークアップをほとんど無視し、セマンティック マークアップのみに焦点を当てるため、ページがクローラーにとって理解しやすいかどうかは非常に重要です。
したがって、代わりにページ ファイルのタイトルがタグ付けされている場合、このページは使いやすさの向上に加えて、CSS と JavaScript の正しい使用を促進します。これは、セマンティック マークアップ自体が多くの「フック」を提供するためです。 " ページのスタイルと動作を適用します。
SEO は主にウェブサイトのコンテンツと外部リンクに依存します。
チーム開発とメンテナンスが簡単
W3C は私たちに適切な標準を設定しており、チームの全員がこの標準に従っています。これにより、多くの差別化された要素が削減され、開発とメンテナンスが容易になり、開発効率が向上し、モジュール型開発も実現できます。
16. フロントエンドの観点からSEOを行う際に考慮する必要があることについて話してください。
検索エンジンがどのようにウェブページをクロールし、インデックスを作成するかを理解します
一部の検索エンジンの基本的な動作原理、検索エンジン間の違い、検索ロボット (SE ロボットまたは Web クローラー) の動作方法、検索エンジンが検索結果を並べ替える方法などを知る必要があります。
メタタグの最適化
主にテーマ（Title）、Webサイトの説明（Description）、キーワード（Keywords）が含まれます。他にも、Author (作成者)、Category (ディレクトリ)、Language (エンコード言語) などの隠しテキストがあります。
キーワードを選択してWebページに配置する方法
検索するときはキーワードを使用する必要があります。キーワードの分析と選択は、SEO の最も重要なタスクの 1 つです。まず、Web サイトの主要なキーワード (通常は約 5) を決定し、キーワードの密度 (Density)、関連性 (Relavancy)、顕著性 (Prominency) などを含めてこれらのキーワードを最適化します。
主要な検索エンジンを理解する
検索エンジンはたくさんありますが、ウェブサイトのトラフィックを決定するものはほんのわずかです。たとえば、英語のものには主に Google、Yahoo、Bing などが含まれ、中国語のものには Baidu、Sogou、Youdao などが含まれます。検索エンジンが異なれば、ページのクロール、インデックス作成、並べ替えに関するルールも異なります。また、検索ポータルと検索エンジンの関係についても理解する必要があります。たとえば、AOL は Web 検索に Google の検索テクノロジーを使用し、MSN は Bing のテクノロジーを使用します。
メインのインターネット ディレクトリ
Open Directory 自体は検索エンジンではありませんが、検索エンジンとの主な違いは、Web サイトのコンテンツが収集される方法です。ディレクトリは手動で編集され、主に Web サイトのホームページが含まれます。検索エンジンは自動的にディレクトリを収集し、ホームページに加えて多数のコンテンツ ページをクロールします。
クリック課金型検索エンジン
検索エンジンも生き残る必要があります。インターネットコマースがますます成熟するにつれ、有料の検索エンジンが普及してきました。最も代表的なのは Overture と Baidu、そしてもちろん Google の広告プロジェクトである Google Adwords です。商用 Web サイトを見つけるために検索エンジンのクリック広告を使用する人が増えています。また、最小限の広告投資で最大限のクリック数を獲得する方法についても学ぶ必要があります。
検索エンジンへのログイン
ウェブサイトが完成したら、そこに横たわって顧客が空から降ってくるのを待ってはいけません。他の人にあなたを見つけてもらう最も簡単な方法は、Web サイトを検索エンジンに送信することです。商用 Web サイトをお持ちの場合、主要な検索エンジンやディレクトリを含めるには料金を支払う必要があります (例: Yahoo は 299 ドルかかります)。しかし良いニュースは、(少なくともこれまでのところ) 最大の検索エンジンである Google は現在無料であるということです。 、検索市場の 60% 以上のコントロールを支配しています。
リンク交換とリンク人気度(Link Popularity)
Web コンテンツはハイパーテキストの形式で相互にリンクされており、Web サイト間でも同様です。検索エンジンに加えて、人々は毎日、さまざまな Web サイト間のリンクを通じてサーフィン (「サーフィン」) を行っています。他の Web サイトからあなたの Web サイトへのリンクが増えるほど、より多くのトラフィックが得られます。さらに重要なのは、Web サイトに外部リンクが多いほど、検索エンジンによって重要視され、ランキングが高くなります。
合理的なタグの使用
17. DOM の CSS スタイルを設定する方法はありますか?
外部スタイルシート、外部CSSファイルを導入します
内部スタイルシート、CSSコードを
タグの中に入れますインライン スタイル、CSS スタイルを HTML 要素内で直接定義します
18. CSS にはどのようなセレクターがありますか?
派生セレクター(HTMLタグで宣言)
IDセレクター(DOM IDで宣言)
クラスセレクター(スタイルクラス名で宣言)
属性セレクター (DOM 属性で宣言され、CSS2 に属し、IE6 ではサポートされておらず、一般的に使用されていません。知らない場合は忘れてください)
最初の 3 つの基本セレクターに加えて、
を含むいくつかの拡張セレクターもあります。子孫セレクター (div .a{ } などのスペース区切りを使用)
グループセレクター (p,div,#a{ } などのカンマ区切りを使用)
それでは、CSS セレクターの優先順位はどのように定義されるのでしょうか?
基本原則:
一般的に言えば、セレクターが特別であればあるほど、その優先順位は高くなります。つまり、セレクターがより正確にポイントするほど、その優先順位は高くなります。
複雑な計算方法:
派生セレクターの優先順位を示すには 1 を使用します
クラスセレクターの優先順位を表すには10を使用します
ID セレクターの優先順位をマークするには 100 を使用します
div.test1 .span var 優先度 1+10 +10 +1
span#xxx .songs li 優先度 1+100 + 10 + 1
#xxx li 優先度 100 +1
それでは、次のコードを見てください。
タグ内のテキストは何色ですか?
.classA{ color:blue;}
.classB{ color:red;}
123
答え: 赤です。これは、ファイル内のスタイル定義の順序に関係します。つまり、後のスタイル定義が前のスタイル定義を上書きしますが、
の順序とは関係ありません。
19. ブラウザの表示範囲内に DOM 要素が表示されないようにするには、CSS でどのような属性を定義できますか?
最も基本的なもの:
表示属性を none に設定するか、可視性属性を hidden に設定します
技術:
幅と高さを 0 に設定し、透明度を 0 に設定し、Z インデックスの位置を -1000 に設定します
20. ハイパーリンクにアクセスしてもホバースタイルが表示されない問題は何ですか?の解き方？
回答: クリックされて訪問されたハイパーリンク スタイルには、ホバーとアクティブがなくなりました。解決策は、CSS 属性の順序を L-V-H-A (リンク、訪問、ホバー、アクティブ) に変更することです。
21. CSSハックとは何ですか? IE6、7、8のハックは何ですか?
答え: ブラウザごとに異なる CSS コードを記述するプロセスが CSS ハックです。
例は次のとおりです:
|
2 3 4 5 6 7 8 9 10 11 12
| #テスト
幅: 300px;
高さ:300ピクセル ps アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト - - - - ライト 背景色:red9; /*すべて ie*/背景色: yellow; /*ie8*/ +背景色: ピンク; _背景色:オレンジ /*ie6*/ } :root #test { 背景色:purple9 } /*ie9*/ @media all and (min-width:0px){ #test {background-color:black;} } /*opera*/ @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome と safari*/
22. CSSを使用して簡単なスライド効果ページを作成してください回答: css3 を使用する必要があることはわかっています。アニメーションを使用して、簡単なスライドショー効果を作成します。
24. インライン要素とブロックレベル要素の具体的な違いは何ですか?インライン要素のパディングやマージンは設定できますか?ブロックレベル要素(ブロック)の機能: 常に別の行を占有します。つまり、新しい行で開始し、次の要素も新しい行に表示する必要があります。 幅、高さ、パディング、マージンはすべて制御可能です。 インライン要素 (インライン) の機能: 隣接するインライン要素と同じ行上; 幅、高さ、内側マージンの上下 (padding-top/padding-bottom)、および外側マージンの上下 (margin-top/margin-bottom) は変更できません (つまり、padding と margin の左右は変更できます)設定する必要があります)。これは、内部のテキストまたは画像のサイズです。 それでは、ブラウザのデフォルトのネイティブ インライン ブロック要素 (固有のサイズがあり、高さと幅を設定できますが、自動的に折り返されない) は何でしょうか? 答え: 、 25. マージンオーバーラップとは何ですか?重複の結果は何ですか?外側のマージンの重なりはマージンの崩壊です。 CSS では、2 つの隣接するボックス (兄弟または先祖の可能性があります) のマージンを 1 つのマージンに結合できます。マージンを結合するこの方法は折りたたみと呼ばれ、結果として生じるマージンは折りたたまれたマージンと呼ばれます。 折り畳まれた結果は次の計算ルールに従います: 隣接する 2 つのマージンが両方とも正の数の場合、折り畳まれた結果はそれらの間の大きい方の値になります。 隣接する 2 つのマージンが両方とも負の場合、折り畳まれた結果は 2 つの絶対値のうち大きい方になります。 2 つのマージンが 1 つが正、もう 1 つが負の場合、折り畳まれた結果は 2 つの合計になります。 26. rgba() の透明効果と不透明度の違いは何ですか?rgba() と opacity は両方とも透明効果を実現できますが、最大の違いは、opacity が要素に作用し、要素内のすべてのコンテンツの透明度が変化することです。 そして rgba() は要素の色またはその背景色にのみ作用します。 (rgba 透明度を設定する要素の子要素は透明度効果を継承しません!)27. テキストを縦横に重ねることができる CSS の 2 つのプロパティは何ですか? 垂直方向: 行の高さ水平方向: 文字間隔 それでは、質問は、文字間隔の素晴らしい用途をご存知ですか? 回答: インラインブロック要素間の改行スペースの問題を解消するために使用できます。 28. フローティング要素を垂直方向に中央に配置するには?
那么问题来了，如何垂直居中一个
29. pxとemの違い。Px と em はどちらも長さの単位です。違いは、px の値が固定されており、計算が簡単であることです。 em の値は固定されておらず、親要素のフォント サイズを継承します。 ブラウザのデフォルトのフォント高さは16pxです。したがって、調整されていないブラウザは 1em=16px に準拠します。次に、12px=0.75em、10px=0.625emとなります。 30. 「リセット」CSS ファイルとその使用方法について説明します。 Normalize.cssをご存知ですか？それらの違いを理解していますか？多くのリセット スタイルがあります。すべてのフロントエンド開発者は、一般的に使用されるリセット CSS ファイルを持っており、その使用方法を知っている必要があります。彼らはやみくもにそれをやっているのでしょうか、それともなぜそうするのか分かっていますか？その理由は、ブラウザーごとに一部の要素のデフォルト スタイルが異なるためです。これを処理しないと、ブラウザーごとに必要なリスクが発生したり、より劇的な結果が発生したりする可能性があります。 Normalize を使用して、リセット スタイル ファイルを置き換えることができます。すべてのスタイルをリセットするわけではなく、適切なデフォルトのスタイル値のセットのみを提供します。これにより、ブラウザ間で一貫性があり合理的になりますが、他のもの (太字のタイトルなど) が損なわれることはありません。 この点、すべてのリセットをリセットすることは不可能です。また、実際にはリセット以上の機能があり、一貫性のないオーディオ要素や一貫性のない HTML の行の高さなど、決して考える必要のない問題も処理します。 31. Sass と LESS とは何ですか?なぜ人々はそれらを使用するのでしょうか?これらは CSS プリプロセッサです。 CSS上の抽象化レイヤーです。これらは、特別な構文/言語を使用して CSS にコンパイルされます。 例えば、Less は動的スタイル言語です。CSS には、変数、継承、操作、関数などの動的言語の特性が備わっており、クライアント上で実行できます (IE 6 以降、Webkit、Firefox をサポート)。または サーバー側で実行します (Node.js を使用)。 なぜ使用するのですか? 構造が明確で拡張が簡単。 ブラウザのプライベート構文の違いを簡単にブロックできます。言うまでもなく、これによりブラウザ構文の違いの繰り返し処理がカプセル化され、無意味な機械的作業が削減されます。 多重継承は簡単に実装できます。 CSS コードと完全に互換性があり、古いプロジェクトに簡単に適用できます。 LESS は CSS 構文を拡張するだけなので、古い CSS コードも LESS コードでコンパイルできます。 32. 表示:なしと可視性:非表示の違いは何ですか?display : 要素の元のスペースを占有せずに、対応する要素を非表示にします。 可視性: 対応する要素を非表示にし、要素の元のスペースを占有します。 つまり、CSS の display:none 属性を使用すると、HTML 要素 (オブジェクト) の幅、高さ、その他の属性値が「失われ」、visibility:hidden 属性を使用すると、HTML 要素が失われます。 （オブジェクト）は視覚的にのみ表示され、不可視（完全に透明）になりますが、それが占める空間的位置は残ります。34. CSS における link と @import の違いは次のとおりです。 リンクはhtmlタグに属しますが、@importはCSSで提供されますページが読み込まれるとリンクも同時に読み込まれ、@importで参照されるCSSはページが読み込まれるまで読み込まれません @importはie5以上でのみ認識でき、リンクはhtmlタグなのでブラウザ互換性の問題はありません リンクによって導入されたスタイルの重みは、@import の参照よりも大きくなります (@import は、参照されたスタイルを現在のページにインポートします) 35. ボックスモデルの紹介: CSSボックスモデルにはIEボックスモデルと標準W3Cボックスモデルの2種類がありますボックスモデル: コンテンツ、パディング、マージン(通常、ボックスの実際の幅には含まれません)、境界線
36. スタイルを初期化する理由は何ですか? ブラウザの互換性の問題により、ブラウザごとにタグのデフォルトのスタイル値が異なります。初期化に失敗すると、ブラウザごとに表示に違いが生じます。ただし、CSS を初期化すると、検索エンジンの最適化にわずかな影響があります37.BFCとは何ですか? BFC (ブロックレベルの書式設定コンテキスト)、新しい BFC を作成するボックスは独立してレイアウトされ、ボックス内の要素のレイアウトはボックスの外側の要素には影響しません。同じBFC内の2つの隣接するボックスには、垂直方向のマージンが重なる問題があります BFC は、ブラウザー内に独立したレンダリング領域が作成されることを意味します。この領域内のすべての要素のレイアウトは、領域外の要素のレイアウトには影響しません。このレンダリング領域は、ブロックレベルの要素に対してのみ機能します。38. HTML セマンティクスとは何ですか? ページスタイルの読み込みに失敗した場合でも、ページに明確な構造が表示されることがあります SEO の最適化と検索エンジンによる包含に役立ちます (検索エンジンのクローラー プログラムが識別しやすくなります)プロジェクトの開発とメンテナンスを容易にし、HTML コードを読みやすくし、他のデバイスで解析しやすくします。 39. Doctype の役割は何ですか?厳密モードと混合モードの違いは何ですか?は、ドキュメントをレンダリングするモードをブラウザに指示するために使用されます 厳密モード: ページ レイアウトと JS 解析は、ブラウザーでサポートされている最高の標準に従って実行されます 混合モード: 標準に従って厳密に実装されておらず、主に古いブラウザとの互換性および下位互換性のために使用されます 40. IE の二重マージンのバグ: ブロックレベル要素がフローティングされた後に水平マージンが設定され、IE6 で表示されるマージンは設定されたマージンよりも大きくなります。解決策: join_display: inline41. HTML と XHTML - それらの違いは何ですか?1. すべてのタグには対応する終了タグが必要です 2. すべてのタグ要素と属性の名前は小文字である必要があります 3. すべての XML タグは適切にネストされている必要があります 4. すべての属性は引用符「」で囲む必要があります 5. すべての < および & 特殊記号をエンコードします。 6. すべての属性に値を割り当てます7. コメント内容に「--」を使用しないでください 8. 写真にはキャプションが必要です 42. HTML に関する一般的な互換性の問題? 1.ディスプレイを使用したフロートによるダブルマージンバグfloat の使用と dislpay:inline -3px の使用によって引き起こされる 2.3 ピクセルの問題 3. ハイパーリンクのホバーはクリック後に無効になります。ホバーがアクティブになったリンクは正しい書き込み順序を使用してください。 4.Ie z-index問題 親に対する位置を追加します 5.Png透明 jsコードを使用して変更します 6.Min-height最低身長！重要な解決済み 7.ie6 の下のカバーを選択し、iframe ネストを使用します 8. 約 1px の幅コンテナを定義する方法がないのはなぜですか (IE6 のデフォルトの行の高さが原因で、over: hidden、zoom: 0.08 line-height: 1px を使用します) 9.IE5-8 は不透明度をサポートしていません。解決策: .不透明度 { 不透明度: 0.4 フィルター: alpha(opacity=60) /* IE5-7用 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE 8 の場合*/ } 10. IE6 は PNG 透明背景をサポートしていません。解決策: IE6 で GIF 画像を使用してください 43. WEB標準とW3Cの理解と理解 答え: タグを閉じる、小文字のタグ、ネストしない、検索ロボットの検索確率を向上させる、外部リンク CSS および JS スクリプトを使用する、構造的な動作を分離する、ファイルのダウンロードとページ速度を高速化する、より多くのユーザーがコンテンツにアクセスできるようにする アクセス、コンテンツより幅広いデバイスからアクセスでき、コードとコンポーネントが少なく、保守が容易で改訂が容易で、ページのコンテンツを変更する必要がなく、コンテンツをコピーせずに印刷版を提供し、Web サイトの使いやすさが向上します。44. インライン要素とは何ですか? ブロックレベルの要素とは何ですか?答え: ブロックレベル要素: div p h1 h2 h3 h4 form ulインライン要素: a b br i スパン入力選択
CSSボックスモデル:コンテンツ、ボーダー、マージン、パディング 46. Doctype の役割は何ですか? これら 2 つのモードをトリガーする方法とそれらを区別する重要性は何ですか?(1) 宣言はドキュメントの先頭、 タグの前にあります。このドキュメントを解析するためにどのドキュメント タイプ仕様を使用するかをブラウザのパーサーに指示します。 (2) 厳密モードの組版と JS 操作モードは、ブラウザーがサポートする最高水準で実行されます。(3) 混合モードでは、ページは緩やかな下位互換性のある方法で表示されます。古いブラウザの動作をエミュレートして、サイトが機能しなくなるのを防ぎます。 (4)。DOCTYPE が存在しないか、形式が正しくないため、ドキュメントが混合モードで表示されます。 47. 業界内の要素は何ですか?ブロックレベル要素とは何ですか? 無効な要素とは何ですか? (1) CSS 仕様では、各要素には要素のタイプを決定する表示属性があることが規定されています。たとえば、div のデフォルトの表示属性値は「block」になります。 block-level" 要素;span のデフォルトの表示属性値は、「inline」要素である「inline」です。 (2) インライン要素には以下が含まれます: a b span img input select Strong (強調トーン) ブロックレベル要素には以下が含まれます: div ul ol li dl dt dd h1 h2 h3 h4…p(3) よく知られている空の要素: 48. CSSボックスモデル? (1) IE ボックス モデルと標準 W3C ボックス モデルの 2 種類。IE のコンテンツ部分は次のとおりです。 ボーダーとパディング; (2) ボックスモデル: コンテンツ、パディング、マージン、境界線。 49. CSSセレクターとは何ですか?どのようなプロパティを継承できますか?優先アルゴリズムはどのように計算されますか? CSS3 の新しい疑似クラスとは何ですか?* 1.IDセレクター(#myid) 2. クラスセレクター (.myclassname) 3. タグセレクター (div、h1、p) 4. 隣接セレクター (h1 + p) 5. サブセレクター (ul 6. 子孫セレクター (li a) 7. ワイルドカードセレクター (*) 8. 属性セレクター (a[rel = "external"]) 9. 疑似クラスセレクター (a: ホバー、li: nth - child) * * 継承可能: フォントサイズ、フォントファミリーの色、UL LI DL DD DT; * 継承不可: ボーダー パディング マージン 幅 高さ; * * 最も近い優先順位の原則に基づき、最も近いスタイル定義を持つものが優先されます。 * * 読み込みスタイルは、最後に読み込まれた位置の影響を受けます;優先順位: !重要 > クラス > 重要はインラインよりも優先されます CSS3 の新しい疑似クラスの例: p:first-of-type は、親要素の最初の 要素をすべて選択します。 p:last-of-type は、親要素の最後の 要素をすべて選択します。 p:only-of-type 親要素の唯一の 要素をすべて選択します。 p:only-child 親要素の唯一の子要素である各 要素を選択します。 p:nth-child(2) 親要素の 2 番目の子である各 要素を選択します。 :enabled、:disabled は、フォーム コントロールの無効な状態を制御します。 :チェックすると、ラジオボタンまたはチェックボックスが選択されます。 50. div を中央に配置する方法、浮動要素を中央に配置する方法? divに幅を設定し、margin:0 auto属性を追加しますディビジョン{ 幅:200px; マージン:0 自動; } フローティング要素を中央に配置する コンテナの幅と高さを決定します 幅500メートル、高さ300メートルの層 レイヤーの余白を設定します .div { width:500px; height:300px;//高さは省略可能です マージン: -150px 0 0 -250px; 位置:相対的な位置決め background-color:pink;//効果がわかりやすい 残り:50%; トップ:50%; } 51. ブラウザのコアは何ですか? 一般的なブラウザの互換性は何ですか?理由、解決策、一般的なハッキング手法 ? * IE ブラウザのカーネル Trident、Mozilla の Gecko、Google の WebKit、Opera カーネル Presto* 画像が png24 の場合、背景は iE6 ブラウザーに表示されます。解決策は、画像を PNG8 にすることです。 ※ブラウザのデフォルトのマージンとパディングは異なります。解決策は、グローバル *{margin:0;padding:0;} を追加して統合することです。* IE6 の二重マージンのバグ: ブロック属性ラベルがフローティングされ、水平方向のマージンが存在すると、IE6 で表示されるマージンが設定値よりも大きくなります。 フローティング IE #Box {float: left; 10px; によって生成される倍精度の距離 マージン:0 0 0 100px;} この場合、IE は 20px の距離を生成します。解決策は、それを float ラベル スタイル コントロールに追加することです。 ——_display:inline;inline 属性に変換します。 (_このシンボルはie6でのみ認識されます) decosionプログレッシブ識別方法を担当することは、全体から部品を徐々に除外することです。まず、「9」マークを賢く使用することで、IE ブラウザをあらゆる状況から区別します。 次に、再度「+」を使用して IE8 を IE7 および IE6 から分離し、IE8 が独立して認識されるようにします。 css .bb{ background-color:#f1ee18;/*すべての識別情報*/ .background-color:#00deff9; /*IE6、7、8 認識*/ +background-color:#a200ff;/*IE6、7 認識*/ _background-color:#1e0bd1;/*IE6 認識*/ } * IE では、通常の属性を取得するメソッドを使用してカスタム属性を取得できます。 getAttribute() を使用してカスタム属性を取得することもできます。Firefox では、カスタム属性を取得するには getAttribute() のみを使用できます。 解決策: getAttribute() を通じてカスタム属性を取得します。 * IE では、even オブジェクトには x、y 属性がありますが、pageX、pageY 属性はありません。 Firefox では、イベント オブジェクトには pageX 属性と pageY 属性がありますが、x 属性と y 属性はありません。* (条件付きコメント) 欠点は、IE ブラウザーで追加の HTTP リクエストが追加される可能性があることです。 * デフォルトでは、Chrome 中国語インターフェースは 12 ピクセルより小さいテキストを強制的に 12 ピクセルとして表示します。CSS 属性を追加できます。 -webkit-text-size-adjust: none; ハイパーリンクにアクセスすると、ホバー スタイルが表示されなくなります。 解決策は、CSS 属性の順序を変更することです。 L-V-H-A: a:リンク {} a:訪問済み {} a:ホバー {} a:アクティブ {}52. 表示の値を列挙し、その機能を説明します。位置、相対および絶対位置原点の値は何ですか? 1. ブロックはブロック型要素のように表示されます。 デフォルト値はありません。インライン要素タイプとして表示されます。 inline-block はインライン要素のように表示されますが、その内容はブロック型要素のように表示されます。List-item はブロック型要素のように表示され、スタイル リスト マークアップを追加します。 2. ポジションの価値 *絶対 静的配置以外に、最初の親要素を基準にして配置される絶対配置要素を生成します。 *修正済み (古いIEはサポートしていません) ブラウザ ウィンドウを基準にして絶対配置された要素を生成します。 *相対的 通常の位置を基準にして、相対的に配置された要素を生成します。 * 静的 デフォルト値。位置決めはなく、要素は通常のフローで表示されます *(上、下、左、右の Z-index 宣言は無視します)。 *継承は、position属性の値が親要素から継承されることを指定します。 53. 絶対包含ブロックの計算方法は通常のフローとどう違うのですか? 54、位置、表示、マージン 崩壊、溢れ、浮きの特徴が重なるとどうなるか？ 55. WEB標準とW3Cの理解と理解 閉じたタグ、小文字のタグ、ネストなし、検索ロボットの検索確率を向上、外部を使用 CSS と JS スクリプトのチェーン、構造的な動作とパフォーマンスの分離、ファイルのダウンロードとページ速度の高速化、より多くのユーザーがコンテンツにアクセスできる、より幅広いデバイスがコンテンツにアクセスできる、コードとコンポーネントが少なく、メンテナンスが容易 ページのコンテンツを変更せずに保守と改訂が簡単で、コンテンツをコピーせずに印刷版を提供し、Web サイトの使いやすさを向上させることができます。56. CSSの基本的なステートメント構造とは何ですか?セレクター {属性 1: 値 1; 属性 2: 値 2;…}57. ブラウザの標準モードと奇妙なモードの違いは何ですか? ボックスモデルのレンダリングモードの違い使用する window.top.document.compatMode はどのモードを表示できます 58. ブラウザの表示範囲内に DOM 要素が表示されないようにするには、CSS でどのような属性を定義できますか?
最も基本的なもの: 表示属性を none に設定するか、可視性属性を hidden に設定します スキル:幅と高さを 0 に設定し、透明度を 0 に設定し、Z インデックスの位置を -1000 に設定します 59. ハイパーリンクにアクセスしてもホバースタイルが表示されない問題は何ですか?の解き方？回答: クリックされて訪問されたハイパーリンク スタイルには、ホバーとアクティブがなくなりました。解決策は、CSS 属性の順序を L-V-H-A (リンク、訪問、ホバー、アクティブ) に変更することです。 60、CSSハックとは何ですか? IE6、7、8のハックは何ですか?答え: ブラウザごとに異なる CSS コードを記述するプロセスが CSS ハックです。 例は以下の通りです: #テスト 幅:300px;高さ:300ピクセル
背景色:青 /*Firefox*/ 背景色:red9; /*すべて ie*/ 背景色:黄色 +background-color:pink;_背景色:オレンジ /*ie6*/ } :root #test { 背景色:purple9 } /*ie9*/ @media all and (min-width:0px){ #test {背景色:黒 @メディア画面と (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome と safari*/
62 、Cssを使用して簡単なスライド効果ページを作成してください 回答: css3 を使用する必要があることはわかっています。アニメーションを使用して、単純なスライドショー効果を作成します。/**HTML**/ディビジョンアニ /**css**/ .アニ{ 幅:480px; 高さ:320px; マージン:50px 自動; オーバーフロー: 非表示; box-shadow:0 0 5px rgba(0,0,0,1); 背景サイズ: カバー; 背景の位置: 中央; -webkit-animation-name: 「ループ」; —webkit-animation-duration: 20 秒; -webkit-animation-iteration-count: 無限; } @-webkit-keyframes "ループ" { 0% { 背景:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) 繰り返しなし; } 25% { 背景:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) 繰り返し禁止; } 50% { 背景:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) 繰り返し禁止; } 75% { 背景:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) 繰り返し禁止; } 100% { 背景:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) 繰り返し禁止; } } 63 インライン要素とブロックレベル要素の具体的な違いは何ですか?インライン要素のパディングやマージンは設定できますか?ブロックレベル要素（ブロック）の特徴：常に別の行を占有します。つまり、新しい行で開始し、次の要素も新しい行に表示する必要があります。 幅、高さ、パディング、マージンはすべて制御可能です。
それでは、ブラウザにもデフォルトのインラインブロック要素（固有のサイズがあり、高さと幅を設定できますが、自動的に折り返されない）がありますには何があるのでしょうか？ 答え: |