インタビューの質問の多くは、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 という非常に重要なものがあります。これが何のためにあるのか知っていますか?

答え: 宣言はドキュメントの最前面、タグの前にあります。このタグは、ドキュメントが使用する 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: ストロングとエムの類似点と相違点は何ですか?

答え:

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

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

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

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

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

を追加すると、ネットワークリソースの場所を指し、現在の要素 (アンカー) または現在のドキュメント (リンク) へのリンクを確立します。 href=" common.css" rel="stylesheet"/>

すると、ブラウザはドキュメントを 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 自体にはパフォーマンスがありません。たとえば、

は太字、フォントサイズは 2em、です。 ; は太字です。これが 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代码放在  标签内部

内联样式，将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

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

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。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在
中的先后关系无关。

　　

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

　　答案：、、

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