フロントエンドの学校の募集のCSSの知識

この記事では、次の4つの側面を紹介します。

セレクタ
スタイルシートの継承
CSS3いくつかの特徴
BFC

CSSセレクタの優先ポリシー

インライン> ID>クラス= =属性セレクタ擬似クラスセレクタ>タグ=擬似要素セレクタ

優先順位特別な事情:!重要

で、スタイルの文を使用する場合は !important 、時間ルール、この文は、追加の請求をカバーします。技術が、 !important 優先順位無関係

スタイルシートの継承

関係の子孫 - CSSの重要な特徴は、それが祖先に依存して、継承されています。継承は、唯一のスタイルもその子孫に適用することができ、特定の要素に適用することができない可能にするメカニズムです。BODYの例では、色の値は、段落のテキストに適用されます定義します。

紛争の継承パターンの結果は、最近の祖先は、（最近の原則）を受賞したとき。

それがスタイルは何を継承できるように？それは私が開始されません、あまりにもだった、とここに添付の詳細リンクを

CSS3

古いルールは、我々は、第1揺動リンクはハッハッハ私は→怠け者ではなかったCSS3

その後、我々は、このためのいくつかを選択します：

、フレックスグリッドレイアウト

約2つのレイアウト、ルアンYifeng教師の書き込みは本当に良いです、私は直接リンクを置きたい、といや、いや、私は単にそれを少し書きます

（しかし、我々はまだ→fは、このリンクを入れLexのチュートリアルグリッドのチュートリアル）

1）フレックス

Flexのレイアウト要素を使用して、コンテナと呼ばれます。これは、すべての子要素が自動的にプロジェクトと呼ばれるコンテナのメンバーになるのです。

コンテナのプロパティは次のとおりです。

方向フレックス：行|行-リバース|コラム|プロジェクトのリバース列判定配列方向

ラップフレックス：NOWRAP |ラップ|ラップリバースプロジェクトかどうかを決めるだけでなく、ラップをラップする方法

フレックスフロー：フレックス方向とフレックスラップ、デフォルト値の行ラップの短縮形

コンテンツ-ザ・正当化：フレックススタート|フレックスエンド|センター|スペース-BETWEEN |横軸のアライメントの周りの空間に定義されたプロジェクト

ここでは、メインのノートスペースの間に、スペースアラウンド

ALIGN-アイテム：flex-start|flex-end|center|baseline|stretch 定义项目在纵轴上如何对齐

コンテンツ整列：軸配向の複数を定義します。プロジェクトは唯一つの軸である場合は、プロパティが動作しません。

プロジェクト属性は次のとおりです。

順序：このプロジェクトで定義されているため、小さい値より前方
フレックス成長：拡大定義されたプロジェクトは、デフォルトは0です
シュリンクフレックス：減速比定義されたプロジェクトで、デフォルトは1
フレックス基礎：余分なスペースを割り当てる前に定義され、スピンドルによって占めプロジェクトスペース、オートデフォルト
フレックス：市flex-grow、 flex-shrink そして flex-basis速記
ALIGN-自己：カバー、他の項目との単一アイテムが異なる配向を有することができalign-items特性を

2）グリッド

フレックスは、レイアウト軸で一次元であり、グリッドは、行と列に分割され、二次元レイアウト

コンテナのプロパティ：

表示：グリッド| インライングリッド

各列/行に対して定義された列幅：グリッドテンプレート列/行

グリッド行/列ギャップ：カラムのセットライン間隔/ピッチ

グリッド自動流量：行|カラム順序は、最初の行または最初の列を施行した後に決定されます

二、フィルタのフィルタ特性

このプロパティは、あなたが使用していないか、まったく印象していないかもしれないが、それはまだどこにでもありません。

フィルタ：なし| ぼかし（）| 明るさ（）| 対照的（）| ドロップ- 影（）| グレースケール（）| 色相- 回転（）| 反転（）| 不透明度（）| 飽和（）| セピア（）| URL （）;

最も一般的なフィルタ：ぼかし（PX）、画像セットにガウスぼかし、大きな値よりぼやけ

その他の詳細は、してくださいここで突く〜

第三に、メディアクエリ＆レム

メディアからの問い合わせ@media

私たちは応答ページのデザインが必要な場合は、メディアが異なる画面サイズごとに異なるスタイルを設定することができます@、メディアクエリは、非常に便利です。

语法：@mediaのMEDIATYPEと| いません| のみ（メディア機能）

MEDIATYPE：すべて/印刷/スクリーン/スピーチ

一般的なメディア機能：

最大幅/最小幅：デバイスページ最大最小可視領域の幅

オリエンテーション：ポートレート/風景肖像画や風景

REM

モバイル端末適応のために使用さREMは、まずは、レムと全角を区別しましょう

より複雑な面でより深いによるEMが継承する親要素のサイズにテキストオブジェクトの現在のフォントサイズ、ので、ページレベルに全角相対

ルート要素のサイズにレムに対しては、ルート要素を調整することができるすべての要素の大きさを変更するのみで行うことができ

JSルート要素は、フォントサイズを配置されました：

、我々は750pxの草案を設計したと、それはフォントサイズ100pxにのルート要素で提供

< スクリプトタイプ= "テキスト/ javascriptの" > 
        / * 动态调整REM值、除以100 * / 
        関数のsetSize（）{
           VAR ウェハ内= document.documentElement.clientWidth、
              WINH = document.documentElement.clientHeight、
            baseFontSize =  100 、
            ベース幅=  750 、
            winWidthSize = Math.min（ウェハ内、WINH）。
          もし（winWidthSize <  270 ）{ 
            winWidthSize =  270 。 
          }
           VAR _html = document.getElementsByTagName（' HTML ' ）[ 0 ]; 
          _html.style.fontSize = winWidthSize / ベース幅* baseFontSize +  ' ピクセル' 。
        } 
        のsetSize（）。
    </ スクリプト>

四、変換＆アニメーション

変換の変換

CSSの変換は、要素は、移動スケール、回転、細長い又は延伸することができます

構文：変換：変換方法

tranform起源：起源の変換素子を変更

2D変換の方法：

（PAN）、回転（ローテーション）、スケール（ズーム）、スキュー（傾き）、マトリックス（または複数の組み合わせ）翻訳

3Dは、変換プロパティ：

トランスフォームスタイルを：フラット| 保存-3D

遠近：素子の視野角を設定します

透視起源：底要素3Dの位置を設定します

背面視認性：要素を定義する画面に面していないときに表示され

移行移行

すべて2S：あなたは、このような遷移として、CSSプロパティやエフェクトを追加したい効果の持続時間を指定する必要があります。

推移属性：

遷移プロパティ：アプリケーションの移行CSSプロパティの名前

遷移期間：それはトランジションエフェクトを定義するのにかかる時間、デフォルト0

遷移タイミング機能：容易|線形|容易イン/アウト|立方ベジェ（）所定の時間曲線トランジション効果

遷移遅延：指定されたトランジション効果を開始する際、デフォルトは0です

アニメーションアニメーション

CSS3アニメーションを作成するには、@keyframesルールを知っておく必要があります。

@keyframesルールは、CSSスタイルとアニメーションが徐々に新しいスタイルのために現在のスタイルから変更されます指定し、アニメーションを作成することです。
@keyframesでアニメーションを作成する場合、セレクタにバインドし、そうでなければ、アニメーション効果はありません。
@keyframesでは0％と100％に相当する、「に」「から」の所定時間に変化率をしてください、またはキーワードとし、。

div要素に結び付け/ *「myfirst」アニメーション、持続時間：5秒* / 
DIV 
{ 
    アニメーション：myfirst 5S; 
} 

 / *アニメーションが25％と50％であるときに、背景色を変更し、場合アニメーションが100％完了再び変更* / 
@keyframes myfirst 
{ 
    0％{背景：赤;} 
    25％{背景：黄色;} 
    50％{背景：ブルー;} 
    100％{背景：緑;} 
}

五、BFC

BFCは何ですか？

BFC（ブロックフォーマットコンテキスト）ブロックレベルフォーマットコンテキスト、カセットレイアウトモデルのウェブCSSのレンダリングモード、別の容器手段。

BFCは、形成条件

フロートのnone以外のfloat値
位置決め要素、位置（固定、絶対）
表示：インラインブロック、テーブル、セル、フレックス、グリッド
可視光以外のオーバーフロー値

BFCの主な特徴

作成したBFC要素は、子供もそれが崩壊の高さではない、計算のフロートの高さに参加します。
BFC要素を作成、フローティング要素に隣接し、それらが互いにフローティング要素をカバーすることができません。
BFCは、子供たちには発生しません折から外部の要素を作成しました。
後に垂直方向に配置された1つの内側のボックス。
子要素の内側BFCは、外部の要素には影響しません。