大手インターネット企業のフロントエンド面接の質問 (HTML/CSS)

HTMLバージョン：

1. 作成したページはどのブラウザでテストされましたか?これらのブラウザのコアは何ですか?

• IE: トライデント カーネル
• Firefox: gecko カーネル
• Safari: Webkit カーネル
• Opera: 以前は presto カーネルでしたが、現在 Opera は Google Chrome の Blink カーネルに切り替わりました
• Chrome: Blink (Google と Opera Software が共同開発した Webkit に基づく)

2. すべての HTML ファイルの先頭に、Doctype という非常に重要な項目があります。これが何のためにあるか知っていますか?

答え: 宣言はドキュメントの先頭、 タグの前にあります。このタグは、ドキュメントが使用する HTML 仕様または XHTML 仕様をブラウザに伝えます。 (キーポイント: どの仕様に従ってページを解析するかをブラウザーに指示します)

3.Quirksモードとは何ですか？標準モードとの違いは何ですか

答え:

IE6 以降、標準モードが導入され、ブラウザは指定されたブラウザと同じように標準に準拠したドキュメントを処理しようとします。

CSS は IE6 より前では十分に成熟していなかったので、IE5 より前のブラウザやその他のブラウザでは CSS のサポートが強化されます。ただし、現時点では、多くのページが古い書き込みレイアウト モードに基づいているため、問題が発生します。 、IE6 が CSS をサポートしている場合、これらのページは異常に表示されます。既存のページが破壊されないようにして、新しいレンダリング メカニズムを提供するにはどうすればよいでしょうか。

プログラムを作成するとき、特に新しい機能が古い機能と互換性がない場合に、元のインターフェイスを変更せずに、より強力な機能を提供するにはどうすればよいかという問題によく遭遇します。この種の問題が発生した場合の一般的なアプローチは、パラメーターと分岐を追加することです。つまり、特定のパラメーターが true の場合は新しい関数を使用し、パラメーターが true でない場合は古い関数を使用します。破壊しない オリジナルのプログラムも新しい機能を提供します。 IE6 は、DTD をこの「パラメータ」として扱います。これは、DTD が記述されていれば、このページでは CSS レイアウトがより適切にサポートされることを意味するとみなします。 、以前のレイアウトは互換性があります。これがQuirksモード（個性モード、奇妙なモード、奇妙なモード）です。

違い:

レイアウト、スタイル分析、スクリプト実行の 3 つの側面で全体的な違いがあります。

ボックスモデル: W3C 標準では、要素の幅と高さを設定すると、要素のコンテンツの幅と高さを指します。Quirks モードでは、IE の幅と高さにはパディングとボーダーも含まれます。

インライン要素の高さと幅を設定する: 標準モードでは、 などのインライン要素の幅と高さの設定は有効になりませんが、互換モードでは有効になります。

パーセンテージの高さを設定する: 標準モードでは、要素の高さはそれに含まれるコンテンツによって決まります。親要素がパーセンテージの高さを設定していない場合、子要素がパーセンテージの高さを設定することは無効です。 margin:0 auto を使用して設定します。水平方向に中央揃え: margin:0 auto を使用すると、標準モードでは要素を水平方向に中央揃えにできますが、quirks モードでは失敗します。

（他にもたくさんあります。彼が何を答えるかは問題ではありません。重要なのは、彼が答えた答えが彼自身の経験から来たのか、それとも記事から読んだだけなのか、それとも当時は知らなかったのかです。全部。)

4. tableレイアウトと比較したdiv+cssレイアウトの利点は何ですか？

• バージョンを修正する場合はcssファイルを変更するだけで便利です。
• ページの読み込み速度が速く、構造が明確で、ページ表示がシンプルです。
• パフォーマンスと構造の分離。
• 最適化 (SEO) が容易な検索エンジンはよりフレンドリーであり、上位にランクされるのが簡単です。

5.a: img の alt と title の類似点と相違点は何ですか? b: ストロングとエムの類似点と相違点は何ですか?

答え:

あ:

• alt (代替テキスト): 画像、フォーム、またはアプレットを表示できないユーザー エージェント (UA) の場合、alt 属性は置換テキストを指定するために使用されます。置換テキストの言語は、lang 属性で指定します。 (IEブラウザではタイトルがない場合はツールチップにaltが表示されます)
• title(ツールチップ): この属性は、この属性が設定されている要素に関する推奨情報を提供します。

b:

• strong: 太字の強調タグ、強調、コンテンツの重要性を示します
• em: 斜体の強調タグはより強く強調され、コンテンツの強調を示します

6. プログレッシブエンハンスメントとグレースフルデグラデーションの違いについて説明できますか?

• 漸進的な機能強化: 最も基本的な機能を確保するために低バージョンのブラウザー用のページを構築し、効果やインタラクションを改善し、高度なブラウザー用の追加機能を追加して、より良いユーザー エクスペリエンスを実現します。
• グレースフル デグラデーション: 最初から完全な機能を構築し、下位バージョンのブラウザーと互換性を持たせます。

違い: グレースフル デグラデーションは複雑な現状から始まり、ユーザー エクスペリエンスの供給を減らそうとしますが、プログレッシブ エンハンスメントは非常に基本的な機能するバージョンから始まり、将来の環境のニーズに適応するために拡張し続けます。劣化（機能の衰退）は過去を振り返ることを意味し、漸進的な強化は根を安全地帯に保ちながら前を向くことを意味します。

「グレースフル・ダウングレード」の視点

「グレースフル・デグラデーション」の考え方では、ウェブサイトは最も高度で完全なブラウザー向けに設計されるべきだと考えています。 「古い」とみなされるブラウザ、または機能が欠けているブラウザのテストを開発サイクルの最終段階で手配し、テスト対象を主流ブラウザ (IE、Mozilla など) の以前のバージョンに限定します。

この設計パラダイムでは、古いブラウザは「貧弱だがまあまあ」のブラウジング エクスペリエンスしか提供しないと考えられます。特定のブラウザに合わせていくつかの小さな調整を行うことができます。ただし、それらは私たちの注意の焦点では​​ないため、大きなバグの修正を除いて、その他の違いは無視されます。

「プログレッシブ・エンハンスメント」の視点

「漸進的強化」の視点では、コンテンツ自体に焦点を当てるべきだと考えています。

ウェブサイトを構築する理由はコンテンツです。表示する Web サイト、収集する Web サイト、検索する Web サイト、運営する Web サイト、これらすべてを含む Web サイトもありますが、すべてコンテンツが含まれることは同じです。これにより、「プログレッシブ エンハンスメント」がより合理的な設計パラダイムになります。これが、Yahoo! によってすぐに採用され、「段階的ブラウザ サポート (段階的ブラウザ サポート)」戦略の構築に使用された理由です。

そこで質問です。製品マネージャーは、IE6、7、および 8 の Web ページの効果は、最新のバージョンの最新のブラウザーに比べて角の丸みや影 (CSS3) がはるかに少なく、互換性が必要であることを認識しました (画像の背景を使用し、CSS3 を放棄します)。彼を説得しますか？

(無料プレイ)

7. Web サイトのリソースを保存するために複数のドメイン名を使用する方が効果的であるのはなぜですか?

• CDNキャッシュがさらに便利になりました
• ブラウザの同時実行制限を突破する
• Cookieの帯域幅を節約する
• メインドメイン名への接続数を節約し、ページの応答速度を最適化します
• 不必要なセキュリティ問題を防止します

8. ウェブ標準と標準設定団体の重要性についてのあなたの認識について話してください。

（標準的な答えはありません） Web標準と標準設定組織はすべて、開発者が統一標準に従い、開発の難易度や開発コストを軽減し、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、Apng を聞きたいと考えています。 (新しい技術や新しいものに注目していますか)

ポピュラーサイエンス Webp: WebP 形式。画像の読み込みを高速化するために Google によって開発された画像形式。画像圧縮量は JPEG の約 2/3 にすぎず、サーバーの帯域幅リソースとデータ容量を大幅に節約できます。 Facebook Ebay などの有名な Web サイトは、WebP 形式のテストと使用を開始しています。

同じ品質であれば、WebP 形式の画像の体積は JPEG 形式の画像より 40% 小さくなります。

Apng: 正式名称は「Animated Portable Network Graphics」で、PNG形式で動的な画像効果を実現できるPNGのビットマップアニメーション拡張機能です。 2004 年に誕生しましたが、最近 iOS Safari 8 でサポートされるまで、主要なブラウザ メーカーではサポートされていませんでしたが、GIF に代わる次世代のダイナミック グラフィックス標準になることが期待されています。

12. マイクロフォーマットってご存知ですか？理解について話してください。フロントエンド ビルドではマイクロフォーマットを考慮する必要がありますか?

答え:

Microformats は、機械可読なセマンティックな XHTML 語彙のコレクションであり、構造化データのオープン標準です。特殊なアプリケーションのために開発された特殊な形式です。

利点: Web ページにスマート データを追加すると、Web サイトのコンテンツが検索エンジンの結果インターフェイスに追加のヒントを表示できるようになります。 (応用例：Douban、興味があれば自分でググってみてください)

13. CSS/JS コードがオンラインになった後、開発者は通常、ユーザーが Web ページを更新した時点からパフォーマンスを最適化します。JS リクエストは通常​​どこにキャッシュされますか?

答え: DNS キャッシュ、CDN キャッシュ、ブラウザ キャッシュ、サーバー キャッシュ。

14. 1 ページに大量の写真があり (大規模な電子商取引 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 は主に Web サイトのコンテンツと外部リンクに依存します。

チーム開発とメンテナンスが簡単

• 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サイトのコンテンツを収集する方法です。ディレクトリは手動で編集され、主に Web サイトのホームページが含まれます。検索エンジンは自動的にディレクトリを収集し、ホームページに加えて多数のコンテンツ ページをクロールします。
• クリック課金型検索エンジン

検索エンジンも生き残る必要があります。インターネットコマースがますます成熟するにつれ、有料の検索エンジンが普及してきました。最も代表的なのはOvertureとBaidu、そしてもちろんGoogleの広告プロジェクトGoogle Adwordsだ。商用 Web サイトを見つけるために検索エンジンのクリック広告を使用する人が増えています。また、最小限の広告投資で最大限のクリック数を獲得する方法についても学ぶ必要があります。

• 検索エンジンへのログイン

ウェブサイトが完成したら、そこに横たわって顧客が空から降ってくるのを待ってはいけません。他の人にあなたを見つけてもらう最も簡単な方法は、Web サイトを検索エンジンに送信することです。商用 Web サイトをお持ちの場合、主要な検索エンジンやディレクトリを含めるには料金を支払う必要があります (例: Yahoo は 299 ドルかかります)。しかし良いニュースは、(少なくともこれまでのところ) 最大の検索エンジンである Google は現在無料であるということです。 、検索市場の 60% 以上のコントロールを支配しています。

• リンク交換とリンク人気度(Link Popularity)

Webコンテンツはハイパーテキストの形で相互にリンクされており、Webサイト間でも同様です。検索エンジンに加えて、人々は毎日、さまざまな Web サイト間のリンクを通じてサーフィン (「サーフィン」) を行っています。他の Web サイトからあなたの Web サイトへのリンクが増えるほど、より多くのトラフィックが得られます。さらに重要なのは、Web サイトに外部リンクが多いほど、検索エンジンによる重要性が高く評価され、ランキングが高くなります。

• タグの合理的な使用

CSS:

1. DOM の CSS スタイルを設定する方法はありますか?

• 外部スタイルシート、外部CSSファイルを導入します
• 内部スタイルシート、CSSコードをタグの中に入れます
• インライン スタイル、CSS スタイルを HTML 要素内で直接定義します

2.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

それでは、次のコードを見てください、

タグ内のテキストは何色ですか? 。


リーリー


　　答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在

中的先后关系无关。 

　　

　　3.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？　　

　　最基本的：

　　设置display属性为none，或者设置visibility属性为hidden

　　技巧性：

　　设置宽高为0，设置透明度为0，设置z-index位置在-1000

 

　　4.超链接访问过后hover样式就不出现的问题是什么？如何解决？

　　答案：被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

 

　　5.什么是Css Hack？ie6,7,8的hack分别是什么？

　　答案：针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

　　示例如下：


 1  #test       {   
 2         width:300px;   
 3         height:300px;   
 4           
 5         background-color:blue;      /*firefox*/
 6         background-color:red\9;      /*all ie*/
 7         background-color:yellow\0;    /*ie8*/
 8         +background-color:pink;        /*ie7*/
 9         _background-color:orange;       /*ie6*/    }  
10         :root #test { background-color:purple\9; }  /*ie9*/
11     @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/
12     @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }       /*chrome and safari*/


 

　　6.请用Css写一个简单的幻灯片效果页面

　　答案：知道是要用css3。使用animation动画实现一个简单的幻灯片效果。


 1         /**HTML**/
 2         div.ani
 3 
 4         /**css**/
 5         .ani{
 6           width:480px;
 7           height:320px;
 8           margin:50px auto;
 9           overflow: hidden;
10           box-shadow:0 0 5px rgba(0,0,0,1);
11           background-size: cover;
12           background-position: center;
13           -webkit-animation-name: "loops";
14           -webkit-animation-duration: 20s;
15           -webkit-animation-iteration-count: infinite;
16         }
17         @-webkit-keyframes "loops" {
18             0% {
19                 background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;             
20             }
21             25% {
22                 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
23             }
24             50% {
25                 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
26             }
27             75% {
28                 background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
29             }
30             100% {
31                 background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
32             }
33         }


 

　　7.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

　　块级元素(block)特性：

• 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
• 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
　　内联元素(inline)特性：
• 和相邻的内联元素在同一行;
• 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

　　那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

　　答案： 、 、 、 、<label>。</label>

 

　　8.什么是外边距重叠？重叠的结果是什么？

　　答案：

　　外边距重叠就是margin-collapse。

　　在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

　　折叠结果遵循下列计算规则：

1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。

　　

　　9.rgba()和opacity的透明效果有什么不同？

　　答案：

　　rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

　　而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

 

　　10.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

　　答案：

　　垂直方向：line-height

　　水平方向：letter-spacing

 

　　那么问题来了，关于letter-spacing的妙用知道有哪些么？

　　答案:可以用于消除inline-block元素间的换行符空格间隙问题。

 

　　11.如何垂直居中一个浮动元素？

 1 // 方法一：已知元素的高宽
 2 
 3 #div1{
 4     background-color:#6699FF;
 5     width:200px;
 6     height:200px;
 7 
 8     position: absolute;        //父元素需要相对定位
 9     top: 50%;
10     left: 50%;
11     margin-top:-100px ;   //二分之一的height，width
12     margin-left: -100px;
13     }
14 
15 //方法二:
16 
17   #div1{
18     width: 200px;
19     height: 200px;
20     background-color: #6699FF;
21 
22     margin:auto;
23     position: absolute;        //父元素需要相对定位
24     left: 0;
25     top: 0;
26     right: 0;
27     bottom: 0;
28     }

 　　那么问题来了，如何垂直居中一个?（用更简便的方法。）

1 #container     //<img  alt="大手インターネット企業のフロントエンド面接の質問 (HTML/CSS)" >的容器设置如下
2 {
3     display:table-cell;
4     text-align:center;
5     vertical-align:middle;
6 }

 

　　12.px和em的区别。

　　px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

　　浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

 

　　13.描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？　

　　重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。

　　你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。

　　在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。

 

　　14.Sass、LESS是什么？大家为什么要使用他们？

　　他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

　　例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

　　为什么要使用它们？

• 结构清晰，便于扩展。
• 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
• 可以轻松实现多重继承。
• 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

　　

　　15.display:none与visibility:hidden的区别是什么？

• display : 隐藏对应的元素但不挤占该元素原来的空间。
• visibility: 隐藏对应的元素并且挤占该元素原来的空间。

 　　即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

　　

　　16.知道css有个content属性吗？有什么作用？有什么应用？

　　答案：

　　知道。css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。

　　最常见的应用是利用伪类清除浮动。

 1 //一种常见利用伪类清除浮动的代码
 2  .clearfix:after {
 3     content:".";       //这里利用到了content属性
 4     display:block; 
 5     height:0;
 6     visibility:hidden; 
 7     clear:both; }
 8 
 9 .clearfix { 
10     *zoom:1; 
11 }

　　after伪元素通过 content 在元素的后面生成了内容为一个点的块级元素，再利用clear:both清除浮动。

　　那么问题继续还有，知道css计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？

　　答案：css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。 

　　具体实现方案：请戳张鑫旭大大的博文CSS计数器(序列数字字符自动递增)详解