あまり人気のないCSSのスタイルが多すぎますが、覚えておきたい場合は、この記事を読むことができます。この記事には、よく使用するものを除いて、覚えておく必要のあるCSSのプロパティがいくつか含まれています（すでに触れたことがあると思います）多く）
**
フロントエンドを学んでいる友人、あなたはしばしばあなたが知らない問題に遭遇し、数時間立ち往生し、数日間深刻であり、時には問題は非常に単純ですが、あなたはそれをすべて理解していませんでした一度？心配しないで、落胆しないでください。学んだばかりの人にとっては普通のことです。この問題を解決する方法は非常に簡単です。ここでは、フロントエンドのコミュニケーションスカート457188470をお勧めします。フロントエンドに取り組んでいる大物やフロントエンド愛好家のグループがいます。学習環境はとても良いです。誰もが答えを出すことができ、市場の現在のホットな技術的ポイントを理解することもでき、効率的に学ぶことができます。学習資料、ビデオチュートリアル、学習ツールが不足している場合は、に従ってファイルにダウンロードすることもできます。あなたのニーズ。、それはすべて無料です、さあ！みんな
****
疑似クラスセレクター
テキストシャドウの
省略形：
text-shadow：水平位置と垂直位置のぼかし距離シャドウの色。
text-indent：最初の行のインデント;
word-spacing：単語間隔;
letter-spacing：単語間隔;
リンクQ＆A
type = "text / css"は無視することも、リンクに記述しないこともでき、比較的標準が記述されています。現在のドキュメントとリンクされたドキュメント間の関係。ここでは「スタイルシート」として指定する必要があります。つまり、リンクされたドキュメントはスタイルファイルです。
インライン要素とブロックレベル要素
インライン要素：高さと幅が無効で、水平方向のパディングとマージンは有効ですが、垂直方向は無効です
一般的なインライン要素：
ブロックレベルの要素：高さと幅は有効であり、カスタマイズできます
セレクター
交差点セレクター
p.one{
color:red;font-size:14px;}
これは「つまり...そして...」を意味し、p.oneはクラス名.oneの段落タグを選択します
ユニオンセレクター（コンマ区切り）
.one,p,#test{
color:red;}
疑似要素セレクター
E :: first-letterテキストの最初の単純な単語または単語
E :: 1行目のテキストの最初の行
E :: selectionはテキスト選択のスタイルを変更します（少し使いやすい）
E :: beforとE :: afterは、コンテンツと組み合わせて使用されるインライン要素です。
「：」と「::」は、疑似クラスと疑似要素を区別します。
背景（背景）
background-image:none/url(url)
一般的な使用習慣（参照）：
.img {
width: 400px;
height: 400px;
border: 1px solid #fff;
background: #fff url(1111.jpg) no-repeat;
background-position: 30px 50px;
background-size: 200px 210px;
}
テキスト装飾
`text-decoration` 修饰文本
ボックスモデル
は比較的馴染みがあるはずです。忘れやすいいくつかの属性について話してください。
ボーダースタイルの
テーブルボーダー
table {border-collapse：collapse;}collapseという単語はマージを意味します。境界線がマージされていることを示します
ボックスを余白で中央に配置します
ボックスを水平方向の中央に配置できます。
.header{
width:960px; margin:0 auto;}
テキストの中央揃え：text-align：center;
隣接するブロック要素の垂直マージンのマージ（バグが発生しやすい）
1.上下の隣接する要素、upper：margin-bottom、lower：margin-topはマージされ（外側のマージンが折りたたまれ）、マージされたマージン値は大きい方の値と等しくなります。
解決策：回避する
2.ネストされた要素の垂直マージンを組み合わせる
解決策：
1
。親要素に1ピクセルの上部境界線を定義します。2。次を追加できます。オーバーフロー：親要素に非表示（トリガーBFC）
CSSボックスモデル
ボックスサイズ：content-box;デフォルト
box-sizing：border-box;ボックスのサイズは幅です。つまり、パディングと境界線の両方が幅に含まれます。
ボックスシャドウ
ボックスシャドウ：水平および垂直のぼかし距離シャドウサイズカラー内側/外側シャドウ。
内側の影が必要な場合は、
実際の使用法を挿入してください。box-shadow：0 15px 30px rgba（0,0,0、.4）;
CSSのポジショニングCSSに
は、通常のフロー（標準フロー）、フローティング、ポジショニングの3つのポジショニングメカニズムがあります。
フロートのクリア
子フロートが原因で親要素の内部高さが0になる問題を解決します。
アプリケーションシナリオ：記事、ウォーターフォールフローレイアウトなど、多くの場合、親ボックスの高さを指定する必要はありません。 、たとえば、記事の内容を見積もることができないためです。非常に、ボックスを適応的に開く必要があります。したがって、フロートはクリアされます。
解決：
1.セレクター{clear：both;}
2.オーバーフローを追加：hidden;を親に追加して、BFCをトリガーし、フローティングをクリアする効果を実現します
3 .:事件後：百度淘宝網網易
.clearfix::after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom: 1;
}
4.ケースの前後：XiaomiTencentコードはより簡潔です
.clearfix::after,.clearfix:before {
content: ".";
display: table;/* 这句话可以触发BFC */
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
親ボックスのクラス属性にclearfixを追加すると、使用できます。
配置の
ヒント：「息子は絶対に父親です」を念頭に置いてください
。絶対配置のボックスは、水平/垂直の中央に配置されます。
絶対に配置されたボックスマージンは無効です。
解決策：
左：50％
が自身のマージンの負の半分を歩く：margin-left
z-index
デフォルトは0です。属性が大きいほど、位置決め要素の位置が高くなります。
この属性を使用できるのは、相対、絶対、および固定のみです
。要素の表示は非表示になり、
オーバーフロー表示の可視性がより一般的です。
表示
視認性
CSSの高度なスキルの
マウスカーソルをオーバーフローさせる
カーソル：デフォルトXiaobai |ポインタ手|移動|テキストテキスト;
手を使用しない
ようにしてください。Firefoxはポインタをサポートしていません：上記のie6は
アウトラインアウトラインをサポートしています
outline:outline-color || outline-style || outline-width
通常、設定の数は気にせず、次を削除するだけです：outline：0;またはoutline：none;
（たとえば、フォーム入力をクリックすると、デフォルトで黒いアウトラインが表示されますが、削除できます、またはoutline-color：red;を使用してアウトラインの色を変更します）
テキスト領域のドラッグを防ぐサイズ
変更：FirefoxやGoogleなどのブラウザがテキスト領域を自由にドラッグしてレイアウトを破壊するのを防ぐことはできません
垂直整列
ブロックレベル要素のコンテンツ配置には影響せず、インラインおよびインラインブロック要素にのみ影響し、通常、画像/フォームおよびテキストの配置を制御するために使用されます
MDNのドキュメントには、この属性が優れていることが記載されています。
リンク：https：//developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-alignをクリック
して、画像の下側のギャップを削除します。
画像やフォームなどのインライン要素の場合、そのボトムラインは親ボックスのベースラインに揃えられます。これは問題を引き起こします、画像の下側に空白のギャップがあります。
解決：
imgをvertical-align：middle | top;などに指定します。画像をベースラインに揃えないようにします。
表示を追加します。画像にブロックを追加します。
オーバーフローしたテキストは
単語区切りを非表示にします。
主に英語の単語
の空白
テキストのオーバーフローを処理します
テキストのオーバーフローを表示するには、省略マーク（...）を設定します。
最初に強制的に1行で表示してから、overflow：hiddenを使用する必要があります
。CSSスプライトを使用します。
多くの画像が1つにまとめられ、数が減ります。サーバーがリクエストを送受信し、ページの読み込み速度を向上させます。
使用：CSSのbackground-image、background-repeat、background-positionを背景の配置に使用するか、操作を省略します
フォントアイコンiconfontの
利点：テキスト属性があり、サイズが小さく、ほとんどすべてのブラウザをサポートし、モバイル端末に不可欠です
形式：.svg
プログラマーはアイコンフォントのウェブサイトをお勧めします：http：//icomoon.io（iconmoonフォントライブラリ、ユーザーがアイコンの選択をカスタマイズしてフォントを生成できるようにします。多くの種類があり、外国のウェブサイトの開く速度は比較的遅いです）
紹介する方法は？
フォントファイルを含むfontsフォルダーを作成します
。
@ font-faceスタイルでフォントを宣言します{/ *フォントを宣言します/ font-family： 'icomoon'; /自己宣言されたフォントパッケージ/ src：url（ '…/ fonts / icomoon .eot？8qhwk5 '）; / path / src：url（'…/ fonts / icomoon.eot？8qhwk5＃iefix '）format（' embedded-opentype '）、url（'…/ fonts / icomoon.ttf ？8qhwk5 '）format（' truetype '）、url（'…/ fonts / icomoon.woff？8qhwk5 '）format（' woff '）、url（'…/ fonts / icomoon.svg？8qhwk5＃icomoon '）format（ 'svg'）; font-weight：normal; font-style：normal;}
ボックスに
フォントを使用font-family： "icomoon";
ボックスに構造を追加
span :: before {content： "\ e900";}または□/ □はウェブサイトからのコピー（非表示）* /
引き戸技術
ナビゲーションバーを設定するとき、写真のように単語数が同じではありませんが、内部のテキストコンテンツにどのように適応しますか？
方法：CSS（背景位置）とボックスパディングを使用して幅を拡大します。
<li> <li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
a {
margin: 100px;
display: inline-block;
height: 33px;
background: url() no-repeat;
padding-left: 15px;
color: #fff;
text-decoration: none;
line-height: 15px;
}
a span {
display: inline-block;
height: 33px;
background: url() no-repeat right;
padding-right: 15px;
}
a背景の左側にパディング-左を設定：15px ;、適切な幅の
スパンを拡張するためにパディングを設定し、背景の右側にパディング-右を設定：15px;残りはテキスト自体によって拡張されます。
スパンが含まれている理由は、ナビゲーション全体がクリック可能であるためです。
アニメーション（システム学習リファレンスドキュメントが多すぎます）
CSS3はトランジションを使用してトゥイーンアニメーションを実現します（トランジション効果）
構文形式：transition：遷移される属性は、モーションカーブの開始時に時間がかかります。
属性が多すぎます。MDNドキュメントを参照してください：https：//developer.mozilla.org/zh-CN/docs/Web/CSS/transition