HTML+CSS の部分的なフロントエンドの基本的な面接の質問-CSSチュートリアル-php.cn

1. インライン要素とブロックレベル要素? img とは何ですか? インライン要素をブロックレベル要素に変換する方法

Inline要素: および 他のすべての要素は 1 行上にあり、高さ、行の高さ、外側の余白、および内側の余白は変更できません。テキスト画像の幅は変更できません。テキストまたはその他のインライン要素のみを収容できます。ここで、imgは行要素です。 ブロックレベル要素: 常に新しい行で始まり、高さ、行の高さ、マージン、パディングはすべて制御でき、インライン要素やその他の要素に対応できます。 行要素を変換する方法ブロックレベル要素に: display: block; 特別な推奨事項 : 2020 年の CSS 面接の質問のまとめ (最新)

2. 複数の要素を設定する同じ行の float をクリアする方法は何通りありますか?

複数の要素を同じ行に設定する: float、inline-block クリア方法floats: 方法 1: 新しい要素を追加、クリアを適用: 両方; 方法 2: 親 p がオーバーフローを定義: 非表示; 方法 3: :after と :before を使用して要素内に 2 つの要素ブロックを挿入し、フロートクリアの効果。 .clear{zoom:1;} .clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;} ##3. ボックス モデルのボックス サイズが奇妙ですか?フレキシブル ボックス モデル | ボックス レイアウト?

標準モードのボックス モデル: ボックスの合計幅/高さ=幅/高さのパディング境界マージン 奇妙なモードのボックス モデルの下では、ボックスの合計幅と高さにはパディングと境界線の幅が含まれます。ボックスの合計の幅/高さ = 幅/高さのマージン = コンテンツ領域の幅/高さのパディング境界マージン; box-sizing には 2 つの値があります。1 つは content-box、もう 1 つはコンテンツ ボックスです。ボーダーボックスです。 box-sizing:content-box に設定すると、標準モードの解析と計算が使用されます。 box-sizing:border-box に設定すると、奇妙なモードの解析と計算が使用されます。 4. いくつかの CSS ハックを簡単に説明します?

(1) 画像のギャップ p に画像を挿入すると、画像が p の下部を拡張します。 3px単位で。 hack1: と を同じ行に書きます。ハック 2: の画像ギャップに display: block; dt li を追加します。ハック: に display: block を追加します。 (2) デフォルトの高さ IE6 より前のバージョンでは、一部のブロック要素にはデフォルトの高さ (18px 未満) があります hack1: 要素に font-size を追加します: 0; hack2: ステートメント: overflow: hidden; フォームの行の高さが一致していません hack1: ステートメントをフォームに追加します: float: left; height: ; border: 0; Mouse pointer ハック: ある要素のマウスポインタを手の形に統一すると:cursor: pointer; li の a をブロック要素に変換するとき、float を a にすると梯子の形が現れるIE hack1: inline-block に表示を追加; hack2: li: left に float を追加; 5. href と src? title と alt# の違い href (ハイパーテキスト参照) Web リソース (ハイパーテキスト参照) の場所を指定します。これにより、現在の要素または現在のドキュメントと、現在の属性で定義されている必要なアンカーまたはリソースとの間のリンクまたは関係が定義されます。 link や a などの要素で使用されます。

src (ソース) 属性は、現在のドキュメント要素によって定義された位置に現在のリソースを埋め込むだけです。これはページの重要な部分であり、導入部分です。 img、script、iframe、その他の要素で使用されます。 title: html タグと html 属性の両方です。タイトルが属性として使用される場合、要素の追加の説明情報を提供するために使用されます。 alt: alt は html タグの属性です。 alt 属性は、置換テキストを指定するために使用されます。これは、img、area、および input 要素 (アプレット要素を含む) でのみ使用できます。Web ページ上の画像が表示されるときに、ユーザーが画像情報を理解できるようにテキストの説明を提供するために使用されます。正常に表示できません。

6.transform?アニメーション？違い?animation-duration Transform: width や left と同様に、変形、回転、スケーリング、変位、遠近感などの機能を実装する要素の多くの静的スタイルを定義します。 、非常にクールな静的効果 (非アニメーション) を実現できます。

アニメーション: スタイル属性ではなく要素自体に作用します。これはキーフレーム アニメーションのカテゴリに属します。それ自体は、純粋に表現力豊かな JavaScript コードを置き換えてアニメーションを実装するために使用されます。現在のフレームの属性値は明示的に指定できます。 animation-duration: アニメーションの完了にかかる時間を秒またはミリ秒で指定します。

7.nth-of-type | nth-child? 例: 111

222 1 2 3 li:nth-of-type(2): ul の下の 2 番目の li 要素を表します li:nth-child(2): 両方の li 要素を表しますul の下の 2 番目の要素です (見つかりません)。 通常は、問題が発生する可能性が低い nth-of-type を使用することをお勧めします。 8. :before と ::before の違いは何ですか?

単一コロン (:) は CSS3 疑似クラスに使用され、二重コロン (:) :) は CSS3 疑似要素に使用されます。 :before など、CSS2 より前に存在した疑似要素の場合、単一コロンと二重コロン::before は同じ効果があります。 9. p を上下左右の中央に配置するにはどうすればよいですか?

回答: 方法は 3 つあります。

方法1： .p1{ width:400px; height:400px; border:#CCC 1px solid; background:#99f; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); }

方法2： .p2{ width:400px; height:400px; border:#CCC 1px solid; background:#99f; position: absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }

方法3： .p3{ width:400px; height:400px; border:#CCC 1px solid; background:#9f9; position: absolute; left: 50%; top:50%; margin-left:-200px; margin-top: -200px; }

ログイン後にコピー 10.css2.0 と css3.0

回答: css3 は css2 の機能を強化し、新しい属性と新しいタグを追加し、削除します 一部の冗長なタグは削減されますレイアウトに関するコードの量。以前は複雑だったレイアウトを 1 つの属性 (列などの属性) だけで解決できるようになりました。さらに多くの効果 (角丸、アニメーションなど) が追加され、ボックス モデルとリスト モジュールに改良が加えられました。ただし、CSS3 の互換性は良好ではなく、一部の高度なバージョンのブラウザのみがサポートしています。 11. フレキシブル ボックス モデル? flex|box の違い?

(1) フレキシブル ボックス レイアウト モデルを導入する目的は、アイテムをより効果的に表示する方法を提供することです。コンテナ内の要素が配置され、整列され、空白が割り当てられます。

フレキシブル ボックス レイアウト モデルは、コンテナ内のアイテムのサイズが不明な場合や動的に変化する場合でも、正常に動作します。このレイアウト モデルでは、コンテナーは、レイアウトのニーズに従って、使用可能なすべてのスペースを最適に埋めるために、コンテナーに含まれるアイテムのサイズと順序を調整します。

画面サイズやウィンドウサイズによってコンテナのサイズが変わると、コンテナに含まれるアイテムも動的に調整されます。たとえば、コンテナのサイズが大きくなると、その中に含まれるアイテムは余分な空きスペースを埋めるために引き伸ばされ、コンテナのサイズが小さくなると、アイテムがコンテナの範囲を超えないように縮小されます。 Flexbox レイアウトは方向に依存しません。

従来のレイアウト方法では、ブロック レイアウトはブロックを上から下に垂直方向に配置しますが、インライン レイアウトはブロックを水平方向に配置します。 Flexbox レイアウトには、そのような固有の方向制限がなく、開発者は自由に操作できます。

(2) flexとbox:display:boxの違いは古い規格なので、アンティークマシンを考慮したい場合は親要素のdisplay:box;属性の後に;を追加してください。 box-flex 属性を子要素に追加します。親要素の幅に応じて、子要素に一定の割合のスペースを占有させることができます。 Flex は最新であり、Dong Ji の古いマシンではサポートされていません;

親要素が display:flex を設定した後、子要素の幅は親要素の幅に応じて変更されますが、display:box は変更されます。ない。 Android UC ブラウザは、display: box 構文のみをサポートしますが、iOS UC ブラウザは両方の方法をサポートします。 12.すべてのプロパティを表示しますか?

(1)width: レイアウト ビューポートの幅を設定します。これは正の整数、または文字列 'device-width'; (2)initial-scale: 初期値を設定します。ページのスケーリング値は、小数を使用できる数値です。 (3)minimum-scale: ユーザーが許可する最小スケーリング値。これは数値であり、小数を含めることができます。 (4)maximum-scale: ユーザーが許可する最大ズーム値。数値であり、小数を含めることができます。 (5)height: レイアウト ビューポートの高さを設定します。この属性は私たちにとって重要ではなく、めったに使用されません。 (6)user-scalable: ユーザーがズームできるかどうか、値は 'いいえ」または「はい」。 Android は、ターゲット デバイスの密度レベルを表す target-densitydpi もサポートしています。その機能は、CSS の 1px が表す物理ピクセル数を決定することです。 (7) target-densitydpi: 値は、数値または高 dpi、これらの文字列のいずれか、中 dpi、低 dpi、デバイス dpi 13. HTML 構造のセマンティクスを理解するにはどうすればよいですか?

いわゆるラベル セマンティクスは、ラベルの意味を指します。セマンティクスの主な目的は、タグ (マークアップ) と属性 (属性) の目的と機能を誰もが直感的に理解できるようにすることであり、検索エンジンにとってフレンドリーです。適切な構造とセマンティクスがあれば、Web ページのコンテンツは自然に検索によってクロールされやすくなります。このアプローチは検索エンジンの検索ルールに準拠しており、Web サイトのプロモーションにかかる労力を大幅に節約でき、構造が明確で非常に読みやすいため、保守性も高くなります。これは、検索エンジン最適化 (SEO) における重要なステップでもあります。 14. 疑似クラスセレクターと疑似要素? c3 で導入された疑似クラス セレクターはありますか? c3 の擬似要素とは何ですか?

疑似クラスは 1 つのコロンで表され、疑似要素は 2 つのコロンで表されます。

擬似クラス セレクター: 状態は動的に変化するため、要素が特定の状態に達すると擬似クラス スタイルを取得する場合がありますが、状態が変化するとこのスタイルは失われます。

擬似要素セレクター: は実際の要素に使用されるセレクターではなく、CSS で定義された擬似要素に使用されるセレクターです。

c3 で導入されました 擬似クラス セレクター: :root() セレクター、ルート セレクターは、要素 E が配置されているドキュメントのルート要素と一致します。 HTML ドキュメントでは、ルート要素は常に です。 :root セレクターは 要素と同等です。

::not() セレクターはネガティブ セレクターと呼ばれ、jQuery の :not セレクターとまったく同じで、特定の要素を除くすべての要素を選択できます。

:empty() セレクターは空を表します。コンテンツのない要素を選択するために使用されます。ここでコンテンツなしとは、スペースも含めてコンテンツがまったくないことを意味します。

: target() セレクターは、ページ上のターゲット要素のスタイルを指定するために使用されます (要素の ID はページ内のハイパーリンクとして使用されます)。このスタイルは、ユーザーがクリックした場合にのみ使用されます。ページ上のハイパーリンクであり、ターゲット要素にジャンプした後に機能します。

: first-child() セレクターは、親要素の最初の子要素である要素 E の選択を表します。簡単に理解すると、要素内の最初の子要素を選択することになりますが、これは子要素であり、子孫要素ではないことに注意してください。

:nth-child() は、要素の 1 つ以上の特定の子要素を選択します。

:nth-last-child() は、親要素の最後の子要素からカウントを開始して、特定の要素を選択します。

:nth-of-type(n) セレクターと: n 番目-child(n) セレクターは非常によく似ていますが、親要素で指定された特定の型の子要素のみをカウントする点が異なります。

:only-child は、要素がその親要素の唯一の子要素であることを意味します。

:first-line 要素のテキストの最初の行にスタイルを使用します。

:first-letter 要素内のテキストの最初の文字または最初の単語のスタイルを使用します。

:before 要素の前にコンテンツを挿入します。

:after 要素の後にコンテンツを挿入します。

c3 の疑似要素: ::first-line は、要素の最初の行を選択します。たとえば、各段落のテキストの最初の行のスタイルを変更します。 ::before および: :after この 2 つは主に要素の前または後ろにコンテンツを挿入するために使用されます。これら 2 つのよく使用される「コンテンツ」は一緒に使用されます。私が見た中で最も一般的なのはフロートをクリアすることです。 ::selection は次の目的で使用されます。 Web ページの閲覧時にテキストを選択するデフォルトの効果を変更します。 15.html5 の新機能と削除された要素は何ですか? HTML5 の新しいタグによるブラウザーの互換性の問題にどう対処するか? HTML と HTML5 を区別するにはどうすればよいですか?

* HTML5 はもはや SGML のサブセットではなく、主に画像、場所、ストレージ、マルチタスク、その他の機能の追加を目的としています。 * ドラッグ アンド ドロップ API より優れたセマンティック コンテンツ タグ (ヘッダー、ナビゲーション、フッター、余談、記事、セクション) オーディオ、ビデオ API (オーディオ、ビデオ) キャンバス API 地理位置情報) API ローカル オフライン ストレージ localStorage データの長期ストレージ、ブラウザを閉じてもデータは失われない; sessionStorage データはブラウザを閉じた後に自動的に削除される フォーム コントロール、カレンダー、日付、時刻、電子メール、URL、検索 新しいテクノロジ Webworker、WebSocket、地理位置情報 * 削除要素 純粋に表現力豊かな要素:basefont、big、center、font、s、strike、tt、u; ユーザビリティに悪影響を与える要素:frame、frameset、noframes; HTML5 の新しいタグのサポート: * IE8/IE7/IE6 は、 document.createElement メソッドによって生成されたタグをサポートします。この機能を使用して、これらのブラウザで HTML5 の新しいタグをサポートすることができます。ブラウザが新しいタグをサポートした後、タグのデフォルトのスタイルを追加する必要があります: * もちろん、成熟したフレームワークを直接使用するのが最善の方法です。最もよく使用されるのは、html5shim フレームワーク src=" http:/ / html5shim.googlecode.com /svn/trunk/html5.js " * 区別方法: DOCTYPE ステートメント\新しい構造要素\機能要素 16.placeholder? プレースホルダーの効果を ie8

で互換性を持たせる方法 方法一： 首先判断浏览器是否支持placeholder属性，如果不支持的话，就遍历所有input输入框，获取placeholder属性的值填充进输入框作为提示信息，同时字体设置成灰色。

当输入框获得焦点( focus )同时输入框内文字等于设置的提示信息时，就把输入框内清空；

当输入框失去焦点( blur )同时输入框内文字为空时，再把获取的placeholder属性的值填充 进输入框作为提示信息，同时字体设置成灰色；

当输入框内有输入( keydown )时，此时输入框内的提示信息已经由focus事件清除，此时只需要把字体再恢复成黑色即可

此方法的缺点是，不适用于加载完DOM时即获得焦点的输入框，因为在用户的角度，加载完页面时看到的获得焦点的那个输入框，它的提示文字是看不到的。 HTML： CSS：.phcolor{ color:#999;}JS$(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('input'), placeholder=function(input){ var text = input.attr('placeholder'), defaultValue = input.defaultValue; if(!defaultValue){ input.val(text).addClass("phcolor"); } input.focus(function(){ if(input.val() == text){ $(this).val(""); } }); input.blur(function(){ if(input.val() == ""){ $(this).val(text).addClass("phcolor"); } }); //输入的字符不为灰色 input.keydown(function(){ $(this).removeClass("phcolor"); }); }; //当浏览器不支持placeholder属性时，调用placeholder函数 if(!supportPlaceholder){ $('input').each(function(){ text = $(this).attr("placeholder"); if($(this).attr("type") == "text"){ placeholder($(this)); } }); }}); ログイン後にコピー 方法二： 此方法的思路是做一张含有提示文字的图片作为input输入框的背景图，初始时获得焦点同时加载背景图； 当输入框不为空时，去掉背景图； 当输入框为空时，加载背景图； 当用户键盘按键且输入框不为空( 输入字符 )时，去掉背景图； 当用户键盘按键且输入框为空( 删除字符 )时，加载背景图。 此方法的缺点是：需要为每一个提示文字不同的input制作背景图片，并且设置input的样式。 CSS：.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}JS$(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder' in document.createElement('input'); if(!supportPlaceholder){ //初始状态添加背景图片 $("#uname").attr("class","phbg"); //初始状态获得焦点 $("#uname").focus; function destyle(){ if($("#uname").val() != ""){ $("#uname").removeClass("phbg"); }else{ $("#uname").attr("class","phbg"); } } //当输入框为空时，添加背景图片；有值时去掉背景图片 destyle(); $("#uname").keyup(function(){ //当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片 destyle(); }); $("#uname").keydown(function(){ //keydown事件可以在按键按下的第一时间去掉背景图片 $("#uname").removeClass("phbg"); }); }}); ログイン後にコピー 方法三： 使用插件：Placeholders.js 17.常见兼容性问题？

* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理。

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

* 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

* 渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 css// .bb{ background-color:#f1ee18; .background-color:#00deff\9; +background-color:#a200ff; _background-color:#1e0bd1; }

* IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性。

* IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. * 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

* 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

* 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用[html5]( http://www. w3.org/TR/html5/single- page.html )推荐的写法：` `

* 上下margin重合问题 ie和ff都存在，相邻的两个p的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。 解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

* ie6对png图片格式支持不好(引用一段脚本处理) 18.简述前端优化的方式 旧的雅虎34条|h5新添加的方式

1. HTTP リクエストの数を最小限に抑える 2. DNS ルックアップの数を減らす 3. ジャンプを避ける 4. キャッシュ可能な AJAX 5. コンテンツの読み込みを遅らせる 6.準備の読み込み 7. DOM 要素の数を減らす 8. ドメイン名に従ってページ コンテンツを分割する 9. iframe の数を最小限に抑える 10. 404 エラーを引き起こさないようにする 11.コンテンツ配信ネットワークを使用する 12. ファイル ヘッダーに Expires または Cache-Control を指定する 13. ファイル コンテンツを Gzip 圧縮する 14. ETag を構成する 15. できるだけ早く出力バッファを更新する 16 GET を使用して AJAX リクエストを完了します 17. スタイル シートを先頭に置きます 18, CSS 式の使用を避ける 19, 外部 JavaScript と CSS を使用します 20, JavaScript と CSS をカットします 21. @ import の代わりに を使用します 22. フィルターの使用を避けます 23. スクリプトをページの下部に配置します 24. 重複したスクリプトを削除します 19.jquery バージョン? 1.11 互換?

Query 2.x シリーズには jQuery 1.x と同じ API がありますが、IE6、7、および 8 はサポートされなくなりました。 IE6、7、および 8 ユーザーが今後 Web サイトにアクセスしないことが確実な場合を除き、1.x バージョンを使用することをお勧めします。 jquery1.11 は 1.x バージョンに属しており、IE6、7、および 8 と互換性があるため、IE9 もサポートします。 20. ブロック レベル?業界内で？空の要素?

インライン要素: 他の要素と同じ行にあります。高さ、行の高さ、外側の余白、内側の余白は変更できません。テキスト画像の幅は変更できません。テキストのみを収容できます。または他のインライン要素 ブロックレベル要素: 常に新しい行で開始し、高さ、行の高さ、マージンとパディングを制御でき、インライン要素とその他の要素を収容できます。 空の要素: HTML 要素では、コンテンツのない HTML 要素は空要素と呼ばれます。空の要素は開始タグで閉じられます。 は終了タグのない空の要素です。 21.media 属性?画面？全て？ max-width?min-width?

media 属性は、リンクされたドキュメントが表示されるデバイスを指定します。メディア属性は、メディア タイプごとに異なるスタイルを指定するために使用されます。 Screen はコンピュータのデフォルト画面であり、all はすべてのデバイスに適用されます。max-width は最大幅を超える場合は実行されません。min-width は実行前に最小幅より大きい必要があります。 22. メタタグのname属性値は何ですか?

name 属性は主に Web ページを説明するために使用され、対応する属性値は content です。content 内のコンテンツは、主に検索エンジン ロボットが情報を検索し、情報を分類するために使用されます。 meta タグの name 属性の構文形式は、 です。 name 属性には主に次のパラメータがあります: A. キーワード (キーワード) の説明: キーワードは、Web ページのキーワードが何であるかを検索エンジンに伝えるために使用されます。 B、説明 (Web サイト コンテンツの説明) 説明: 説明は、検索エンジンに Web サイトのメイン コンテンツを伝えるために使用されます。 C、ロボット (ロボット ガイド) 説明: ロボットは、検索ロボットにどのページが必要かを伝えるために使用されます。インデックスを付ける必要があるページとインデックスが必要ないページ。 コンテンツのパラメータには、all、none、index、noindex、follow、nofollow が含まれます。デフォルトは all です。 例: D、著者(著者) 23. モバイル ページで画像を切り取る方法は何通りありますか?

レスポンシブ レイアウト、柔軟なレイアウト表示: flex、js を使用して比率を記述および設定し、ルート要素にピクセルを設定し、単位として rem を使用します。 24. px/em/rem の違いは何ですか?通常、フォント サイズが 62.5% に設定されるのはなぜですか。

現在のオブジェクトのテキストに対する相対的なフォント サイズです。インライン テキストの現在のフォント サイズが手動で設定されていない場合は、ブラウザのデフォルトのフォント サイズを基準とします。 1. em の値は固定されていません; 2. Em は親要素のフォント サイズを継承します。 rem を使用して要素のフォント サイズを設定する場合、それは依然として相対的なサイズですが、HTML ルート要素に対してのみ相対的なサイズになります。このユニットは、相対サイズと絶対サイズの利点を組み合わせたものと言え、ルート要素を変更するだけですべてのフォント サイズを比例的に調整でき、レイヤーごとにフォント サイズが複合する連鎖反応を回避できます。 rem はブラウザを基準にしてスケーリングされます。 1remのデフォルト値は16pxですが、レスポンシブレイアウトではいちいちremに変換するのが面倒なのでrem body{font-size=62.5% }にリセットします この時、1rem = 10px; 12pxの場合, それは 1.2rem . 25. sass と scss の違いは何ですか? sass は一般的にどのようにコンパイルされますか?

ファイル拡張子が異なります。Sass は拡張子として「.sass」サフィックスを使用し、SCSS は拡張子として「.scss」サフィックスを使用します。構文の書き方が異なります。Sass は、中括弧 ({}) やセミコロン (;) を使用せず、厳密なインデント構文ルールで記述されます。一方、SCSS の構文の記述は、CSS の構文の記述と非常に似ています。 26. CSSの最適化にどう対処するか？

CSS が将来のメンテナンスを確実にできるように、圧縮してパッケージ化し、画像を統合し、Hack の使用を避け、互換性の問題を解決し、略語を使用します。 27. CSS ファイルを圧縮してマージするにはどうすればよいですか? gulp ?

gulp を使用し、ホームページに gulp をグローバルにインストールします。 1. npm install --global gulp 2. 次に、gulp をローカルにインストールします。 npm install gulp --save-dev 3. プロジェクトのルート ディレクトリに gulpfile.js という名前のファイルを作成します var gulp = require('gulp'); gulp.task('default' , function () { //ここにデフォルトのタスク コードを入力します}); 4. gulp を実行します。 (default という名前のデフォルトのタスクが実行されます。特定のタスクを個別に実行したい場合は、gulp と入力してください) gulp JS 、 CSS ファイルをマージして圧縮します Compress JS、CSS ファイルは次のコンポーネントを参照する必要があります: gulp-minify-css: Compress css 28. コンポーネント? モジュール式プログラミング?

コンポーネント プログラミング: js css html をまとめてラップしてメソッドとエフェクトを提供します; モジュール化: 同じ関数を抽出し、プログラミングのために 1 つの場所に保存します #29 . 写真と文字を同一行に表示しますか?

1 CSSのpに「vertical-align:middle」属性を追加します。 ＃＃＃２ 絵と文字をそれぞれ別のｐに配置し、同じ行に表示されるように「margin」属性を使って配置します。 ＃＃＃３ 画像を背景画像として設定します。 #30. イベント バブリングを無効にする event.stopPropagation()

31. デフォルト イベントを無効にする #event.preventDefault() 32. a タグで訪問したアクティブなホバー リンクの正しい設定シーケンスは何ですか?

a タグのリンク、訪問、ホバー, Active には特定の順序があります a:link a:visited a:hover

a:active

33. タグ内の href ジャンプ ページを無効にする方法または、リンク

#e.preventDefault(); href="javascript:void(0); 34 を見つけます。携帯電話では、選択した写真を処理する方法?

onselect=function() { return false }

35. いくつかの属性メソッドが発生します。ビデオタグ

src: ビデオポスターのURL: ビデオカバー、再生中に画像が表示されない プリロード: プリロード中 autoplay: 自動再生 ループ: ループ再生コントロール: ブラウザ独自のコントロールバー幅: ビデオ幅の高さ: ビデオの高さ 36. 一般的なビデオ エンコード形式はいくつありますか?ビデオ形式はいくつありますか?

ビデオ形式: MPEG-1、MPEG-2、およびMPEG4、AVI、RM、ASF、および WMV 形式 ビデオ エンコード形式: H.264、MPEG-4、MPEG-2、WMA-HD、および VC-1 37.canvas label 幅と高さを設定することと、スタイルで幅と高さを設定することの違いは何ですか?

キャンバス タグの幅と高さは、キャンバスの実際の幅と高さであり、この上にグラフィックスが描画されます そしてスタイルの幅と高さ Height はブラウザでレンダリングしたときのキャンバスの高さと幅です キャンバスの幅と高さが指定されていない場合、または値が間違っている場合は、 38.border-image?box -sizing?

Border-image : グラフィカルボーダー Box-sizing : プロパティを使用すると、特定の領域に一致する特定の要素を特定の方法で定義できます。 構文: box-sizing: content-box | border-box Content-box: パディングとボーダーは、定義された幅と高さに含まれません。オブジェクトの実際の幅は、設定された幅値、ボーダー、およびパディングの合計に等しくなります (要素の幅 = ボーダー パディングの幅)。このプロパティは、標準モードではボックス モデルとして動作します。 : パディングとボーダーは幅と高さの範囲内で定義に含まれます。オブジェクトの実際の幅は、設定された幅の値と同じです。ボーダーとパディングが定義されていても、オブジェクトの実際の幅は変更されません。つまり、(要素の幅 = 幅)。この属性は、次のボックス モデルのように動作します。変なモード。

39. 段階的な強化と正常な劣化

段階的な機能強化: 低バージョンのブラウザ用のページを構築して最も基本的な機能を確保し、エフェクトやインタラクションを改善し、高度なブラウザ用の機能を追加して、より良いユーザー エクスペリエンスを実現します。 グレースフル デグラデーション: 最初から完全な機能を構築し、それから下位バージョンのブラウザーと互換性を持たせます。 違い: グレースフル デグラデーションは複雑な現状から始まり、ユーザー エクスペリエンスの提供を減らそうとするのに対し、プログレッシブ エンハンスメントは非常に基本的な機能バージョンから始まり、将来の環境のニーズに適応するために拡張し続けます。 劣化（機能の衰退）は過去を振り返ることを意味しますが、漸進的な強化はその基盤を安全領域に置きながら将来を見据えることを意味します。 「エレガントなダウングレード」の観点 「グレースフル ダウングレード」の観点では、Web サイトは最も高度で完全なブラウザー向けに設計されるべきであると考えられます。 「古い」とみなされるブラウザ、または機能が欠落しているブラウザのテストは開発サイクルの最終段階で行われ、テスト対象は主流ブラウザ (IE、Mozilla など) の前のバージョンに限定されます。 この設計パラダイムでは、古いブラウザは「貧弱だがまあまあ」のブラウジング エクスペリエンスしか提供しないと考えられます。特定のブラウザに合わせていくつかの小さな調整を行うことができます。ただし、それらは私たちの注意の焦点ではないため、大きなバグの修正を除いて、その他の違いは無視されます。 「プログレッシブ エンハンスメント」の観点 「プログレッシブ エンハンスメント」の観点では、コンテンツ自体に焦点を当てる必要があると考えています。 コンテンツは、Web サイトを構築する動機です。表示する Web サイト、収集する Web サイト、検索する Web サイト、運営する Web サイト、これらすべてを含む Web サイトもありますが、すべてコンテンツが含まれることは同じです。これにより、「プログレッシブ エンハンスメント」がより合理的な設計パラダイムになります。だからこそ、これは Yahoo! によってすぐに採用され、「段階的ブラウザ サポート」戦略の構築に使用されました。 それでは質問が来ます。現在、プロダクト マネージャーは、IE6、7、および 8 の Web ページ効果は、より高いバージョンの最新のブラウザーに比べて角の丸みや影 (CSS3) がはるかに少なく、互換性が必要である (画像の背景を使用し、CSS3 を放棄する) ことに気付きました。彼を説得しますか？ 40. IE の下位バージョンにおける c3 の奇妙なボックス モデルと奇妙なボックス モデルとフレキシブル ボックス モデルについて説明してください?

IE パディング ボーダーの値が幅または高さより小さい: ボックス モデルの幅 = マージン (左右) 幅 (幅にはパディングとボーダーの値がすでに含まれています) ボックス モデルの高さ = マージン (上と右) down) height (heightにはすでにpaddingとborderの値が含まれています) padding borderの値がwidthまたはheightより大きい場合: ボックスモデルの幅 = margin(左右)のpadding(左と右) ボーダー (左と右) ボックス モデルの高さ = マージン (上下) パディング (上下) ボーダー (上と下) 19 ピクセル (さらにデフォルトの行の高さ 19 ピクセル)パディング境界と幅または高さの比率のいずれか大きい方と同等です。 上記の DOCTYPE はすべて標準のドキュメント タイプです。DOCTYPE を完全に定義するためにどのモードが使用されても、標準モードがトリガーされます。DOCTYPE が欠落している場合、ie6 では奇妙なモード (quirks モード) がトリガーされます。 ie7 および ie8 CSS3box -sizing には 2 つの値があり、1 つは content-box で、もう 1 つは border-box です。 box-sizing:content-box に設定すると、分析と計算に標準モードが使用され、これがデフォルト モードでもあります。 box-sizing:border-box に設定すると、奇妙なモードが使用されます。 Css3 フレックスボックス モデルでは、新しいボックス モデルであるフレックスボックス モデルが導入されており、ボックスが他のボックスにどのように分散されるか、および利用可能なスペースがどのように扱われるかを決定します。このモデルを使用すると、ブラウザ ウィンドウに適応する流動的なレイアウトや、フォント サイズに適応する柔軟なレイアウトを簡単に作成できます。 41.アニメーション対応属性

記述方法:アニメーション:名前durationtiming-function遅延iteration-countdirection; 以下は対応する属性の紹介です。属性 animation-name は、セレクターにバインドする必要があるキーフレーム名を指定します。 animation-duration は、アニメーションが完了するまでにかかる時間を秒またはミリ秒で指定します。 animation-timing-function アニメーションのスピードカーブを指定します。 animation-delay アニメーションが開始されるまでの遅延を指定します。 animation-iteration-count アニメーションを再生する回数を指定します。 animation-direction アニメーションを逆方向に順番に再生するかどうかを指定します。 42.transition?

css トランジションを使用すると、css 属性値を一定の時間間隔内でスムーズに遷移させることができます。この効果は、マウスのクリック、フォーカス、クリックされること、または要素への変更によってトリガーされ、アニメーション効果で CSS プロパティ値を滑らかに変更します。移動、拡大縮小、拡大縮小などの 2D 変換を実行する変換との違いに注意してください。要素を近づいて、回転し、引き伸ばします。 43.h5 の新機能?

1、绘画的 canvas 元素 2、用于媒介回放的 video 和 audio 元素 3、对本地离线存储的更好的支持 4、新的特殊内容元素，比如 article、footer、header、nav、section 5、新的表单控件，比如 calendar、date、time、email、url、search 44.canvas 如何绘制一个三角形|正方形

moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。 这两个函数加起来就是画一条直线。 画线要用“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y）然后要固定终止位置要用到LineTo函数确定终止位置（xend,yend）,这样一条线就画出来了。 每次与前面一个坐标相连 。 stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。 画布 Your browser does not support the canvas element. var c=document.getElementById("myCanvas");//三角形 var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(50,50); cxt.lineTo(10,50); cxt.lineTo(10,10); cxt.stroke();//正方形 var cxt2=c.getContext("2d"); cxt2.moveTo(60,10); cxt2.lineTo(100,10); cxt2.lineTo(100,50); cxt2.lineTo(60,50); cxt2.lineTo(60,10); cxt2.stroke(); ログイン後にコピー 45.所用bootstap版本？

3.0 46.css清除浮动的几种方式？

1、父级p定义 height 2、结尾处加空p标签 clear:both 3、父级p定义 伪类:after 和 zoom 4、父级p定义 overflow:hidden 5、父级p定义 overflow:auto 6、父级p 也一起浮动 7、父级p定义 display:table 47.为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 48.CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow）， 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg); //旋转,缩放,定位,倾斜增加了更多的CSS选择器 多背景 rgba 在CSS3中唯一引入的伪元素是::selection.媒体查询，多栏布局 border-image 49.解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了`http2`。 50.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁 @import "../fouc.css"; 而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。 解决方法：只要在 之间加入一个 或者 元素就可以了。 51.a点击出现框，解决方法:

a,a:hover,a:active,a:visited,a:link,a:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; outline:none;background: none; text-decoration: none;border:none; -webkit-appearance: none; } ログイン後にコピー 相关教程推荐： CSS视频教程