BAT および大手インターネット企業の 2014 年フロントエンド筆記試験面接の質問 Html、Css_html/css_WEB-ITnose

インタビューの質問の多くは、BATにインタビューした私自身の経験から来ました。より多くのフロントエンド担当者が一緒に進歩できることを願って、この内容をまとめて共有しました。求職者だけでなく、フロントエンドの基礎を固め、復習するのにも非常に役立ちます。

また、過去の質問だけでなく、私が収集した質問も多数あります。間違いやより良い解決策がある場合は、修正してください。

最初のいくつかの質問は非常に基本的なもので、質問が進むにつれてさらに深くなっていきます。

最初の記事を添付します: BAT と大手インターネット企業の 2014 年のフロントエンド筆記試験面接の質問 - JavaScript

HTML 記事:

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

IE: trident kernel

Firefox: gecko kernel

Safari: webkit kernel

Opera: presto kernel

Chrome: Blink (based on webkit)

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

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

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

答え:

IE6 から標準モードが導入されました。標準モードでは、ブラウザは標準に準拠したドキュメントに仕様に準拠した正しい処理を与えようとします。指定されたブラウザで。

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

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

違い:

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

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

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

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

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

4 テーブル レイアウトに対する .div+css レイアウトの利点は何ですか?

バージョンを修正するときはcssファイルを変更するだけで便利です。

ページの読み込み速度が速くなり、構造が明確で、ページの表示が簡潔になります。

パフォーマンスと構造は分離されています。

最適化 (SEO) が容易な検索エンジンはよりフレンドリーであり、より上位にランクされるのが簡単です。

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

答え:

a:

alt(alt text): 画像、フォーム、アプレットを表示できないユーザーエージェント(UA)の場合、alt属性は置換テキストを指定するために使用されます。置換テキストの言語は、lang 属性によって指定されます。 (IE ブラウザでは、タイトルがない場合、ツールチップとして alt が表示されます)

title(ツールチップ): この属性は、この属性が設定されている要素に関する推奨情報を提供します。

b:

strong: 太字の強調タグ、強調、コンテンツの重要性を示します

em: 斜体の強調タグ、より強い強調、コンテンツの強調を示します

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

段階的な強化: 最も基本的な機能を確保するために低バージョンのブラウザー用のページを構築し、その後、効果やインタラクションを改善し、より優れたユーザー エクスペリエンスを実現するための機能を追加します。

グレースフル デグラデーション: 最初から完全な機能を構築し、それから下位バージョンのブラウザーと互換性を持たせます。

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

「グレースフル デグラデーション」の観点

「グレースフル デグラデーション」の観点は、ウェブサイトは最も高度で完全なブラウザー向けに設計されるべきであると信じています。 「古い」とみなされるブラウザや機能が欠落しているブラウザでのテスト作業は開発サイクルの最終段階で行われ、テスト対象は主流ブラウザ（IE、Mozilla など）の前のバージョンに限定されます。

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

「Progressive Enhancement」の視点

「Progressive Enhancement」の視点は、コンテンツそのものに注意を払うべきだと考えます。

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

それが問題だ。プロダクト マネージャーは、IE6、7、および 8 の Web ページの効果は最新のブラウザーに比べて角の丸みや影 (CSS3) がはるかに少なく、互換性が必要である (画像の背景を使用し、CSS3 を放棄する) ことを理解しました。どうやって彼を説得しますか? ?

（無料プレイ）

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

CDN キャッシュがより便利になります

ブラウザの同時実行制限を突破します

Cookie 帯域幅を節約します

メインドメイン名への接続数を節約し、ページ応答速度を最適化します

不必要なセキュリティ問題を防ぎます

8 .Web標準と標準設定団体の重要性についてのあなたの理解について話してください。

（標準的な答えはありません） Web 標準と標準設定組織はすべて、開発者が統一された標準に従い、開発の難易度や開発コストを軽減し、SEO の悪用を改善するように設計されています。コードはさまざまなバグやセキュリティ問題を引き起こし、最終的には Web サイトの使いやすさを向上させます。

9.Cookie、sessionStorage、localStorageの違いについて説明してください。

SessionStorage は、セッション内のデータをローカルに保存するために使用されます。これらのデータは、同じセッション内のページからのみアクセスでき、セッションが終了するとデータは破棄されます。したがって、sessionStorage は永続的なローカル ストレージではなく、セッション レベルのストレージにすぎません。 LocalStorage は、データがアクティブに削除されない限り、永続的なローカル ストレージとして使用されます。

Web ストレージと 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などのドキュメント 画像やフレームなどの要素。

eacbf2baa01ef0de186989ea2e77009f2cacc6d41bbb37262a98f745aa00fbf0

ブラウザはこの要素を解析するとき、リソースがロードされ、コンパイルされ、実行されるまで、他のリソースのダウンロードと処理を一時停止します。画像やフレームなどの要素にも同じことが当てはまります。これは、現在のタグ内にポイントされたリソースを埋め込むのと似ています。これが、js スクリプトが先頭ではなく下部に配置される理由でもあります。

href は Hypertext Reference の略で、ドキュメント 7ea58d6b02714c85da86ba13393f5530

すると、ブラウザはドキュメントを 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. 1 つのページ (大規模な電子商取引 Web サイト) に多数の写真があり、読み込みが非常に遅いです。ユーザーにより良いエクスペリエンスを提供するために、これらの写真の読み込みを最適化するにはどのような方法が必要ですか。 。

画像の遅延読み込み ページ上の見えない領域にスクロールバーイベントを追加して、画像の位置とブラウザの上部の間の距離、および前者の場合はページとページの間の距離を決定できます。後者より小さい場合は、最初にロードされます。

スライドショーやフォトアルバムなどの場合は、画像プリロード技術を使用して、現在表示されている画像の前と次の画像を最初にダウンロードできます。

画像が CSS 画像の場合は、CSSsprite、SVGsprite、Iconfont、Base64 などのテクノロジーを使用できます。

画像が大きすぎる場合は、ロード時に特別に圧縮されたサムネイルが最初にロードされ、ユーザーエクスペリエンスが向上します。

画像の表示領域が画像の実際のサイズより小さい場合、画像はビジネスニーズに応じてサーバー側で最初に圧縮され、圧縮された画像サイズは表示と一致します。

15. HTML 構造のセマンティクスをどのように理解しますか? 削除されるか、スタイルが失われると、ページは明確な構造を示すことができます:

html 自体にはパフォーマンスがありません。たとえば、4a249f0d628e2318394fd9b75b4636b1 は太字、フォント サイズは 2em、8e99a69fbe029cd4e2b854e244eab143 です。 ; は太字です。これが HTML のパフォーマンスであるとは思わないでください。これらは実際には HTML のデフォルトの CSS スタイルであるため、削除または紛失した場合、ページは明確な構造を示すことができます。これは、セマンティック HTML 構造の利点ではありません。ただし、ブラウジング すべてのブラウザにはデフォルト スタイルがあります。デフォルト スタイルの目的は、HTML のセマンティクスをより適切に表現することです。ブラウザのデフォルト スタイルとセマンティクス HTML 構造は切り離せないものと言えます。

スクリーン リーダー (訪問者が視覚障害がある場合) は、マークアップに完全に基づいてページを「読み取り」ます

たとえば、セマンティック マークアップを使用する場合、スクリーン リーダーは単語を発音しようとするのではなく、単語を「綴り」ます。完全に

PDA、携帯電話、その他のデバイスは、通常のコンピュータ ブラウザのように Web ページをレンダリングできない場合があります (通常、これらのデバイスの CSS サポートが弱いため)

セマンティック マークアップを使用すると、これらのデバイスが意味のある方法で Web ページをレンダリングできるようになります。理想的には、表示デバイスのタスクは、デバイス自体の条件に従って Web ページをレンダリングすることです

セマンティック マークアップはデバイスに必要な関連情報を提供するため、考えられるすべての表示状況を自分で考慮する必要がなくなります (たとえば、携帯電話では、タイトルが付けられたテキストのセクションを太字で表示することができます。いずれにしても、タイトルを付けると、そのセクションがより大きなフォントで表示されます。テキストをタイトルとして使用すると、読み取りデバイスが独自の条件でページを適切に表示すると確信できます

検索エンジンのクローラーもマークアップに依存して、個々のキーワードのコンテキストと重みを決定します

で検索することを考えたこともないかもしれません。以前のエンジン クローラーも Web サイトの「訪問者」でしたが、現在は非常に貴重なユーザーです。クローラーがなければ、検索エンジンは Web サイトをインデックスできず、一般ユーザーが訪問することは困難になります。

あなたのページです クローラーにとって理解しやすいことは非常に重要です、なぜならクローラーはプレゼンテーションに使用されるマークアップをほとんど無視し、セマンティックマークアップのみに焦点を当てるからです

したがって、ページファイルのタイトルが代わりにタグ付けされている場合。検索結果におけるこのページの位置 セマンティック マークアップは、使いやすさの向上に加えて、スタイルと動作を適用するための多くの「フック」をそれ自体で提供するため、CSS と JavaScript の正しい使用に役立ちます。ページの
SEO は主に Web サイトのコンテンツと外部リンクに依存します。

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

W3C は私たちに良い標準を設定しており、チームの全員がこの標準に従っています。これにより、多くの差別化されたものが削減され、開発とメンテナンスが容易になり、開発のモジュール化も実現できます。

16. フロントエンドの観点からSEOを行う際に考慮する必要があることについて話しますか？

検索エンジンが Web ページをどのようにクロールし、インデックスを作成するかを理解します

検索エンジンの基本的な動作原理、検索エンジン間の違い、検索ロボット (SE ロボットまたは Web クローラー) の仕組み、検索 エンジンが検索結果をランク付けする方法を理解する必要がありますもっと。

メタタグの最適化

主にテーマ（Title）、ウェブサイトの説明（Description）、キーワード（Keywords）が含まれます。他にも、Author (作成者)、Category (ディレクトリ)、Language (エンコード言語) などの隠しテキストがあります。

キーワードを選択してウェブページに配置する方法

検索するときはキーワードを使用する必要があります。キーワードの分析と選択は、SEO の最も重要なタスクの 1 つです。まず、Web サイトの主要なキーワード (通常は約 5) を決定し、キーワードの密度 (Density)、関連性 (Relavancy)、顕著性 (Prominency) などを含めてこれらのキーワードを最適化します。

主要な検索エンジンを理解する

検索エンジンはたくさんありますが、ウェブサイトのトラフィックを決定するものはほんのわずかです。たとえば、英語のものには主に Google、Yahoo、Bing などが含まれ、中国語のものには Baidu、Sogou、Youdao などが含まれます。検索エンジンが異なれば、ページのクロール、インデックス作成、並べ替えに関するルールも異なります。また、検索ポータルと検索エンジンの関係についても理解する必要があります。たとえば、AOL は Web 検索に Google の検索テクノロジーを使用し、MSN は Bing のテクノロジーを使用します。

Main Internet Directory

Open Directory 自体は検索エンジンではありませんが、検索エンジンとの主な違いは、Web サイトのコンテンツが収集される方法です。ディレクトリは手動で編集され、主に Web サイトのホームページが含まれます。検索エンジンは自動的にディレクトリを収集し、ホームページに加えて多数のコンテンツ ページをクロールします。

クリック課金型検索エンジン

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

検索エンジンログイン

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

链接交换和链接广泛度（Link Popularity）

　　网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。

合理的标签使用 

　

 

　　Css篇：

　　1.有哪项方式可以对一个DOM设置它的CSS样式？　　

外部样式表，引入一个外部css文件

内部样式表，将css代码放在 93f0f5c25f18dab9d176bd4f6de5d30e 标签内部

内联样式，将css样式直接定义在 HTML 元素内部

　　

　　2.CSS都有哪些选择器？

派生选择器（用HTML标签申明）

id选择器（用DOM的ID申明）

类选择器（用一个样式类名申明）

属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）

　　除了前3种基本选择器，还有一些扩展选择器，包括

后代选择器（利用空格间隔，比如div .a{  }）

群组选择器（利用逗号间隔，比如p,div,#a{  }）　

　　那么问题来了，CSS选择器的优先级是怎么样定义的？

　　基本原则：

　　一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

　　复杂的计算方法：

用1表示派生选择器的优先级

用10表示类选择器的优先级

用100标示ID选择器的优先级

div.test1 .span var 优先级 1+10 +10 +1  

span#xxx .songs li 优先级1+100 + 10 + 1  

#xxx li 优先级 100 +1 

　　那么问题来了，看下列代码，e388a4556c0f65e1904146cc1a846bee标签内的文字是什么颜色的？。

 1 <style> 2 .classA{ color:blue;} 3  4 .classB{ color:red;} 5 </style> 6  7 <body> 8  9 <p class='classB classA'> 123 </p>10 11 </body>

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

　　

　　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元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

　　答案：d5fd7aea971a85678ba271703566ebfd 、a1f02c36ba31691bcfe87b2722de723b 、bb9345e55eb71822850ff156dfde57c8 、8eb5ffa65cae04ba07512d6af56b9a15 、2e1cf0710519d5598b1f0f14c36ba674。

 

　　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     }

 

　　12.px和em的区别。

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

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

　　

　　

　　觉得题目还ok的亲点个推荐哦，题量会不断增加。

　　你可能会感兴趣：BAT及各大互联网公司2014前端笔试面试题--JavaScript篇。

　　暂且贴出我做出答案的部分。有时间把未做出答案也贴出来。针对文中各题，如有更好的解决方法或者错误之处，各位亲务必告知我，误人子弟实乃罪过。