PART1 CSS関連
1インライン要素とブロック要素は何ですか？
一般的なインライン要素（インライン要素）には、a、b、span、i、em、input、select、imgなどが含まれます。
一般的なブロック要素には、div、ul、li、h1〜h6、talbe、ol、ul、td、pなどが含まれます。
2フローティング関連
フローティングレイアウトとは、通常のストリーム/ドキュメントストリームから要素を削除することを指し、外側のエッジがボックスまたは別のフローティングボックスを含むエッジを満たすまで左右に移動できるようにします。フローティングボックスは、ドキュメント内の通常のストリームに属していません。要素が浮かぶ場合、ブロックレベルの要素のレイアウトには影響しませんが、インライン要素の配置にのみ影響します。
それはまさに、その親要素がその存在を知らないというドキュメントストリームからフローティング要素が分離されているため、0の高さとして動作します。フローティング要素がどのように変化しても、その親要素はそれを包みません。この現象は「高さ崩壊」とも呼ばれます。
次の例では、#floatdomの高さがどのように変化するかに関係なく、#parent heightは常に0です。
<div id = "parent"> <div id = "floatdom" style = "float：left; width：300px; height：300px;"> <div style = "clear：blos"> </div>
高度に崩壊した存在のため（これは私たちが期待するものではないことが多い）、浮きをクリアする必要があります。フローティングをクリアする方法は次のとおりです。
•「クリア：両方の」スタイルのフローティング要素のある要素を追加します
<div id = "parent"> <div id = "floatdom" style = "float：left; width：300px; height：300px;"> <div style = "clear：blos"> </div>
BRタグを追加することもできます。これにはクリア：両方の属性が付いています
<div id = "parent"> <div id = "floatdom" style = "float：left; width：300px; height：300px;"> <br/> </div>
この方法を使用してフローティングをクリアすることの利点は、理解しやすく、習得が簡単で、欠点も明らかであることです。多くの意味のないラベルが追加されていますが、これは後のメンテナンスで非常に苦痛です。
•親要素に「オーバーフロー：隠された」スタイルを追加します
<div id = "parent" style = "overflow：hidden"> <div id = "floatdom" style = "float：left; width：300px; height：300px;"> </div>
このように構造的およびセマンティックな問題はなく、コードの量は非常に少ないです。ただし、コンテンツが増加すると、コンテンツが自動的にラップされず、コンテンツが非表示になり、オーバーフローする必要がある要素を表示することはできません。
•使用：擬似要素後
<style type = "text/css"> .clearfix：after {content： "。";表示：ブロック;高さ：0;可視性：隠された;クリア：両方; } .clearfix { *Zoom：1; } </style> <div id = "parent"> <div id = "floatdom" style = "float：left; width：300px; height：300px;"> </div>この方法を使用すると、ターゲット要素にクラスを追加する必要があります。これは、現在最も一般的に使用されている方法でもあります。
参照
iyunlu.com/view/css-xht
3。相対レイアウトと絶対レイアウトの違い
相対レイアウトと絶対レイアウトの最も本質的な違いは、ドキュメントフローから分離されているかどうかです。
相対レイアウトはドキュメントフローから分離されていません。つまり、要素の相対レイアウトを設定した後、ドキュメントフローは依然として元の位置を維持します。上部や左などのプロパティを設定することにより、元の位置に対してオフセットを設定できます。
絶対レイアウトはドキュメントフローから分離されています。つまり、ドキュメントフローの要素は、絶対レイアウト要素の存在を知りません。絶対レイアウトの位置は、親要素に相対的なレイアウトまたは絶対レイアウトを持つ要素に関連しています。存在しない場合、それはボディレイアウトに関連しています。
4ボックスモデル
ボックスモデルは、コンテンツ（コンテンツ）、パディング（内側のマージン）、境界線（境界）、マージン（外縁）を含む要素の表示フォームを定義します。現在、2つのボックスモデル標準があり、1つはW3C標準ボックスモデル、もう1つはMicrosoft独自の標準を採用するIEボックスモデルです。
これら2つのボックスモデルの違いは、主に要素幅の計算にあります。標準モードのCSSで定義されている幅は、コンテンツの幅、ページ内の要素全体が占める幅、計算式は次のとおりです。
コードコピーは次のとおりです。
dom_width =幅 +パディング +ボーダー +マージン
IEボックスモデルでは、CSSで定義されている幅はコンテンツ +パディング +ボーダーです。したがって、IEボックスモデルでは、ページ内の要素全体が占める幅は（高さと同じ）です
コードコピーは次のとおりです。
dom_width =幅 +マージン
CSS3では、 box-sizingを使用して2つのボックスモデルが保持されています。 box-sizing: content-box （デフォルト）を設定すると、W3C標準ボックスモデルを採用します。 box-sizing:border-boxを設定するとき、IEボックスモデルを使用します。
5 CSSリセット（リセット）
各ブラウザにはいくつかのスタイルが付属しており、それに付属するスタイルは各ブラウザで異なることがよくあるため、レイアウトに不便をもたらします。したがって、実際には、ブラウザのCSSスタイル、つまりCSSリセットを「クリア」する必要があることがよくあります。最も単純なリセットコードは次のとおりです。
*{マージン：0;パディング：0;}この方法は単純ですが、DivやLiなどの多くの要素にはマージンやパディングスタイルがないため、デフォルトではマージンやパディングスタイルがないため、「暴力的」です。お客様のニーズに応じてリセットコードを作成するためのより推奨される方法。
参照：
www.zhangxinxu.com/wordpress/2010/08/html5-css-reset
6 CSSハック
異なるブラウザはCSSの解析とサポートが異なるため、異なるブラウザーで同じCSSコードが表示されます。これには、さまざまなブラウザーの互換性の問題を解決するためにCSSハックが必要です。さまざまなブラウザにさまざまなスタイルを作成するこのプロセスは、CSSハックと呼ばれます。
CSSハックにはいくつかの一般的な形式があります：
•プロパティハック
たとえば、IE6は_widthと*widthを認識できますが、IE7では*widthを認識できますが、 _widthを認識できません。どちらもFirefoxで認識されていません。
•文字ハックを選択します
たとえば、IE6は*html .class{}を認識でき、ie7は*+html .class{}または*:first-child+html .class{}を認識できます。
•条件ハック
IE条件付きアノテーションは、IE5以来Microsoftが提供する非標準の論理ステートメントです。たとえば、すべてのIEの場合：
<！[ie]> <！your code> <！[endif]>
IE6以下の場合：
<！[if lt ie 7]> <！your code> <！[endif]>
このタイプのハックは、CSSに有効になるだけでなく、判断ステートメントに記載されているすべてのコードにも有効になります。
参照
//www.vevb.com/css/226888.html
7優雅な劣化と進歩的な強化
プログレッシブエンハンスメントとは、最も基本的な機能を確保するための低バージョンブラウザのページの構築を指し、その後、高度なブラウザーの効果、相互作用、その他の改善、および追加の機能を改善して、より良いユーザーエクスペリエンスを実現します。
エレガントなダウングレードとは、最初から完全な機能を構築し、次に低いバージョンのブラウザと互換性のある構築を指します。
2つの違いは、エレガントなダウングレードが複雑な現状から始まり、ユーザーエクスペリエンスの供給を減らすことを試み、漸進的な強化は非常に基本的で機能的なバージョンから始まり、将来の環境のニーズを満たすために継続的に拡張されていることです。劣化（機能的崩壊）とは、振り返ることを意味します。一方、漸進的な強化とは、その基盤が安全なエリアにあることを確認しながら、楽しみにしていることを意味します。
8遭遇したブラウザの互換性の問題について教えてください
•さまざまなブラウザに表示される内側の縁と外側の縁は異なります。たとえば、ULタグにはデフォルトでFirefoxのパディング値がありますが、IEではマージンのみが値を持っています。
CSSリセットの使用（第5条を参照）
•IE6の二重マージンバグ、マージンはもともとブロックレベルの要素が浮かんだ後10pxですが、IEは20pxとして解釈されます。
ブロックレベルの要素表示をインラインに設定します
•MIN-HEIGHTはIE6ではサポートされていません
Min-Heightの機能は、レイアウトまたはUIの設計効果を破壊しないように、コンテナのコンテンツが少ないときに最小の高さを維持することです。コンテナ内のコンテンツが増加すると、コンテナは自動的に伸びてコンテンツの変更に適応できます。
これは次のように解決できます。
#targetdom {background：#ccc; Min-Height：100px;高さ：自動！重要。高さ：100px;オーバーフロー：可視; }•標準のイベントバインディングでのバインディングイベントのメソッド関数はaddEventListenerですが、IEはActitionEventを使用します
条件付き判断を通じて、2つの拘束力のあるステートメントを記述するか、jQueryなどのWebフレームワークライブラリを使用してバインドします。
•標準のブラウザはイベントキャプチャを採用し、IEはイベントバブルメカニズムを採用しています
その後、標準はバブルがより合理的であると考え、3番目のパラメーターを使用してAddEventListenerを2つのメカニズムと互換性があるように設定し、イベントバブルがデフォルト値でした。
•イベント処理のイベント属性は、標準のブラウザのイベント属性とは異なります。
標準のブラウザはパラメーターとして導入され、IEはwindow.eventで取得されます。ターゲット要素はE.Srcelementです。標準のブラウザはE.Targetです。
パート2その他
1一般的に使用されるHTTPステータスコードを理解します
200 OKはすべてOKです。GETおよびPOSTリクエストへの応答ドキュメントが続きます。
201が作成したサーバーがドキュメントを作成し、ロケーションヘッダーがそのURLを提供します。
202は、要求が受け入れられたことを受け入れましたが、処理は完了していません。
304変更されていないクライアントは、ドキュメントをバッファリングし、条件付きリクエストを発行します（通常、クライアントが指定された日付よりもドキュメントのみを更新したいことを示すIF修飾シンクのヘッダーを提供します）。サーバーは、元のバッファリングドキュメントを引き続き使用できることを顧客に伝えます。
400不良リクエストリクエストで構文エラーが発生しました。
404は、指定された場所のリソースが見つかりません。これは、一般的に使用される応答でもあります。
405メソッド許可されていないリクエストメソッド（Get、Post、Head、Delete、Put、Traceなど）は、指定されたリソースには適用できません。 （HTTP 1.1の新しい）
500内部サーバーエラーサーバーは予期しない状況に遭遇し、顧客の要求を完了できませんでした。
502次のサーバーにアクセスするリクエストを完了するために、悪いゲートウェイサーバーがゲートウェイまたはプロキシとして機能する場合、サーバーは違法な返信を返します。
2手書きのajaxリクエスト
// ie5およびie6のxmlhttprequestメソッドをmockしますif（window.xmlhttprequest === undefined）{window.xmlhttprequest = function（）{try {return bew activexobject（ "msxml2.xmlhtp.6.0"）; //利用可能、最新のActiveXオブジェクトを使用} catch（e1）{try {return new ActiveXObject（ "MSXML2.XMLHTTP.3.0"）; //以前のバージョンからバックオフ} catch（e2）{throw new error（ "xmlhttprequestがサポートされていません"）; }}}}}} // request function xhrget（url、callback）{var request = new xmlhttprequest（）; request.open（ 'get'、url、true）; request.onreadystatechange = function（）{if（request.readystate === 4 && request.status == 200）{callback && callback（request.responsetext）; }}; request.send（null）;} //要求関数xhrpost（url、data、callback）{var request = new xmlhttprequest（）; request.open（ 'post'、url、true）; request.setRequestHeader（ 'Content-Type'、 'Application/JSON'）; request.onreadystatechange = function（）{if（request.readystate === 4 && request.status == 200）{callback && callback（request）; }}; request.send（json.stringfy（data））;}これは、xmlhttprequestの従来の使用法です。 XMLHTTPREQUESTレベル2は多くの新しい方法を提案しており、私たちがよく言及するCORはこの方法からもあります。
XHR2の詳細については、推奨されるXMLHTTPREQUESTレベル2ユーザーガイド
3つのクロスドメインの問題
ページ上のAJAXを介して他のサーバーからデータを要求すると、クライアントはJavaScriptのブラウザの相同ポリシーにより、クロスドメインの問題を抱えています。いわゆる同じオリジンポリシーとは、同じソース（同じドメイン名、ポート番号、プロトコル）からのみリソースを要求できるスクリプトを指します。
上記のxmlhttprequestによって要求されたサービスアドレスが現在のファイルとは異なる場合、次のエラーがブラウザに表示されます。
では、この種のクロスドメインの問題を解決する方法は？
（1）CORを使用したクロスドメイン
「クロスオリジンリソースの共有、略してCORS）。CORSはXHR2で拡張する機能です。使用方法は非常に簡単です。サーバー側に設定します。
ヘッダーセットAccess-Control-Allow-Origin *
この設定は、すべてのドメイン名のクロスドメイン要求を受け入れます。特定のURLを指定することも、ドメイン名を制限することもできます。
ヘッダーセットAccess-Control-Allow-Origin http://www.test.com
ただし、このアプローチの制限は、クライアントがそれをサポートし、サーバーが関連する設定を実行する必要があることです。両方が満たされると、CORSを介したクロスドメインは、あらゆる種類のHTTP要求をサポートするだけでなく、開発者が通常のXMLHTTPREQUESTを使用してリクエストを開始し、JSONPよりも優れたエラー処理をするデータを取得できます。
（2）JSONPを使用して、跳躍することを達成します
古いブラウザの場合、彼らはCORSをサポートしない傾向があるため、クロスドメインにJSONPを使用することもJSONPを使用する一般的な方法です。
Webページの<script>要素のSRC仕様を介してターゲットスクリプトをロードすると、同じオリジンポリシーの影響を受けないため、他のサーバーからデータを要求するために使用できます。 ajax送信として<script>要素を使用するこのテクノロジーは、JSONPと呼ばれます。
JSONP実装の原則は次のとおりです。
関数getJsonp（url、callback）{var funcname = getuniquename（）; //タイムスタンプを使用するか、自動インクリメントカウンターを参照して、一意の関数名url + = "？callback =" + funcnameを取得します。 // url var script = document.createelement（ 'script'）にパラメーターとして関数名を追加する; // Dynamicly Build Script Tags //応答データをプロセス}最後に{//コールバック関数または応答がエラーをスローした場合でも、動的に追加されたコンテンツ削除getJSONP [funcname]をクリアします。 script.parentnode.RemoveChild（scipt）; }} //トリガーhttp request script.src = url; document.body.AppendChild（スクリプト）; }JSONPにはいくつかの欠点もあります。まず第一に、JSONPはGETをサポートしますが、POSTメソッドをサポートしていません。さらに、ajaxリクエストは<script>要素を使用して使用されます。つまり、Webページはリモートサーバーから送信されたJavaScriptコードを実行できます。したがって、この技術は、信頼していないサーバーに使用されるべきではありません。
（3）window.nameを使用してクロスドメインを使用します
ウィンドウオブジェクトには、名前の属性があります。つまり、ウィンドウのライフサイクル中に、ウィンドウによってロードされたすべてのページがウィンドウを共有し、各ページにはwindow.nameに許可を読み書きします。 window.nameは、ウィンドウで読み込まれたすべてのページで持続し、新しいページの読み込みのためにリセットされません。したがって、window.nameを備えたさまざまなソースのページにデータを渡すことができます。
www.a.com/a.htmlがwww.b.com/b.htmlでデータを取得したい場合、原則は次のとおりです。
a）window.name in b.htmlにデータを保存します
b）IDがプロキシに設定され、SRCがA.htmlと同じ起源に設定されていると仮定して、A.htmlで非表示（展示：なし）iframeタグを作成します。
c）次のコードを介してA.HTMLでデータを取得します
var proxy = document.getElementById（ 'proxy'）; proxy.onload = function（）{var data = proxy.contentwindow.name; // get data}d）関連要素を削除します
（4）window.postmessageを使用してドメインを横断します
この方法は比較的簡単です。ページAでwindowobj.postmessage（message、targetorigin）を使用してターゲットページに情報を送信し、ページBでメッセージイベントを聞くことで情報が取得されます。この方法はHTML5の新しい方法であり、IE6やIE7などの古いブラウザーには使用できません。
4ウェブサイトのパフォーマンスを改善する方法
ブロガーの他の2つの記事を参照してください。
ウェブサイトのパフォーマンスの向上に関するいくつかの提案
ウェブサイトのパフォーマンスの改善に関するいくつかの提案2
新しいコンテンツは継続的に更新されます...
ブログ著者：Vicfeel