21. Css Hackとは何ですか？ie6,7,8のハックは何ですか？
回答：ブラウザごとに異なるCSSコードを作成するプロセスは、CSSハックです。
例は次のとおりです。
#test {
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple\9; } /*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 and safari*/
22. Cssを使用して、簡単なスライドショーページを作成してください
回答：css3を使用したいのはわかっています。アニメーションアニメーションを使用して、単純なスライド効果を実現します。
/**HTML**/
div.ani
/**css**/
.ani{
width:480px;
height:320px;
margin:50px auto;
overflow: hidden;
box-shadow:0 0 5px rgba(0,0,0,1);
background-size: cover;
background-position: center;
-webkit-animation-name: "loops";
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
0% {
background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;
}
25% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
}
50% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
}
75% {
background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
}
100% {
background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
}
}
24.インライン要素とブロックレベル要素の具体的な違いは何ですか？インライン要素のパディングとマージンを設定できますか？
ブロックレベルの要素（ブロック）の特性：
常に行を占有し、新しい行の開始点として動作します。また、
幅（幅）、高さ（高さ）、内側の余白（パディング）、および次の要素も新しい行に表示する必要があります。外側マージン距離（マージン）を制御できます。
インライン要素（インライン）の特性：
隣接するインライン要素と同じ行内;
幅（幅）、高さ（高さ）、内側マージンの上部/下部（パディング-上部/パディング-下部）および外部マージンの上部/下部（マージン- top / margin-bottom）は変更できません（つまり、パディングとマージンの左右を設定できます）。これは、内部のテキストまたは画像のサイズです。
つまり、ブラウザにはデフォルトのインラインブロック要素もあります（組み込みのサイズ、高さ、幅は設定できますが、自動的に折り返されることはありません）、何がありますか？
回答：<input> 、<img> 、<button> 、<texterea> 、<label> 。
25.マージンオーバーラップとは何ですか？重なりの結果は何ですか？
重複するマージンはマージンの崩壊です。
CSSでは、2つの隣接するボックス（兄弟または祖先の場合があります）の余白を1つの余白に組み合わせることができます。マージンを組み合わせるこの方法はフォールディングと呼ばれ、結合されたマージンはフォールドマージンと呼ばれます。
折り畳み結果は、次の計算規則に従います
。2つの隣接するマージンが両方とも正の場合、折り畳み結果はそれらの間の値が大きくなります。
2つの隣接するマージンが両方とも負の場合、折り畳みの結果は2つの絶対値の大きい方になります。
2つの外側マージンが1つが正で、もう1つが負の場合、折り畳みの結果は2つの合計になります。
26. rgba（）の透明効果と不透明度の違いは何ですか？
rgba（）と不透明度はどちらも透明度を実現できますが、最大の違いは、不透明度が要素と要素内のすべてのコンテンツの透明度に作用するの
に対し、rgba（）は要素の色またはその背景色にのみ作用することです。（rgbaをtransparentに設定する要素の子要素は、transparent効果を継承しません！）
27. cssでテキストを垂直方向と水平方向にオーバーラップさせることができる2つの属性は何ですか？
垂直方向：行の高さ
水平方向：文字間隔
それで、問題は、文字間隔の魔法の効果が何であるか知っていますか？
回答：インラインブロック要素間のスペースギャップをなくすために使用できます。
28.フローティングエレメントを垂直方向の中央に配置するにはどうすればよいですか？
// 方法一：已知元素的高宽
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}
//方法二:未知元素的高宽
#div1{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; //父元素需要相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}
したがって、問題は、1つを垂直方向に中央<img>揃えする方法ですか？（より簡単な方法を使用してください）。
#container //<img>的容器设置如下
{
display:table-cell;
text-align:center;
vertical-align:middle;
}
29.pxとemの違い。
pxとemはどちらも長さの単位です。違いは、pxの値が固定されていることと、計算が簡単に指定できることです。em値は固定されておらず、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は、変数、継承、計算、関数などの動的言語機能を提供します。Lessは、クライアント（IE 6以降、Webkit、Firefoxをサポート）またはすべてのサーバーで実行できます（ Node.jsの助けを借りて）。
なぜそれらを使用するのですか？
構造は明確で拡張しやすいです。
ブラウザのプライベート構文の違いを簡単に保護できます。言うまでもなく、ブラウザの構文の違いの繰り返し処理をカプセル化し、無意味な機械的労力を削減します。
多重継承は簡単に実現できます。
CSSコードと完全に互換性があり、古いプロジェクトに簡単に適用できます。LESSはCSS構文の単なる拡張であるため、古いCSSコードをLESSコードと一緒にコンパイルすることもできます。
32.表示：なしと可視性：非表示の違いは何ですか？
表示：対応する要素を非表示にしますが、要素の元のスペースを占有しません。
可視性：対応する要素を非表示にし、要素の元のスペースを絞ります。
つまり、CSS表示を使用した後：なし属性、HTML要素（オブジェクト）の幅、高さ、およびその他の属性値は「失われます」;そして可視性を使用した後：非表示属性、HTML要素（オブジェクト）視覚的にしか見えないそれは欠けており（完全に透明）、それが占めるスペースはまだそこにあります。
34.CSSのlinkと@importの違いは次のとおりです。
リンクはhtmlタグに属し、@ importはCSSで提供さ
れます。ページが読み込まれると、リンクも同時に読み込まれ、
@ importによって参照されるCSSは、ページが読み込まれた後に参照されるCSSを読み込みます。@インポートは、ページがie5より上にある場合にのみ使用できます。認識可能であり、リンクはhtmlタグであり、ブラウザーの互換性の問題はありません。
リンクのインポートスタイルは、@ importの参照よりも重要です（@importは、参照されるスタイルをにインポートすることです）。現在のページ）
35.ボックスモデルの概要：
2つのCSSボックスモデルがあります：IEボックスモデル、標準W3Cボックスモデルモデル
ボックスモデル：コンテンツ、内側マージン、外側マージン（通常、ボックスの実際の幅には含まれません）、境界線
36.なぜスタイルを初期化したいのですか？
ブラウザの互換性の問題により、ブラウザごとにタグのデフォルトのスタイル値が異なります。初期化しないと、ブラウザ間で表示が異なります。
ただし、CSSを初期化すると、検索エンジンの最適化にわずかな影響があります。
37. BFCとは何ですか？
新しいBFCを作成するボックスであるBFC（Block Formatting Contexts）は独立して配置され、ボックス内の要素のレイアウトはボックス外の要素に影響を与えません。同じBFC内の2つの隣接するボックスには、垂直方向にオーバーラップするマージンがあります
。BFCは、ブラウザでの独立したレンダリング領域の作成を指します。この領域内のすべての要素のレイアウトは、領域外の要素のレイアウトに影響しません。、これレンダリング領域はブロックレベルの要素でのみ機能します
38. htmlセマンティクスとは何ですか？
ページスタイルの読み込みに失敗すると、ページに明確な構造を表示できます
。seoの最適化に適し、検索エンジンに含まれています（検索エンジンのクローラーが識別し
やすくなります）。プロジェクトの開発と保守に便利です。htmlコードが読みやすくなります。他のデバイスで簡単に分析できます。
39. Doctypeの役割は何ですか？ストリクトモードとプロミスキャスモードの違いは何ですか？
ドキュメントをレンダリングするモードをブラウザに指示するために使用されます厳密モード：ページレイアウトとJS解析は、ブラウザでサポートされている最高の標準に従って実行され
ます。混合モード：厳密には標準に従っていません。主に古いブラウザとの互換性と下位互換性のために使用されます。