Lebyteでフロントエンドを学ぶ2日目-研究ノート：CSS3の包括的な知識の要約

注：CSS3の包括的な知識の概要

構造フレームワーク：6つの部分（属性、セレクター、文法とルール、値、cssユニットと付録）に分かれています

パート1：プロパティ（配置、レイアウト、フレックスボックスモデル、サイズ、外側のパディング、内側のパディング、境界線、背景、色、フォント、リスト、テーブル、コンテンツ、ユーザーインターフェイス、複数の列、2D変換、遷移、アニメーション、印刷、メディアクエリ、IEのみ、Firefoxのみ、webkitのみ）

2番目の部分：セレクター（要素セレクター、関係セレクター、属性セレクター、疑似タイプセレクター、疑似オブジェクトセレクター）

パート3：文法とルール（！Important、/ comment /、@ import、@ charset、@ media、＃font-face、@ page、@ keyframes）

パート4：値（色、テキスト、機能、画像、番号、その他）

パート5：CSSユニット（長さ、角度、時間、頻度、レイアウト）

パートVI：付録（カラーキーワード、メディアタイプ、css条件ハック、css属性ハック、cssセレクターハック、cssbugsソリューション、cssスキルと経験、cssその他のスキル）

---

パート1：プロパティ

セクション1：配置（位置、zインデックス、上、右、下、左）

第二节：布局（表示、フロート、クリア、視認性、クリップ、オーバーフロー、オーバーフロー-x、オーバーフロー-y）

display：Noneはオブジェクトを非表示にします。可視性属性の非表示値とは異なり、非表示オブジェクトの物理スペースを予約せず
inline、オブジェクトをインライン要素として指定します。
block指定されたオブジェクトはブロック要素です。
list-item指定されたオブジェクトはリストアイテムです。
inline-block指定されたオブジェクトはインラインブロック要素です。（CSS2）
tableオブジェクトをブロック要素レベルのテーブルとして指定します。htmlタグ<table>（CSS2）と同様に
inline-table、オブジェクトをインライン要素レベルのテーブルとして指定します。htmlタグ<table>（CSS2）と同様に
table-caption、オブジェクトをテーブルタイトルとして指定します。htmlタグ<caption>（CSS2）と同様に
table-cell、オブジェクトをテーブルセルとして指定します。htmlタグ<td>（CSS2）と同様に
table-row、オブジェクトをテーブル行として指定します。htmlタグ<tr>（CSS2）と同様に、
table-row-groupオブジェクトをテーブル行グループとして指定します。htmlタグ<tbody>（CSS2）と同様に、
table-columnオブジェクトをテーブル列として指定します。htmlタグ<col>（CSS2）と同様に、
table-column-group指定されたオブジェクトはテーブル列グループとして表示されます。htmlタグ<colgroup>（CSS2）と同様に
table-header-group、オブジェクトをテーブルタイトルグループとして指定します。htmlタグ<thead>（CSS2）と同様に、
table-footer-groupオブジェクトをテーブル脚注グループとして指定します。ブロックオブジェクトまたはコンテンツベースのインラインオブジェクト（CSS3）にオブジェクトを割り当てるhtmlタグ<tfoot>（CSS2）と同様に
compact、ブロックオブジェクトまたはコンテンツベースのインラインオブジェクト（CSS3）に
run-inオブジェクトを割り当て、オブジェクトを
rubyテーブル脚注グループとして表示します（ CSS3）
ruby-baseオブジェクトをテーブル脚注グループとして表示する（CSS3）
ruby-textオブジェクトをテーブル脚注グループとして表示（CSS3）
ruby-base-groupオブジェクトをテーブル脚注グループとして表示（CSS3）オブジェクトをテーブル脚注グループ
ruby-text-groupとして表示（CSS3）ボックスオブジェクトをフレキシブルボックスモデルとして表示
（CSS3）-webkit-box; -moz-box ; -o-box; -ms-box; inline-boxは、オブジェクトをインラインブロックレベルのフレキシブルボックスモデル（CSS3）として表示します。

クリップ：rect（0 auto 35px 10px）は上端をカットせず、右端をカットせず、下端は35番目のピクセルから下端にクリップされ、左端はクリップされます10

overlay：visibleでコンテンツが切り取られない場合
hidden、オブジェクトサイズを超えるコンテンツはクリップされ、スクロールバーは表示されません。
scrollオブジェクトサイズを超えるコンテンツはトリミングされ、超過したコンテンツはスクロールバーに表示されます。
autoコンテンツを切り取り、必要に応じてスクロールバーを追加します。これは、bodyオブジェクトとtextareaのデフォルト値です。

セクション3：フレキシブルボックスモデル（ボックス指向のサブ要素の配置、ボックスパックのサブ要素の配置、ボックスの配置のサブ要素の配置、ボックスフレックスのサブ要素、残りのボックスの残りのスペースの割り当て方法、ボックスフレックスグループ子要素のグループ、box-ordinal-group子要素の表示順序、box-direction子要素の順序を逆にするかどうか、box-lines子要素を新しい行に表示できるかどうか）有効にするには、親要素をboxまたはyesとして表示する必要があります。インラインボックス;ブラウザに注意してください

box-orientは、ボックス内の要素の方向配置
horizontal（水平線の左から右）vertical（垂直線の上から下）
inline-axis（水平配置）、block-axis（垂直配置）、inherit（親要素の継承）を定義します。

---

box-pack：startは、フレックスボックスモデルオブジェクトの子要素を開始位置から位置合わせするように
center設定し（ほとんどの場合、左揃えに相当）、フレックスボックスモデルオブジェクトの子要素を中央に配置するように
end設定し、フレックスボックスモデルオブジェクトの子要素を終了位置から位置合わせするように設定します（大状況の一部は、
justify右揃えと同等です）フレックスボックスモデルオブジェクトの子要素を設定または整列します

box-align：start
centerは、フレックスボックスモデルオブジェクトの子要素を開始位置から整列するように
end設定し、フレックスボックスモデルオブジェクトの子要素を中央に整列するように設定し、フレックスボックスモデルオブジェクトの子要素を終了位置から
baseline整列するように
stretch設定し、フレックスボックスモデルオブジェクトの子要素のベースライン整列設定を設定しますフレックスボックスモデルオブジェクトの子要素は、親要素のサイズに適応します

---

box-flex：0親要素の幅に応じて子要素を分割します。コンテナを6つの部分に分割し、サブオブジェクトaを1つの部分に分割し、bを2つの部分に分割し、cを3つの部分に分割します（残りのスペースの動的割り当て）

---

box-flex-group：1コンテンツに必要な実際のスペースを、番号の大きいグループに動的に割り当て（コンテンツ、パディン、ボーダーがない場合、スペースを占有しません）、残りのスペースは、番号が最も小さいグループに均等に割り当てられます（おそらく1つ以上の要素があります）

box-ordinal-group：1 3つの列の順序を調整します。数値が大きいほど、数値が小さくなり、値の小さい要素が値の大きい要素の前に表示されます。同じ値の要素の表示順序は、コードの順序によって異なります。

box-direction：normalは、内部要素の配置順序を決定します
normal、reverse（flip）、inherit通常の順序で配置されるフレックスボックスモデルオブジェクトのサブ要素を設定しますフレックスボックスモデルオブジェクト
reverseのサブ要素の配置順序を逆にします

box-lines：単一のフレックスボックスモデルオブジェクト
multipleの子要素は1行にのみ表示されます。フレックスボックスモデルオブジェクトの子要素は、親要素のスペースを超えると新しい行に表示されます。

第四节：尺寸（幅、最小幅、最大幅、高さ、最小高さ、最大高さ）
第五节：外补白（マージン、マージントップ、マージン右、マージンボトム、マージン左） ）
第六节：内补白（パディング、パディングトップ、パディング右、パディングボトム、パディング左）
第七节：边框（ボーダー、ボーダー幅、ボーダースタイル、ボーダーカラー、ボーダートップ、 border-top-width、border-top-style、border-top-color、border-right、border-right-width、border-right-style、border-right-color、border-bottom、border-bottom-width、 border-bottom-style、border-bottom-color、border-left、border-left-width、border-left-style、border-left-color、border-image、border-radius、border-top-left-radius、 border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius、box-shadow阴影、box-reflect倒影）

border-image：border-image-sourceborder-image-slice / border-image-width / border-image-outset / border-image-repeat
なし：背景画像なし。
<url>絶対アドレスまたは相対アドレスを使用して画像を指定します。
<number>浮動小数点数で幅を指定します。負の値は許可されていません。
<percentage>幅をパーセンテージで指定します。負の値は許可されていません。
<length>長さの値で幅を指定します。負の値は許可されていません。
ストレッチ：フレームの背景画像を塗りつぶすストレッチ方法を指定します。
繰り返し：境界線の背景画像をタイリングで塗りつぶすように指定します。写真が境界線に当たったとき、それを超えると切り取られます。
round：フレームの背景画像をタイリングで塗りつぶすように指定します。画像は、フレーム全体を埋めることができるまで、フレームのサイズに応じて画像のサイズを動的に調整します。

border-image:url(skin/border.png) 27/27px;

---

box-shadow
none：影なしの
<length>①最初の長さの値は、オブジェクトの影の水平オフセット値を設定するために使用されます。負の値にすることができ
<length>②、2番目の長さの値は、オブジェクトのシャドウの垂直オフセット値を設定するために使用されます。負の値にすることもできます
<length>③。3番目の長さの値が指定されている場合は、オブジェクトのシャドウブラー値を設定するために使用されます。負の値
<length>④は許可されていません.4番目の長さの値が指定されている場合、それはオブジェクトのシャドウ拡張値を設定するために使用されます。負の値
<color>を使用して、オブジェクトの影の色を設定することはできません。
挿入図：オブジェクトのシャドウタイプを内側のシャドウに設定します。値が空の場合、オブジェクトのシャドウタイプは外部シャドウです
box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);

---

box-reflect：none | <direction> | <offset> | <mask-box-image>`
`<direction> = above | below | left | right`
`<offset> = <length> | <percentage>`
`<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> |<repeating-radial-gradient>`
默认值：none无倒影
`box-reflect:below 0 linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));

セクション8：背景（背景、背景色、背景画像、背景リピート、背景アタッチメント背景画像はスクロールまたは固定、背景位置、背景原点、背景クリップ、背景サイズ、複数背景の混合属性）

background-image:-moz-linear-gradient(top , #45B5DA, #0382AD);渐变背景`
`background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD));渐变背景`
`background-image:-o-linear-gradient(top , #45B5DA, #0382AD);渐变背景`
`background-image:url(skin/p_103x196_1.jpg),url(skin/p_103x196_2.jpg),url(skin/p_103x196_3.jpg);多重背景`
`background：linear-gradient（top，#000，#999）。从上到下、从黑色到灰色水平方向渐变`
`background：linear-gradient（left，#000，#999）。起始于左边、从黑色到灰色垂直方向渐变`
`background：linear-gradient（left，30deg，#000，#999）。起始于左边，倾斜30度、从黑色到灰色水平渐变`
`background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

第九节：颜色（色、不透明度）
第十节：字体（フォント、フォントスタイル、フォントの太さ、フォントサイズ、フォントファミリー、フォントストレッチ）
第十一节：文本（テキストインデント、テキスト） -オーバーフロー、text-align、text-transform、text-decration、text-decoration-line、text-decoration-color、text-decoration-style、text-shadow、text-fill-color、text-stroke、text-stroke -幅、テキスト-ストローク-色、文字間隔、単語間隔、垂直方向の配置、単語の折り返し、空白、方向、ユニコードビディ、行の高さ、タブサイズ）

text-overflow
クリップ：オブジェクト内のテキストがオーバーフローすると、省略マーク（...）は表示されませんが、オーバーフローした部分は切り取られます。
ellipsis：オブジェクト内のテキストがオーバーフローしたときに省略形（...）を表示します。

text-transform
none：変換なし大文字：
各単語の最初の文字を
大文字に変換大文字：大文字に変換
小文字：小文字に変換
全幅：
フルサイズ-kana：

white-space
normal：デフォルトの処理方法。
pre：事前にフォーマットされたテキストをモノスペースのフォントで表示し、テキスト間の空白の距離をマージせず、テキストが境界を超えたときに折り返さないでください。preオブジェクト
nowrapを参照できます。テキストの終わりまで、またはbrオブジェクトに遭遇するまで、すべてのテキストを同じ行に強制的に表示します。
pre-wrap：テキスト間の空白の距離をマージせずに、事前にフォーマットされたテキストをモノスペースフォントで表示し、境界に達したときにテキストを折り返します。
pre-line：テキストの改行を保持し、テキスト間の空白の距離を保持しないでください。テキストが境界に当たると改行が発生します。

方向
ltr：テキストフローは左から右です。
rtl：右から左へのテキストフロー

unicode-bidi
normal：オブジェクトは追加の埋め込みレイヤーを開きません。インライン要素の場合、暗黙的な並べ替えはオブジェクトの境界を越えて機能します。
embed：オブジェクトは追加の埋め込みレイヤーを開き、direction属性の値は埋め込みレイヤーを指定し、暗黙的な並べ替えがオブジェクト内で実行されます。

bidi-overrideは
、direction属性の値に従って厳密に並べ替えます。暗黙の双方向操作ルールは無視してください。
同じページに異なる方向から読み込まれたテキストを表示するために使用されます。方向属性とともに使用
する方向属性をインライン要素のテキストに適用する場合は、unicode-bidi属性をembedまたはbidi-overrideに設定する必要があります。

セクション12：リスト（list-style、list-style-image、list-style-position、list-style-type）

リストスタイルタイプの
ディスク：黒丸（CSS1）
円：白丸（CSS1）
正方形：中実正方形（CSS1）
10進数：アラビア数字（CSS1）
小文字ローマ数字（CSS1）
大文字ローマ数字：大文字ローマ数字（CSS1）
小文字：小文字の英字（CSS1）
大文字：大文字の英字（CSS1）
なし：箇条書きなし（CSS1）
アルメニア語：従来のアルメニア語番号（CSS2）
cjk-ideographic：淡いイデオグラフィック番号（CSS2）
ジョージアン：伝統的なジョージの数字（CSS2）
小文字：基本的なギリシャ語の小文字（CSS2）
ヘブライ語：伝統的なヘブライ語の数字（CSS2）ヒラガナ：日本のヒラガナ
文字（CSS2）
ヒラガナ-iroha：日本のフラットかなシリアル番号（CSS2）
カタカナ：日本語カタカナ文字（CSS2）
カタカナ-イロハ：日本語カタカナシリアル番号（CSS2）
小文字ラテン：小文字ラテン文字（CSS2）
大文字：大文字ラテン文字（CSS2）

セクション13：テーブル（table-layout、border-collapse、border-spacing、caption-side、empty-cells）
セクション14：コンテンツ（content、counter-increment、counter-reset、quotes）

content
normal：デフォルト値。動作は
none値と同じです。none：値は生成されません。
<attr>タグ属性
値を挿入します。attrp：after {content：attr（title）;}
<url>指定された絶対アドレスまたは相対アドレスを使用して、外部リソース（画像、オーディオ、ビデオ、またはブラウザーでサポートされているその他のリソース）を
挿入します。.urlp：before { content：url（…/…/ skin / ico.png）;}
<string>文字列
counter（name）を挿入します：名前付きカウンターを使用します
。counter1li：before {content：counter（testname）;}
counter（name、list-style -type）：名前付きカウンターを使用し、指定されたlist-style-type属性に従います
。counter2li：before {content：counter（testname2、lower-roman）;}
counters（name、string）：すべての名前付きカウンターを使用します。
.counter3 li {counter-increment：testname3;}
.counter3 li：before {content：counter（testname3、decimal） "。";}
counters（name、string、list-style-type）：すべての名前付きカウンターと指定されたlist-style-type属性に従ってください
no-close-quote：quote属性のポストマークを挿入しないでください。しかし、その入れ子レベルを上げます
.counter3 li li：before {content：counter（testname3、decimal） "。" counter（testname4、decimal） "。";}
no-open-quote：quote属性のフロントマークを挿入しません。ただし、ネストレベルを下げます。close
-quote：
quote属性のbackタグを挿入しますopen-quote：quote属性のfrontタグを挿入します
counter-increment：none |[<identifier> <integer>]

第十五节：用户ユーザーインターフェース（アウトライン、アウトライン幅、アウトラインスタイル、アウトラインカラー、アウトラインオフセット、nav-index、nav-up、nav-right、nav-down、nav-left、cursor、zoom 、ボックスサイジング、サイズ変更、imeモード）

outline境界線
outline-widthと同様に、要素の周囲に輪郭を定義します。輪郭境界線の幅を指定します。
アウトラインスタイル：アウトラインボーダーのスタイルを指定します。
アウトラインカラー：アウトラインボーダーの色を指定します。
outline:2px solid #f00;border:3px solid #333;

アウトライン幅
<length>は、長さの値を使用してアウトラインの太さを定義します。負の値の
中は許可されていません：デフォルトの幅の輪郭を定義します。
thin：デフォルトの幅よりも細い輪郭を定義します。
太い：デフォルトの幅より太いアウトラインを定義します。

アウトラインスタイル
なし：アウトラインなし。
点線の指定されたアウトライン幅の値とは無関係：点線のアウトライン。
破線：破線の輪郭。
実線：実線の輪郭
double：二重線の輪郭。2本の単一線とそれらの間隔の合計は、指定されたアウトライン幅の値の
溝に等しくなります：3D溝の輪郭。
尾根：3D凸溝プロファイル。
挿入図：3D凹型エッジ輪郭。
最初：3D凸状エッジ輪郭。
outline-offset：4px；

cursor [<url> [<x> <y>] [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]

サイズ変更
なし：ユーザーは要素のサイズを変更できません。
両方：ユーザーは要素の幅と高さを調整できます。
水平：ユーザーは要素の幅を調整できます
垂直：ユーザーは要素の高さを調整できます。
none：ユーザーは要素のサイズを調整できません。
両方：ユーザーは要素の幅と高さを調整できます。
水平：ユーザーは要素の幅を調整できます
垂直：ユーザーは要素の高さを調整できます。

第十六节：多栏マルチカラム（カラム、カラム幅、カラムカウント、カラムギャップ、カラムルール、カラムルールスタイル、カラムルールカラー、カラムスパン、カラムフィル、カラム-break-before、column-break-after、column-break-inside）

columns:200px 3;

columns:200px;

column-count:3;column-gap:40px;

セクション17：2D変換（変換、変換元）

translateモバイル。翻訳（X（左の位置からの距離）、Y（上の位置からの距離））。変位は座標軸の原点を中心とし、正の値は右下隅に移動します。
1回転。トランスフロム：回転（10度）。平面を回転させる角度
2斜めに引く。スキュー（X、Y）。
3ズームをどれだけ傾けるか。scale（X、Y）。ズームインまたはズームアウトする回数
4回。translate（X、Y）

transfrom：rotate（30deg）。
transfrom：scale（X，Y）。
transfrom：skew（X，Y）。
transfrom：translate（X，Y）。
1234

すべての2D変換方法は相互に接続されていmatrix()ます。matrix();
開始点の位置を変更するための長方形の変換：transfrom-origin：bottom left

eg：transfrom：scale（1.5）。
对应的matrix是 transfrom：matrix（1.5，0，0，1.5，0，0）；

matrix（scaleX，0，0，scaleY，0，0）
1234

マトリックスを掘り下げる

matrix（）およびmatrix3d（）、前者は2D平面移動変換、33です。後者は3D変換です44。
transfrom：次
の図に示すように、マトリックスに対応するマトリックス（a、b、c、d、e、f）。

最初の値に最初の値を掛け、2番目の値に2番目の値を掛け、3番目の値に3番目の値を掛けます。

ax + cy + eは水平座標です。bx + dy + fは垂直座標です。

transfrom：matrix（1、0、0、1、30、30）// a = 1、b = 0、c = 0、d = 1、e = 30、f = 30。
中心座標が（0、0）であると仮定します
。x座標はax + cy + e = 1 0 + 0 0 +30 = 30です。
y座標はbx + dy + f = 0 0 + 1 0 + 30 = 30です。
中心座標が（30、30）に変更され、右下隅にオフセットされます。transfrom：translate（30px、30px）
なので、マトリックスは
ズームする最後の2つのパラメーターのみを考慮する必要があります。transfrom：matrix（1、0、0、1、30 、30）ここで、1はスケーリングパラメータであるため、transfrom：matrix（scalex、0、0、scaley、30、30）として記述されます。

セクション18：移行

transition-property：遷移効果のCSSプロパティ名。なし、すべて、インデント
遷移期間：遷移期間。
遷移タイミング関数：遷移速度曲線。最初にフラットまたは低速、次に高速。
遷移遅延：遷移遅延。

セクション19：アニメーション（animation-timing-function）

animation-name：`动画名称。
`animation-delay：`动画延迟。
`animation-duration：`动画运动周期时长。
`animation-timing-function：`动画速度曲线。linear（速度一致）、ease（低速开始，然后加快，结束慢）、ease-in（低速开始）、ease-out（低速结束）、ease-in-out（低速开始和结束）、cubic-bezier（自己的值，从0到1）
`animation-iteration-count：`动画播放次数。0、infinite。
`animation-direction：`动画是否在下一个周期逆向播放。normal、alternate。
`animation-play-state：`动画是否正在运行或暂停。
`animation-fill-mode

简写：アニメーション：名前持続時間タイミング機能遅延

@keyframes  animationName{
    from{ ...... }
    to{ ...... }
}
@keyframes animationName{
    0%{ ...... }
    50%{ ...... }
    100%{ ...... }
}