免責事項：この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。

このリンク： https://blog.csdn.net/weixin_45734493/article/details/102766647

学習目標

スプライトと利点が何であるかを理解することができる（画像はサーバー上の圧力を低下させる、サーバーへの要求の数を減らし、小さな画像の多くに置きます）

背景画像を設定するスプライトを使用することができます

フォントのアイコンを使用することができます

スライドドアケースを完了するには

一般的なスタイルの初期化を書くことができます

BFCを理解し、トリガするBFC、いくつかの方法

......

クリアフロートダブルダミー素子

明確な擬似要素フローティングアップグレード版（のみ透明フロートを解決するだけでなく、崩壊を解決）

次のように2つの擬似要素クリアランス法を組み合わせた方法です。

ヾ（1╹◡╹）テクノ「擬似要素クリアランス方法ビス

クリアフロート：

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

マージンの崩壊の問題：

.clearfix::before {
    content: '';
    /*触发BFC + 并且转换成块级元素*/
    display: table;
}

マージされました：

/* ::before 定义成一个块级的表格， 触发 BFC 可以防塌陷 */
.clearfix::before，
.clearfix::after {
    content: "";
    /* BFC + 转化为块级元素 */
    display: table;
}

/* ::after 用于清除浮动 */
.clearfix::after {
    clear: both;
}
/* 兼容 IE 67 */
.clearfix {
    *zoom: 1;
}

（大規模なWebページのスタイルをチェックキビ、淘宝網、JD）、通常、二重擬似要素を

ヾ（1╹◡╹）テクノ「チェックページ

<!--  塌陷和清除浮动问题并存  -->
<!-- 双伪元素清除浮动 -->

<div class="father clearfix">
	<div class="son"></div>
</div>

/* 切换测试 */
/* 浮动 */
float: left;
/* 塌陷 */
margin-top: 50px;

スプライト（使用）

そのような淘宝網、またはJingdongのような全体像（CSSスプライト）、上の小さな画像

ヾ（1╹◡╹）テクノ「ペイントは、フロントエンドとバックエンドの相互作用で理解します

メリット（知っています）：

将很多的小图片放在一张大图片，最终只要请求一次就行了，可以减少对服务器的请求次数，减轻服务器的压力

エルフの使用マップ（予定）

大きな画像では、多くの小さな絵があり、その後、どのようになり、それのうち、この小さな絵？

ステップ：

ボックスを作成します。
画像サイズにより直接配置ボックスの幅及び高さに対応する小画像をPSの少量を取ります
スプライトセットボックスの背景画像
負の値の小さい画像の座標に追加しましたbackground-position：x y;
- 上に移動する背景画像をさせ、y軸座標が負であります
- 左に背景画像が移動をさせ、x軸座標が負であります

注意：

背景スプライトの配置の仕方によって、すべての小さな画像が表示できるように
同じサイズと小さな画像をボックス
に、スライス座標の量に対応し、ダイレクトアクセス割り当て（負）によってPS内

ヾ（1╹◡╹）テクノは、「彼の名前のスペル

フォントのアイコン（使用）

アイコンのテキストのようないくつかの表示

シーン：ページは、アイコン（左と右の矢印、ショッピングカート、ユーザー、など）、どのように完成した結果ページをたくさん持っていますか？？

写真短所：

余分な「httpリクエスト」の多くを追加し大幅にページのパフォーマンスを低下させます
写真は良いことができない、「ズーム」、歪んでズームイン、ズームアウトなど（モザイク）の写真

多くの場合、我々はhttpリクエスト（ウェブ速度）を最小限にしたい、アイコンがスケーリングされる（ベクトル）

フォントのアイコン（iconfont）は、これらの問題を解決することができます！！

**長所：**自然がテキストである、あなたは、任意の歪みのない、色、サイズを変更することができます

アリiconfontフォント

http://www.iconfont.cn/アリ、文字フォントのアイコン

手順（使用）を使用します

アリiconfontフォントをログに記録し、必要なアイコンがカートに入れます
ショッピングカートのアイコンをクリックして、コードをダウンロード
プロジェクトディレクトリのフォルダに新しいフォントは、パッケージ内のすべてのファイルは、フォントフォルダにフォントファイルのアイコンをコピーします
プロジェクトファイルのCSSのフォント（フォントファイルのパッケージに組み込まれたdemo_fontclass.html記述）
```
<link rel="stylesheet" href="fonts/iconfont.css">
href：写的是iconfont.css文件的路径
```
クラス名（パッケージdemo_fontclass.html用のフォントファイル仕様）を使用することにより
```
<i class="iconfont icon-refresh"></i>
```

注意：

あなたは、フォントスタイルアイコン、注意積み重ねられた問題を設定すると！！（私はクラス名でiconfontラベルを見つけます。）
あなたは、フォント、アイコンフォントファミリを変更することはできません

スライディングドア

背景適応するように我々は、テキストによると、技術の使用を学びました。いくつかの特別な効果を得ることができる（QQチャット泡）

$[画像ソースステーションは、セキュリティチェーン機構を有していてもよい、チェーンが失敗したダンプ、ダウン直接アップロード画像を保存することをお勧めします（IMG-CCQk7Wyz-1572157867966）（C：\ Users \ユーザーwl150 \デスクトップ\画像\のqipao.jpg）]$

**ペイントデモ：** QQチャット泡

スライディングの手順：

左：左の背景ポジショニング
中間体：x軸方向タイル
右：右の背景ポジショニング

広げます

要素と浮動特別インライン（理解）

フロート：ブロック内のテキスト、画像およびラインをカバーすることができない（インライン要素は、一般的にテキストのみを含む、それは一般的にフローティング要素インラインエレメントによって覆われていない：グラフィックサラウンド）、これらの要素は押しのけますが、レベルが半分のレベルに応じて依然として高いです（矛盾のない）メモリすることができます。

端的に言えば、フロートは、一般的にのみブロックレベル要素（特殊な現象は、することができます知っている）をカバー

フローティング要素とインラインのヾ（1╹◡╹）テクノ「特殊なケース

1.浮动的元素可以覆盖标准流中的块级元素
2.浮动的元素不能覆盖行内块元素
3.浮动元素不能覆盖图片
4.浮动元素不能覆盖行内元素
5.图文环绕-》浮动的元素不能覆盖文字

BFCブロックレベルフォーマットのコンテキスト（こちら）

ブロックフォーマットコンテキスト：は、単離された上でページを別々の容器の別々のブロックレベルの描画領域を意味

端的に言えば、どんなにひどくボックス内の子要素の父は、親ボックス元のレイアウトに影響を与えません。

私たちのクラスの基礎については、これは少しだけ理解2 BFCの役割をすることができ知っている必要があります。

BFCの役割：

BFCは、ボックスをトリガー、親または元のレイアウト上のボックスページ上で単離し、別の容器になった、ボックスの子要素ので、親のレイアウトに影響を与えません。
```
塌陷问题 :  子盒子设置margin-top影响到父盒子的塌陷（触发BFC后为了不影响父盒子的布局，所以消除了塌陷的影响）
浮动问题 :  子盒子设置浮动，，影响到了父盒子的高度（触发BFC后为了不影响父盒子的布局，所以清除浮动）
```
**アプリケーション：**崩壊問題を解決するため、透明フロート

崩壊の問題や浮きの問題を解決するためにヾ（1╹◡╹）テクノ」
BFCは浮動要素と重複しない通常のボックスをトリガー

**アプリケーション：**聖杯のレイアウト（雇用クラスの携帯端末レイアウトが使用されます）

ヾ（1╹◡╹）テクノ「マージン法と聖杯のレイアウト方法BFC

BFC（テスト崩壊）（理解）をトリガする方法

親ボックスセットに：

フロートの値はどれもないではありません
オーバーフローの値が表示されていません。
表示値テーブル、テーブルセル、インラインブロック
位置の値は、相対的かつ静的ではありません
以下のように...

ミレーの練習

トップ
- 境界の方法とすることができる多くの|、スパンは、境界は、疑似要素（擬似要素は共通のクラスを抽出することができます）、
ナビゲーションセクション
- マージンの上方及び下方に配置された小さな画像の高さ（底ブレスレット以下ロゴ上の高さ）とすることができるナビゲーション部の高さ、
- 高さも、全体的な高さに設定してから上下中央にテキストと画像の内側に聞かせすることができます

CSS（8）