フロントエンドの高度なテストの質問 css_html/css_WEB-ITnose

1. CSS 40 ポイント

1. ボックスモデルとは何ですか? 2. Doctype にはどのような種類がありますか? 3. 左側が動かず、右側が適応する 2 列レイアウトをレイアウトするにはどうすればよいですか?

4. 同じ高さの 2 つの列をレイアウトするにはどうすればよいですか? 5. 右側に固定幅、左側または中央に適応幅のレイアウトを作成するにはどうすればよいですか?

6. 3 つの列を適応的にレイアウトするにはどうすればよいですか? 7. gif、png、jpg の違いは何ですか? 8. CSS スプライトとは何ですか? 長所と短所は何ですか? 10. 細い線のテーブルを作りますか? 11. 相対位置、絶対位置、固定位置の違いと関係は何ですか? 12. float:left 要素を中央に配置する方法

13. さまざまなブラウザーでの CSS の互換性の問題を通常どのように解決していますか

1. ボーダー、ボーダー、パディング、コンテンツの 4 つの属性

二

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd"

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

DOCTYPE html

3 つできますBaidu Netdisk を参照してください

左列、float: left width: 300px;

4、5、6 はすべてレイアウトです。 。 。

7, gif, png, jpg

1. 優れた圧縮アルゴリズムにより、サイズを非常に小さいサイズに縮小しながら、ある程度の画質を確保します。

2. 複数のフレームを挿入してアニメーション効果を実現できます。

3. 透明色を設定して、背景にオブジェクトが浮かんでいるような効果を作成できます。

png

* 小さなファイルを作成するための 256 色パレット技術をサポートします

* 最大 48 ビットのトゥルー カラー画像と 16 ビットのグレースケール画像をサポートします。

* アルファチャンネルの半透明をサポートします。
* 画像の明るさのガンマ補正情報をサポートします。
* 画像名、作者、著作権、作成時間、コメント、その他の情報を保持するための追加のテキスト情報の保存をサポートします。
* 可逆圧縮を使用します。
* 漸近表示とストリーミング読み書きは、ネットワーク送信中にプレビュー効果を素早く表示し、その後全体像を表示するのに適しています。
* ファイルエラーを防ぐために CRC 巡回冗長エンコーディングを使用します。
* 最新の PNG 標準では、複数の画像を 1 つのファイルに保存できます。

jpg

JPEG/JFIF は、World Wide Web 上で写真を保存および送信するために最も一般的に使用される形式です。 JPEG では、トーンや色の滑らかな変化を伴う写真やリアルな絵画で最高の結果を得ることができます。この場合、通常、完全に歪みのないアプローチよりも効果があり、非常に見栄えの良い画像を生成できます (実際、GIF などの他の一般的な方法よりも高品質の画像が生成され、線画に適しています)。グラフィックス（描画）やイラストには歪みはありませんが、フルカラー画像の場合は非常に難しい数値化が必要です）。

シンプルなGIFはサイズが小さく、フィルターなしでIE6と互換性がありますが、色が異なります

png、サイズが大きく、色が良いため、IE6と互換性を持たせるにはフィルターが必要です

jpg、自分で色を選択し、十分な色のボリュームを持ってください。大きくて不透明になります

上に書かれた大きな文字は、アーティストやデザイナーが見るためのものです!これがフロントエンドであればOKです

8 CSSスプライトとは何ですか？

は CSS エルフです

CSS スプライトの長所と短所

利点

1. CSS スプライトを使用すると、Web ページの http リクエストを効果的に削減できるため、ページのパフォーマンスが大幅に向上します。これも CSS スプライトです。 最大の利点は、広く普及して使用されている主な理由でもあります。 2. CSS スプライトは、3 つの画像を 1 つの画像に結合する場合のバイト数を削減できることを比較しました。の合計バイト数は常にこれより小さくなります。

3. 画像のコレクションに名前を付けるだけで済むため、Web デザイナーの問題が解決され、小さな要素にすべて名前を付ける必要がなくなり、Web ページの制作効率が向上します。

4. スタイルを変更するのは簡単です。1 つまたはいくつかの画像の色やスタイルを変更するだけで、Web ページ全体のスタイルを変更できます。メンテナンスがより便利になります。

欠点

CSS スプライトが非常に強力であることは事実ですが、次のような無視できない欠点もいくつかあります。

1. 画像を結合するときは、複数の画像を秩序正しく合理的な方法で 1 つの画像に結合し、セクションに不要な背景が表示されないように十分なスペースを残す必要があります。これは問題ありませんが、最も面倒な作業です。ワイドスクリーンや高解像度の画面でのアダプティブページの場合、画像の幅が十分でない場合、背景が壊れやすくなります。 2. CSS スプライトは開発時にさらに面倒です。Photoshop などのツールを使用する必要があります。各背景ユニットの正確な位置を計算するのは難しいことではありませんが、非常に面倒です。幸いなことに、Tencent のゴースト ブラザーは ADOBE AIR を使用して CSS スプライト スタイル生成ツールを開発しました。ただし、まだ柔軟性に欠けています。 Photoshop で測定するよりもはるかに便利で、スタイルを直接生成、コピー、コピーすることができます。

3. CSS スプライトはメンテナンスがさらに面倒で、ページの背景にわずかな変更がある場合、通常はマージされた画像を変更する必要があります。変更する必要のない部分は変更しないのが最善です。元の場所に配置できず、（できれば）画像を追加する唯一のオプションがある場合は、CSS の変更を避けるためです。これにより、画像のバイト数が増加し、CSS も変更する必要があります。 。

4. CSS スプライトは、特にページに多数のアイコンがある場合、学習して適用する価値があります。つまり、多くの場合、CSS スプライトを使用するかどうかを決定する前に、メリットとデメリットを比較検討する必要があります。

border-collapse: 崩壊

11 の位置: 相対、絶対、固定 違いとつながりは何ですか?

相対的、絶対的、浮動。 。 。基本的には前に使ったので紹介しません

float:left 要素を中央に配置する方法

margin-left:50%;  position:relative; left:width除2 。。。这个方法是我想的笨办法，如果有更好的可以提出 Css在各浏览器下的兼容问题你通常是怎么来解决的，请分享你的经验；hack。。。页面的规范！。。。好吧这玩意已经变成一种习惯了。。。基本一次成型怎木办IE6滤镜css3的部分属性兼容ie6，pie.js