整理してみましょう: CSS_html/css_WEB-ITnose の文法と概念

ここからが始まりました。ウォーミングアップの一つとして「CSSレイアウトの計算方法」のプレゼンテーションも準備中です。もちろん、例を書くのが面倒なので、さまざまな例を使用します。 =w=

文法

この段落の分類方法は https://en.wikipedia.org/ を参照しています。 wiki/Comparisonoflayoutengines(CascadingStyleSheets)

セレクター

Element

*, E, .class, #id, ns|E

Relationship

E F, E>F, E+F, E~F, E /for/ F

属性

[ attr]、[=]、[~=]、[|=]、[~=]、[$=]、[*=]

疑似クラス

• リンク

:link, :visited, :active , :hover, :focus

• 構造化擬似クラス

:root, :first-*, :last-*, :only-*, nth-*

• Form (完全にはリストされていません)

: empty、:target、:disabled、:checked、:invalid、:required

• :not()、:lang()

疑似要素

::first-letter、 ::first-line、::before、::after、::selection

属性

組版

文法レベルでは、属性は大まかに分類されているだけであり、概念段階（表示、位置、 float all は基本的なレイアウト モードを決定します)。

• モード
display

ポジション

ポジション、上、左、右、下、z-index

• boxモデル
、パディング、マージン - 、ボックスサイズ、 - width, *-height

特定モード

float

float、clear

list
list-style-*

table

border-collapse、border-spacing、caption-side、empty-cells、 table-layout

Visual Effects

overflow、clip-*、visibility

Typography

タイポグラフィは非常に大きな部分ですが、多くの新しい概念を提案するものではないため、ここでは属性のみを整理します。
• タイポグラフィーモードとその分析については、「フロントエンドのフォントタイポグラフィー」を楽しみにしていてください（チケットはあまりにも長い間遅れたため、PIAによってキックオフされました...

フォントマッチング

font-*

文区切り

空白、改行、ハイフン、ワードラップ

書き込み方向

方向、unicode-bidi、書き込みモード

その他の誤植コンテンツ

テキスト-*

効果

この段落では何も言うことはありません。なぜなら、効果は直感的であり、インターネット上で多くの例を見ることができるからです。

色と背景

色、不透明度、背景、影

変形とアニメーション

変形、遠近感、背面の可視性

アニメーション

• トランジション、アニメーション

ユーザーインターフェース

カーソル、アウトライン
値

この段落は、標準 http://www.w3.org/TR/css3-values

距離
http://css-tricks.com/the-lengths-of-css/

絶対

cm、mm、 in, pt, pc, px

relative

相対フォント em , rem, ex, ch
• 相対ビューポート vw, vh, vmin, vmax

Color

Zhang Xinxu 「CSS1 ～ CSS3 についてどれくらい知っていますか?」 色の知識?」

Xin がカバーしていないものはありますか...

キーワード

赤のような色

ButtonText のようなシステムカラー

currentColor

単色の値

RGB、#RRGGBB 、rgb()、hsl()

透明色の値

rgba( )、hsla()、transparent
時間

ms、s

周波数
Hz、kHz

角度

度、卒業、rad、turn

上記の紹介文は次のとおりです: Zhang Xinxu "CSS/CSS3 length, time , Frequency, Angle Units》

Resolution

dpi, dpcm, dppx

Number

Integer: 1

Number : 1.1

パーセンテージ: %

url

string
関数表記
• calc()

toggle()

attr()

@rules

Zhang Xinxu「ボーエン・強石: @ を理解する」 CSS の AT ルール"

@keyframes
@font-face
@ media

@charset

@import

@namespace
@document
@page
@supports
• /コメント/
• コンセプト
• 計算
• セレクター(重み)
• http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

ソースと重要度に従って並べ替えます:

ユーザーエージェント宣言

作者通常宣言

ユーザー通常宣言

作者重要宣言

ユーザー重要宣言

同じレベル、特化度（特異度）を計算

タグ

クラス

id

inline style

ユーザーエージェントはブラウザのデフォルトのUAです。

authorはCSSの宣言です。

! important は、作成者/ユーザー レベルでの重みを増やす可能性があります。

計算フェーズのさまざまな値

指定された値: スタイルシートで指定された値

• プロパティが宣言された値、継承された値、または初期値のいずれを使用するかを決定します

Computed値: 書式設定 文書化する前に、スタイルシートに基づいて計算された値

• 相対 URI は絶対 URI に変換されます

float: left は、このステップで display:block も発生するため、計算された値になります

相対単位 em は、px または同様の単​​位に変換されます (もちろん、フォント サイズに em が使用されている場合は、次のステップで計算する必要があります)

使用される値: ドキュメントをフォーマットした後の値は、スタイルシートとカスケード関係に基づいて計算されます

• px または同様の単​​位に変換されたパーセンテージ値

対応する行の高さの計算

実際の値: 使用値の使用が許可されていない場合があります一部の UA では、UA 固有の攻撃も発生する可能性があります。 変換

• たとえば、Chrome では px に小数点以下の値を使用できないため、使用される値が 33.333px であっても、実際の値は 33px になります。これにより、サブピクセルのバグが発生する可能性があります

例えば、kindle ブラウザでは、UA 自体がグレースケール以外の色をサポートしていないため、すべての色がグレーに変換されます

レイアウト

ボックスモデル

に対応しますCSS2 .1 Chapter 8 Box モデルは非常に基本的なものなので、紹介した記事には問題がほとんどないため、詳細は説明しません。

これらの概念は非常に重要であり、標準で何度も登場します:

• マージンエッジ
• ボーダーエッジ
• パディングエッジ
• コンテンツエッジ

位置決め

レイアウトシステムは、要素が表示される場所と要素がどのように相互作用するかを決定しますお互いに影響を与え合う方法。

一般的なレイアウト

CSS2.1の焦点と難しさ。
インターネットのこの部分には多くの誤った情報があり、平行輸入品に騙されやすいです。
W3Help の「CSS ポジショニング システムの概要」と、標準 CSS2.1 に対応する次の章「第 9 章 ビジュアル フォーマット モデル」および「第 10 章 ビジュアル フォーマット モデルの詳細」を参照して理解するのが最善です。

従来のレイアウトは大きく 3 つの部分に分かれています:

• Normal Flow

インラインボックス、ラインボックス、ブロックボックスの概念が登場し、BFC と IFC も提案されました。

• Float
• 絶対配置

通常のフローの高さ計算プロセスでは、各ボックスがレイアウトにどのような影響を与えるかを垣間見ることができます:

「line-height」に基づいて各インライン要素のインラインボックスの高さを計算します。属性;

'vertical-align' 属性に基づいて各インライン ボックスの垂直方向の配置を計算します

ライン ボックスの高さは、最上部のインライン ボックスの上端と下端の間の距離です。垂直方向に配置された最下位のインライン ボックス。

インライン ボックスのフォント サイズ設定がインライン ボックスの 'line-height' 設定より大きい場合、テキストが現在のライン ボックスからはみ出す可能性があります。

他のブロックレベルのコンテンツがない場合、ブロックボックス全体の高さは複数のラインボックスの累積高さに依存します

計算された各ラインボックスは、隙間のない垂直方向の高さ

テーブル

テーブルのレイアウトは非常に複雑で、外部の影響はノーマル フローに属する可能性があり、内部的にはノーマル フロー要素が相互作用する方法とは異なります。標準 CSS2.1「第 17 章 テーブル」に対応

Flex

Context

通常のフロー内のボックスは、書式設定コンテキストに属します:

BFC: Block Formatting Context

この概念の詳細Smallni の "hasLayout && Block Formatting Contexts"

IFC: Inline Formatting Context

ルールはテキストの組版から派生しており、中心的な概念は垂直方向の配置と行の高さです。

コンテキストの積み重ね

要素が位置決めで重なったときに、要素が互いにどのように重なるかを決定します。

CSS2.1 時代のルールについては、W3Help の「レイヤードプレゼンテーション」を参照してください。
CSS3 に入ると、スタッキングコンテキストは z-index によって作成されるだけではなく、複雑になります。 @KevinYue からの回答を参照してください。 (このような素晴らしい答えを好む人はいません

Viewport

Visible Viewport
Layout Viewport

quirksmode の「The Story of Two Viewports [1], [2]」を参照してください。

Viewport 関連、拡散もあります。通常見つけるのが難しい動作については、ここで私の探求を参照してください

ブロックを含む

「ブロックを含む」という概念を理解していないと、width: 100%、width: auto、top: 0; を完全に理解することはできません。など。W3Help の「包含ブロック (包含ブロック)」を参照してください。

包含ブロック

固定
静的/相対
非静的インライン
非静的ブロックの
置換された要素
置換された要素、つまり、コンテンツ ブロックが CSS フォーマット モデルを超える要素は、W3C の「第 3 章: 定義」で定義されています。W3C では、置換された要素に対して特別な位置付けがあります。第 10 章. 詳しく説明する

それらのほとんどには、固有の幅/高さ/比率があります。
ブラウザは、内部コンテンツのレンダリングに影響を与えるいくつかの CSS プロパティ (パディング、行の高さなど) を多かれ少なかれサポートしているため、扱いにくく、難しくはありません。訓練する。ただし、このサポートは CSS 標準で定義されていないため、さまざまな UA 間で違いがあります。