「CSS について」読書メモ_html/css_WEB-ITnose

对于 !important关键字的使用一定要谨慎，切勿随便使用，避免产生不必要的问题。

内嵌样式表，一般应用在访问量比较大的页面 减少对服务器的http请求数而减少对服务器的负担。

缺点是如果需要修改，那就只能对页面进行修改， 且无法利用浏览器缓存特性。

由于浏览器最后解析@import，这样很容易导致IE6的闪屏或者在打开页面的过程中无样式，直到页面加载完毕后才会加载样式的现象出现，因此 不建议使用@import。

ブラウザは HTML コードを文ごとに上から下に解析するため、sideBox の前に mainBox を配置する主な機能は、ブラウザ内にコンテンツ領域を事前に表示することです。

CSS スタイルを使用してページ構造をレイアウトする場合、フローティングを使用しない場合、ページのレイアウトには位置決めのみを使用できます。

2 列のページ レイアウト:

• ...
• 順序付きリスト:
  1. ...
  1. カスタマイズされたリスト:

     タイトル ;Content

  インライン要素には幅と高さの属性がありません。ブロックレベルの要素に変換された後にのみ幅と高さの属性が存在します。

  CSS スタイルでブロック要素を水平に配置するには、位置決めとフローティングの 2 つの方法しかありません。

  CSS はパフォーマンス上の効果を実現し、JavaScript は動作上の効果を実現します。

  CSS スタイルを使用するには、全員が CSS スタイルの理解を向上させ、問題に対処する能力を向上させるために、常に新しいコンテンツを探索して試す必要があります。

  リストの例:

  2. 2 番目のメニュー ナビゲーション (水平):
     重要なポイント: 全体の幅、第 1 レベルのリストの幅と高さ、およびフローティング、第 2 レベルのリストの絶対位置。
     効果: http://jsfiddle.net/XianfaLang/4CPdG/
  3. 画像とテキストのリスト情報:
     キーポイント: 全体の幅、フローティング。
     効果: http://jsfiddle.net/XianfaLang/KM7Ua/

  理解、分析、および要約は、実行する必要がある手順です:

  各例で説明されている手順と実装方法を理解します。
  各メソッドの使いやすさと、他に優れた実装方法があるかどうかを分析します。
  それぞれの実践で得た経験を要約します。
  IE ブラウザでは、ボタンとテキストの間の垂直方向の配置関係は、チェック ボックスとテキストの間の配置関係と同様であり、vertical-align を使用して調整する必要があります。

  テーブル関連

  border-collapse: テーブルの行とセルの端が結合されるかどうかを取得または設定します。デフォルト値: 個別。マージ: 崩壊します。
  隣接するセレクターを使用して、交互の行の色を変更できます。個人的には、この知識ポイントは主に隣接するセレクターの応用を理解するためのもので、実用性はほとんどないと感じています。
  カレンダーテーブルの作成: http://jsfiddle.net/XianfaLang/Z4wVQ/2/
  table タグは、ページレイアウトではなく、データ構造を表示するために使用します。

  float は、ページ上の要素を水平方向に 並べて 表示し、position は、ページ上の要素を 重なって して表示します。

  CSS フィルターを使用する前に、いくつかの質問について考える必要があります:

  CSS フィルターがページ上で何度も使用されるかどうか。
  CSS フィルターを使用すると、より多くの CPU を使用しますか?
  CSS フィルターによって生成された効果を画像を使用して直接置き換えることはできますか。
  CSS フィルターを使用した後、ページ上のコンテンツの操作に影響しますか?
  iframeを使って実装された「タブ」は、徐々にページ内容を一つに統合したり、JSで表示内容を切り替えたりするように進化してきました。
  タブを実装するには、HTML 構造と CSS スタイルの間の微妙な関係を把握する必要があります。
  負のマージンとカスケード効果の適用: 奇妙なナビゲーション メニュー。
  IE ブラウザは、各リスト li の間に数ピクセルのスペースを生成します。float:left; を使用して、余分な数ピクセルを「非表示」にします。

  例を分析する最良の方法は、例を単純化し、問題を根本的に理解して分析することです。

  クリアフローティングエフェクト:

  11. ページの位置ずれを解決します。
  12. 子要素が浮動しているため、親要素が子要素の高さに適応できない問題を解決します。

  float をクリアするためによく使用されるメソッド:

  1. clear 属性 -- よく使用される clear: 両方;

  2. 追加のタグを追加します:

  < /div> ;

  3. br タグとその独自の HTML 属性を使用します:
  4. 親要素の設定: overflow: hidden; IE6 でトリガーされます (zoom など): 1)

  5. 親要素の設定: display: table;

  6. 親要素の設定:疑似クラスの後 (推奨):

  .clearFix:after {    clear: both; /* 清除伪类层以上的浮动 */    display: block;   /* 使生成的元素以块级元素显示,占满剩余空间; */    visibility: hidden; /* 设置伪类层内容为块级元素且不可见 */       height: 0;    line-height: 0; /* 设置伪类层中的高度和行高为0 */    content: " "; /* 将伪类层中的内容清空 */}.clearFix {    zoom: 1; /* 针对IE浏览器产生hasLayout效果清除浮动 */}

  ログイン後にコピー

  構造分析 これはページ作成の最初のステップです。

  ユーザーは、スクロール バーが左右ではなく上下に動くことに慣れています。

  写真が大きい場合は、2つの写真にカットすることができます。

  セマンティック XHTML タグを使用する利点:

  スタイルを正常にロードできない場合でも、明確な文書構造が表示されます。

  SEO (検索エンジン最適化) のパフォーマンスを向上させます。

  プログラム開発との連携を強化します。

  ページ後のメンテナンスの効率を向上させます。

  あなたの作品を共有し、あなたの作品を批判する人たちに感謝の意を表しましょう。彼らはあなたに、より良いやり方を教えてくれるからです。

  コードを書く能力を向上させる方法:

  CSS マニュアルをもっと読んでください。

  XHTML コード内の各タグの意味。

  CSS レイアウトの Web サイトがどのように扱われるかを分析するのが得意です。

  CSS レイアウトの Web サイトを書く練習をもっとしてください。

  インターネット検索エンジンの使い方を学びます。

  レイアウトの問題を解決するための補助ツール (Firebug、Chrome devtool) の使用が得意です。

  経験の要約とメモの整理が得意 (PC/モバイル/Web で利用できる Youdao クラウド メモを使用することをお勧めします。WeChat のリンクをコピーすることでクラウド メモを直接同期できるため、メモを読む暇があります)。

  コードスニペットを収集して使用します。