1. はじめに
フロントエンドまたは疑似フロントエンドの同志 (著者自身など) の皆さん、CSS はそれほど馴染みのないものではありません。たとえば、数年前に大学生だったとき、外部向けの Web サイトを作成するときに CSS を使用する必要がありました。こうやって計算すると、使い慣れた機能もあれば、オンラインで確認する必要がある機能もあるかもしれません。私も以前はそうでした??仕事では開発を行っていますが、余暇にはコードを書いています))。
世界に完全に単純なものなど存在しません、それは私たちがそれを単純だと思っているだけです。現在の当社の開発状況と同様に、開発環境は B/S に移行しました。私の考えでは、開発リーダーは C/S に .net を使用していました。あまり深くありません。それでも私は畏敬の念を抱き、知ってか知らずか「CSS デザインガイド (第 3 版)」を購入し、すべて読みました。本が郵便から戻ってきた後、私は三晩かけてそれを読みました。私には、何かをするときは、頭で理解したつもりにならず、それを書き留めたり、例を挙げたりする必要があるという癖があります。ということで、ブログをいくつか書きました。自分自身に利益をもたらし、他人にも利益をもたらします。
それでは、読書の過程で私が出会った、より重要だと思うこと（私たちはそれらをしっかり把握していない）、または以前は理解できなかったものをリストアップします。読者がそれらについて考えてみることができるように。すべてを知っていれば、あなたの基礎は非常にしっかりしているので、何も言うことはありません。不安でなければ、自分で答えを確認してください。心配しない場合は、後で私のブログの紹介を待ってください。 。
たくさんのゴシップがありましたが、今から始めましょう!
2. 質問01. ブラウザによっては css3 が完全にサポートされていない場合があります。そのブラウザが css3 をサポートしているかどうか、またどのような項目をサポートしているかを確認するにはどのツールを使用できますか?
ヒント: Mo****zr
02。一般的に使用される HTML タグ。通常、その表示属性はデフォルトでブロックとインラインになります。ブロックまたはインラインで表示されない一般的なタグは何ですか? これらのタグの表示とブロック/インラインの違いは何ですか?
ヒント: table、input、textarea
03. @import を使用したことがありますか?
(比較的簡単)
04. 表の最初の行は赤の背景を表示し、最後の行は青の背景を表示し、中央の行は灰色/白の空白の背景を使用します。
ヒント: 構造化された疑似クラス (比較的単純)
05. 疑似要素 ::before と ::after を使用したことがありますか?どこで使われているのでしょうか？
ヒント: float をクリアして div に「三角形」を追加する 重要
06. CSS?? 「カスケード」を理解するにはどうすればよいですか?重要
ヒント: スタッキング、つまりレイヤーを次々と積み重ねる場合、重要なのはレイヤーが何層あるか、各レイヤーが何であるかを知ることです
07. 「特異性」と「I-C-E」についてどれだけ知っていますか。 』の計算ルール？重要
ヒント: http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html
08 を参照することは、それほど難しいことではありません。重要なのは、より多くの CSS セレクターと計算の問題を分析することです。シンプルな解決策は、「シンプルなカスケードの要点のチャーリー版」と呼ばれる 4 文の公式です。わかりますか? 重要
ヒント: たとえば、「ID を含むセレクターは、クラスを含むセレクターよりも優れているはずです...」
09. 「ブラウザーのデフォルト スタイル」を検索し、見つけて開きます。ブラウザのデフォルト スタイルがすべて含まれているを見てください。すべて理解できますか?重要: display:table と display:block の違いは何ですか? 10. 開発するシステムの最初の css ファイルの 1 行目に * {margin:0; padding:0} と記述する必要があります。
ヒント: ブラウザの互換性 (比較的単純)
11. スタイル p{margin-top:50px; margin-bottom:30px;} は、p の間の垂直距離になります。
ヒント: 垂直マージン…水平マージン…?? 比較的簡単な基礎知識
12. 誰もが知っている「ボックスモデル」（知らない人は急いで補ってください！） !)、ボックス モデルの幅。実際には、パディング、ボーダー、マージンを除いたコンテンツの幅を指します。実際、これは CSS レイアウトに非常に悪影響を及ぼします。幅を全幅にする方法はありますか?重要
ヒント: ボックスのサイジング (IE の下位バージョンとの互換性に注意してください) 13. float の効果の一部は、実際、元の内容を理解した後では、しばしば私たちを唖然とさせます。フロートの設計意図、これらのことが理解できるかもしれません。 float の本来の設計意図は何ですか?
ヒント: 簡単な文だけ...
14. Float には「ラッピング プロパティ」がありますか?? たとえば、 abc は異なります。信じられないかもしれませんが、p に背景色を追加してみてください。この「カプセル化」を理解していますか？考えてみてください。他のどの要素 (または CSS 属性) にもこの種の「ラッピング」があるでしょうか? 重い は重要です
ヒント: 質問 13 と密接に関係しています
15. Float には、親要素の高さが崩れる別の「破壊的」な外観もあります。誰もが知っておくべきです。これ、そうですよね？では、なぜそうなるのでしょうか?さらに、どの CSS 属性もこの「破壊的な」原因となるのでしょうか 重い
ヒント: float と ABS の両方により、要素がドキュメント フローから外れる原因になります
(質問 13、14、15 については、チュートリアル http://www.imooc.com/learn/121 と http://www.imooc.com/learn/192 は非常に優れていますが、講師の声は非常に「魅力的」なので、辛抱強くお待ちください)
16. CSSでfloatをクリアする方法は3つあります。いつもフロートをどうやってクリアしていますか？業界で最も一般的に使用されている古典的なクリア フロート スタイルは何ですか?重要
ヒント: 「clearfix」を検索してください
17. 相対位置決めをどのように理解していますか?また、絶対位置決めとの最も基本的な違いは何ですか?
ヒント: 1 つはドキュメント フローの内側にあり、もう 1 つはドキュメント フローの外側にあります
18. 「ポジショニング コンテキスト」をご存知ですか?重要
19. Web ページの古典的な 3 列レイアウトを実装するにはどうすればよいですか? IE6 と 7 を考慮しない場合、複数列レイアウトを実装する最良の方法は何ですか?重要
ヒント: table-cell
20. インラインブロックを使用したことがありますか? IE6 と 7 の互換性はどうですか?
ヒント: 比較的簡単です。Baidu を使用するだけです
3. 終了これまでに多くの質問がまとめられました。質問に基づいて答えを考えることができます。もっと重要な知識があると思われる場合は、メッセージを残していただければ参加を検討させていただきます。
さらに、次は主要な CSS 知識についての短いシリーズの記事を書き、この記事では私が作成した wangEditor リッチ テキスト ボックスとブートストラップ フレームワークの理解に基づいてこれらの問題を紹介します。最近仕事が忙しくて更新が遅くなるかもしれませんが、よろしくお願いします！
------------------------------------------------ -------------------------------------------------- ----------
私のWeiboをフォローしていただきありがとうございます。
私のチュートリアルも歓迎します:
「デザインからパターンまで」「 JavaScript プロトタイプとクロージャ シリーズの深い理解」「Microsoft petshop4.0 ソース コード解釈ビデオ」「json2.js ソース コード解釈」動画
-------------------------------------- ---------------------------------------------------- ---- --------
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
