ホームページ >ウェブフロントエンド >htmlチュートリアル >新しい CSS 仕様の解釈draft_html/css_WEB-ITnose
新しい CSS 仕様の解釈draft_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:20:021160ブラウズ
結論:
CSS はドキュメントのスタイルを記述するための言語であり、HTML に依存せず、他の多くのマークアップ言語で使用できます。それは視覚メディアだけでなく、聴覚メディアにも当てはまります。
CSS の世界にはワイヤーフレームしかありません。CSS で考えるということは、ドキュメント内で表示または読み取り可能なものすべてをワイヤーフレームで描画することを意味します。これらのワイヤーフレームの入れ子関係は、ドキュメント構造内の要素の入れ子関係とは異なります。特定のレイアウト方法により、その入れ子関係が変わります。まずワイヤーフレームの入れ子関係を確認し、次にこのワイヤーフレーム内のすべてのワイヤーフレームのサイズ、配置、マテリアル、スキンに関する計算ルールを覚えてください。
ボックスをボックスに翻訳するのは不適切だと思います。ワイヤーフレームよりも悪いです。中国語では、ボックスは 3 次元の概念です。CSS ボックスを理解するためにボックスを使用すると、従来の印刷および植字用語で理解する方が適切です。たとえば、子ボックスが親ボックスからはみ出した場合、それを理解するためにボックスを使用するのは奇妙ですが、出版用語のブリードと同様に、ワイヤーフレームを使用するとはるかに理解しやすくなります。印刷や写植の分野で広く使用されているボックスという用語は、CSS ボックスによく似ています。ボックスを作成する代わりに、それを直接使用してみてはいかがでしょうか。実際、ボックスに限らず、多くの場所でタイポグラフィの用語を翻訳に適用できます。
最新の草案の説明は、古い仕様の用語定義とは大きく異なります。さらに、CSS 仕様は現在、独立したサブモジュールに分割されてリリースされており、一部の基本モジュールの用語定義が決定されていないため、これらのモジュールに依存する他のモジュールの用語定義が混乱を引き起こしています。さまざまなモジュール仕様を読むと、同じ用語が互いに使用されていますが、定義が異なることがわかります。彼らはこれらのルールを説明するために別の言葉を使用しており、より良い用語体系を確立したいと考えていました。仕様とは、メーカーの具体的な実装計画や開発者の具体的な開発計画を現実に標準化したものです。実際、これは、さまざまな計画のリーダーが互いに妥協し、交渉を通じて合意に達することを可能にするものであり、これはさまざまな製造業者や開発者を規制し、統一計画の実施を要求するために使用されます。
今日から明日の CSS 構文を使用してください。
http://cssnext.io/
これは JS 風のバベルです。ブラウザの対応を待たずに、新しいCSS仕様の内容を先行して利用してみましょう。しかし、CSS の特殊性により、cssnext は babel に比べて低すぎます。 CSS の分野では、古くても安全なソリューションのみが長期間使用できると推定されています。
CSS 仕様を理解する: コンピューター サイエンスの学生でなくても、18 歳以上である必要も学士号を持っている必要もありません。W3C の CSS ドキュメントを理解できることが前提となります。勉強する意欲があり、忍耐強く、細部に注意を払います。
http://www.chinaw3c.org/archives/369/
最新の CSS 仕様ドラフト
https://drafts.csswg.org/
関連コンテンツの概要:
CSS Device Adaptation Module
ビューポート 古い仕様では、ビューポートという用語は連続メディアにのみ適用され、@viewport は連続メディアに、@page はページ付きメディアにのみ適用されます。ビューポートがすべてのメディアで動作するようになりました。
この仕様では、ユーザー エージェント (UA) を通じてビューポート サイズをオーバーライドする方法が導入されています。 したがって、初期ビューポートと実際のビューポートを区別する必要があります。
初期ビューポート
初期ビューポートは、UA または作成者のスタイルが UA の画面ウィンドウまたは可視領域ウィンドウを覆う前のウィンドウを指します。初期ビューポートのサイズは、UA のウィンドウまたはビューポートのサイズに応じて変化することに注意してください。
実際のビューポート
実際のビューポートは、すべてのスタイル シートのビューポート記述子を連結し、CSS ルールに従って適用することによって作成されるウィンドウを指します。
現在の UA ウィンドウまたはビューポートに実際のウィンドウを完全に表示できない場合、実際のウィンドウが初期ウィンドウよりも大きいためではなく、スケーリングにより実際のウィンドウの一部しか表示できないことが原因です。 UA はスクロール バーまたはドラッグ メカニズムを提供する必要があります。
つまり、初期ウィンドウは最終的な表示媒体の表示領域のサイズであり、実際のウィンドウはスタイルシートで指定されたサイズ、または初期のものと同じに設定できます。それより大きい場合は、一部のコンテンツが表示されないため、表示するにはスクロールまたはドラッグする必要があります。たとえば、window.innerWidth/Height は初期ビューポートのサイズです。 document.documentElement.clientWidth/Height は、実際のビューポートのサイズです。
ドキュメントルート要素の方向属性値が ltr の場合、同様に、実際のウィンドウの左上隅を UA ウィンドウまたはビューポートの左上隅に揃えることをお勧めします。 rtl を実行すると、右上隅が揃えられます。
メディア クエリ
ドキュメントをレンダリングするためのメディアが多数あるため、最初の囲み領域のサイズとデバイスの向きがメディア クエリの計算結果に影響します。つまり、@viewport の影響に特別な注意を払う必要があります。メディアクエリに関するルール。メディア クエリ レベル
メディア クエリを使用すると、作成者は UA または表示デバイスの値や特性を検出してクエリし、それに応じてドキュメントを独自のスタイルにレンダリングできます。 CSS @media ルールを使用して、条件に応じてさまざまなスタイルをドキュメントに適用します。
メディア クエリ レベル 4 では、メディア クエリ、メディア タイプ、メディア機能の構文とメカニズムについて説明します。
メディアクエリは、値が true または false である論理式です。これは、メディア タイプとメディア条件の 2 つの部分で構成されます。両方が true の場合、この式の値は true、そうでない場合は false になります。
複数のメディア クエリをカンマ区切りのメディア クエリのリストに結合できます。
メディア タイプは、UA の広いカテゴリを指します。メディア タイプ セットの元の定義は、link 要素の media 属性の HTML4 仕様にありました。
過去の状況から判断すると、メディアタイプは、ますます複雑化するUAの状況をうまく区別できません。そこで、問題を解決するためにメディア タイプの拡張を諦め、代わりにより洗練されたメディア機能を採用しました。構文的には、メディア機能は CSS プロパティのように見えます。各メディアの特性は、レンジタイプと個別ディスクリートタイプの 2 つのカテゴリに分類されます。範囲属性名には通常、min- または max- という接頭辞が付けられます。個々のクラス属性値は通常、仕様で指定されたキーワード、または 0 や 1 などのブール数値です。
複数のメディア特性では、論理演算子 (not と or) を使用してメディアの条件判断ステートメントを形成できます。 CSS 表示モジュール
このモジュールでは、ドキュメント要素ツリーから CSS 書式設定ボックス ツリーを生成する方法を説明し、ワイヤーフレーム boxex を制御するための表示プロパティとボックス抑制プロパティを定義します。
ビューポートとキャンバス ビューポートとキャンバス ビューポートは、ドキュメントを閲覧するためのメディアの表示領域です。すべてのメディアにおいて、キャンバスという用語は、フォーマットされた構造がレンダリングされる表示スペースを表すために使用されます。このキャンバスのサイズは無制限です。
CSS は、構造化ドキュメント (HTML や XML など) がディスプレイ、印刷、音声ストリーム、その他のメディア上でどのようにレンダリングされるかを記述する言語です。
CSS は、キャンバス上の要素ツリーに編成されたソース ドキュメント (表示画面、紙、音声ストリームなど) をレンダリングします。これを行うために、レンダリングされたドキュメントのレイアウト構造を表す中間構造であるボックス ツリーが生成されます。
各ワイヤーフレームは、対応する要素または疑似要素がキャンバス上に表示される空間または時間を表します。
ボックスツリーを作成するプロセス。
CSS はまず、カスケード ルールと継承ルールを使用して、ソース ノード ツリー内の各要素の各 CSS プロパティに値を割り当てます。
次に、表示およびボックス抑制属性設定に従って各要素に対して 0 個以上のワイヤーフレーム ボックスを生成します。通常は 1 つの要素が別個のワイヤーフレーム ボックスを生成します。ただし、一部の表示属性値 (display: list-item など) は複数のワイヤーフレーム (プリンシパル ブロック ボックスとマーカー ボックスなど) を生成し、一部の属性値 (display:none、display:contents、display:contents など) box-suppress: destroy) を指定すると、この要素またはその子孫によってワイヤーフレーム boex がまったく生成されなくなります。
特に明記されていない限り、ワイヤーフレーム ボックスは生成元の要素と同じスタイルになります。これらは通常、表示タイプと呼ばれます。たとえば、表示属性がブロックである要素によって生成されるワイヤーフレーム ボックスは、ブロック ワイヤーフレーム「ブロック ボックス」またはブロック「ブロック」と呼ばれます。
匿名ボックスは、どの要素にも関連付けられていないワイヤーフレーム ボックスです。
匿名ボックスは、ボックス ツリーの特別な編成が必要な場合に生成されます。この状況では、特別な入れ子構造が必要になります。この構造内のワイヤーフレーム ボックスは要素ツリーから生成されません。
たとえば、テーブル セル ボックスに特殊なタイプの親ボックス (テーブル行ボックス) が必要な場合、その親ボックスがテーブル行ボックスでない場合は、それをネストするために匿名のテーブル行ボックスが生成されます ([ CSS2] § 17.2.1.) 要素生成ボックスとは異なり、要素生成ボックス スタイルは、ボックス ツリー内にのみ存在する匿名ボックス スタイルは、そのボックス ツリーから厳密に継承されます。
植字プロセス中に、ボックスのワイヤーフレームが複数のフラグメントに分割されることがあります。これは、たとえば、インライン ボックスが複数の行に分割される場合、またはブロック ボックスがページまたは列時間にわたって分割される場合に発生します。フラグメンテーションの詳細については、[CSS3-BREAK] を参照してください。CSS の基本ボックス モデル
CSS は、ドキュメントのプレゼンテーションが要素ツリーに基づいてモデル化されていることを前提としています。各要素は、0 個以上のサブ要素と、サブ要素の前後および間にオプションのテキスト文字列を含む順序付きリストです。すべての子要素には親がありますが、親を持たない唯一の要素はルート要素と呼ばれます。
CSS は、各要素と各テキスト文字列がドキュメント ツリー モデルからレイアウト用の一連の長方形ボックスにどのように変換されるかを記述します。そのサイズ、位置、およびスタック レベルはすべて、ボックスのプロパティによって異なります。
要素は 1 つ以上のワイヤーフレーム ボックスを生成すると言います。これらはさまざまなタイプのワイヤーフレーム ボックスです。
ノーマル フローとも呼ばれるフローは、CSS の 2 つの基本的なタイポグラフィ タイプのうちの 1 つで、もう 1 つはライン レイアウト [CSS3LINE] です。テーブル [CSS3TBL]、位置決め [CSS3POS]、フレックス ボックス [CSS3-FLEXBOX]、グリッド テンプレート [CSS3LAYOUT] などの他の CSS モジュールはすべて、ドキュメントを複数のフローに分割することによって、フロー モデルに基づいて実装されます。は、これらのさまざまなフローを通じて位置決めおよび校正されます。
ボックスが次のルールを満たす場合、フロー ルートと呼ばれます:
'float' の値は 'none' ではありません。
'overflow' の使用値は ' ではありません。
'display' の値は 'table-cell'、'table-caption' ([CSS3TBL] を参照)、'inline-block' または 'inline-table' です。'position' の値'static' でも 'relative' でもありません ([CSS3POS] を参照)。
'block-progression' の値は 'lr' または 'rl' であり、その親ボックスの 'block-progression' の値は 'tb '
'block-progression' の値は 'tb' であり、その親ボックスの 'block-progression' の値は 'lr' または 'rl' です。
flow ルート用語は CSS レベル 2 で定義されています古い仕様では、フロー ルートは「新しいフォーマット コンテキストを確立する要素」として定義されていました。
フローはフロー ルートから派生したと言います。フロー ルート自体は、それが導くフローの一部ではないことに注意してください。各フロー ルートは最大 1 つのフローにつながります。
フロールートのフローはボックスのセットです。要素のボックスがフロー ルートであり、その子要素のボックスが次のルールを満たす場合、その要素はこのフローに属します:
その 'display' の使用値は 'block'、'list-item'、' です。 table' または 。
その 'float' の使用される値は 'none' です。
その 'position' の使用される値は 'static' または 'relative' です。
の子のいずれかです。フロー ルート、またはフローに属するボックスの子。
要素ツリーとボックス ツリーは、必ずしも同じではないことに注意してください。たとえば、DOM ツリー内の要素のボックスは、変更によって異なります。位置属性、そのボックスの親ボックスは、親要素のボックスではなく、祖先要素のボックスである場合があります。
前後のフローティング ボックスの影響を無視するボックスが必要な場合は、そのクリア属性値を前と後ろのボックスのフロート、または両方の値と同じ値に設定できます。
フローティング要素はフロー ルートであるため、そのような要素に「clear-after」を設定すると、独自のフロー内のこの要素の子孫のフローティングが削除されるだけであることに注意してください。
補足説明:
要素ボックスの float 属性値がデフォルト値の none 以外の場合、親ボックスのフローから切り離され、新たなフローが生成され、要素ボックスの左側または右側にフロートされます。オリジナル親箱。前の兄弟ボックスも同じ浮動属性値を持っている場合、そのボックスはその隣に浮動します。前の兄弟ブロックレベル要素ボックスの float 値が none の場合、そのボックスはその下に float になります。後ろにある他の通常の兄弟ブロックレベル要素ボックスは、浮動要素のボックスサイズを無視しますが、float が残っている場合、子孫を含む後続要素のすべてのインライン要素は、先頭の最初の浮動要素ボックスの隣にラップされます。 、フロートが右の場合はボックスの左側にあります。方向属性の値が異なるとルールが変わります。
単純なフロートハックは、フローティングボックスの高さを無視する元の親ボックスの問題を解決します:
.clearfix {
overflow: auto;
zoom: 1;
}
CSS Positioned Layout Module
このモジュールには、配置要素とオーバーレイ要素のための CSS レベル 3 機能が含まれています。
CSS Positioned Layout Module の最新ドラフトの用語定義はまだ古いですが、CSS 基本ボックス モデルに依存していますが、CSS 基本ボックス モデルの新しいドラフトの関連用語定義はまだ使用されていません。 CSS 基本ボックス モデルの新しいドラフトでは、「位置」を「静的」でも「相対」でもないと定義し、新しいフローを生成します。そして、フローはコンテキスト用語の書式設定とは何の関係もありません。
このモジュールでは、ドキュメント構造内の順序に関係なく、要素ツリー内の要素の位置を配置する方法について説明します。 (つまり、「ストリーム」から取り出されます)
包含ブロック
CSS では、多くのワイヤーフレーム boxex の位置とサイズは、包含ブロックと呼ばれる長方形のボックスの端を基準にして計算されます。一般的なケースでは、結果として得られるボックスは、そのボックスに含まれるサブボックスの境界領域です。ボックスは、その含まれるサブボックスの境界領域を「確立」すると言います。 「ボックスの境界領域」という表現は、ボックスによって生成される境界領域ではなく、「ボックスが境界領域内に存在する」という意味です。
各ボックスはその境界領域に相対して配置されますが、境界領域に囲まれていないため、オーバーフローする可能性があります。言い換えれば、囲み領域は基準座標系のみを提供します。
ルート要素の最上位ボックスの境界領域は、ビューウィンドウのサイズの長方形です。この境界領域は、初期包含ブロックと呼ばれます。ルート要素の包含ブロックは、 の境界領域です。ルート要素。
要素のワイヤーフレーム ボックスの位置とサイズは、多くの場合、要素の境界領域と呼ばれる特定の四角形を基準にして計算されます。
要素ボックスの位置プロパティ。デフォルト値は静的で、上、右、下、左、および z-index プロパティは無効です。
要素ボックスのposition属性値が相対値の場合、ボックスの空間は保持されます。ボックスの位置座標を設定する場合、元の包含ブロックの左上隅を原点とする座標系が使用されます。
要素ボックスの位置属性値が絶対値である場合、新しいフローが生成されます。これは、ボックス座標を設定するときに、位置属性が静的ではない祖先ボックスの包含ブロックに影響を与えなくなります。そのような祖先ボックスがない場合、座標系の座標系は、ルート ボックスを含むブロックの左上隅を原点として使用されます。
要素ボックスのposition属性値が固定されると、新しいフローが生成され、元のフロー内のボックスのレイアウトは影響を受けなくなります。ボックスの座標を設定する際には、ウィンドウの左上隅を基準とした座標系が設定されます。スクロール バーを無視して原点が使用されます。これを含むブロックはビューポートです。
要素ボックスの位置属性値がスティッキーの場合、臨界点スティッキー オフセット設定を通じてボックスの位置を相対または固定に切り替えます。
要素ボックスのposition属性値が静的でない場合、ボックスが重なる可能性があります。このとき、z-index属性を設定して、大きい方が上になるようにZ軸の順序を調整できます。
補足説明:
ルート要素から親要素までの高さまたは幅が 100% の場合、現在の要素の位置属性の値は、top:0px または left:0px になります。 ; right:0px、高さまたは幅の効果を 100% 実現できます。他の固定幅および固定高さの要素と併用すると、position 属性を変更することで残りのスペースを自動的に埋めることができ、FlexBox と同様の柔軟な組版を実現できます。 CSS 複数列レイアウト モジュール
複数列要素は、'column-width' または 'column-count' 属性値が 'auto' ではない要素を指し、したがって複数列レイアウトのコンテナとして機能します。
従来の CSS ワイヤーフレーム モデル CSS ボックス モデルでは、要素コンテンツは要素コンテンツ ワイヤーフレーム ボックスに直接属します。複数列レイアウトでは、コンテンツ ボックスとコンテンツの間に列ボックスと呼ばれる新しいタイプのコンテナが導入されます。複数列要素のコンテンツは、それに属する列ボックスです。 (これは、CSS 表示モジュールの仕様に記載されている匿名ボックスである必要があります)。
複数列要素では、列ワイヤーフレームの列ボックスが行に配置されます。表のセルと同様に、列ボックスは行内の複数の列要素にわたって水平方向に並べられます。列の幅は、水平線内の列ボックスの長さです。列の高さは、垂直線内の列ボックスの長さです。行内のすべての列ボックスの幅と高さは同じです。つまり、水平線を同じ長さのセグメントに分割します。複数列要素の各行内で、隣接する列ボックスは列ギャップによって分離されており、列境界を持つ場合もあります。それらが同じ行にある場合、すべてのギャップは等しく、すべての列境界も等しくなります。列の境界は 2 つのコンテンツ列の間にのみ表示されます。
最も単純なケースでは、複数列要素には 1 列あたり 1 行のみが含まれ、各列の高さの値は、複数列要素のコンテンツ ワイヤーフレーム ボックスの高さの値と等しくなります。複数列要素がページにまたがる場合、各行の高さはページによって制限され、構造的に連続したコンテンツがページにまたがると、他のページの一部が新しい行の新しい列ボックスに属します。列ボックスは異なるページに分割されません。
複数列要素内の要素の columns-span 属性が none の場合、spanning 要素が複数の列要素を分割する場合にも同じ結果が発生します。column-span 属性が all の場合は、通常の列分割ルールが適用されます。列ボックスの新しい行が作成されます。
列ボックスの属性値を設定することはできません。たとえば、列ボックスの背景、パディング、マージン、境界線の属性を設定することはできません。将来的にサポートされる可能性があります。 。 。
列ボックスは、コンテンツを含むブロックとして機能します。つまり、列ボックスは、CSS21 仕様のブロック レベルのテーブル セルおよびインライン ブロック ボックスのように動作します。ただし、列ボックスは、それらが属する複数列要素の位置指定プロパティ「position:fixed」または「position:absolute」を囲むブロックを作成しません。
列ボックスのコンテンツのスタイル値は、列ボックスに基づいて計算されます。
「columns」属性は、「column-width」属性と「column-count」属性を設定するために使用される短縮属性です。
列ボックスの実際の幅は、設定された column-width 属性値とは異なる場合があります。列要素の幅の値は設定値より大きくなったり小さくなったりする可能性があり、要素が列幅に従って均等に分割されている場合、要素の幅より小さい場合は値が影響を受けます。要素の幅よりも大きい場合は、最終的に、実際の列幅に列数を乗算し、列ギャップの幅を加えた値が要素の幅に等しくなります。
複数列要素の列間には、列間隔のギャップと境界ルールが存在します。その長さは柱の長さと同じであり、垂直方向の長さ、つまり高さが等しいことを意味します。列の間隔がスペースを占めます。つまり、列間隔により、同じ複数列要素内の隣接する列のコンテンツが押し出されます。
列境界は列間隔の中央に描画され、終点は要素の上端と下端にあります。列の境界はスペースをとりません。つまり、列境界の存在はレイアウト関連の属性値に影響を与えません。線の幅が間隔を超えると、列ボックスに重なって表示されたり、ボックス全体を超えてはみ出したりすることがあります。境界線は要素の背景のすぐ上にあります。 z-index 属性値を使用して、複数列要素の子孫をその上に積み重ねることができます。線はコンテンツを含む 2 つの列の間にのみ描画されます。
複数列要素の子孫要素には、デフォルトのコンテンツ分割ルールを変更できる多くの属性があります。たとえば、ブレーク、カラムスパンなどです。
複数列要素の子孫要素の列スパン属性値が all の場合、排他的な行を占有して独自の列を形成でき、列幅は複数列要素の幅になります。
列幅を超える連続文字は列に分割できませんのでご注意ください。 CSS フレキシブル ボックス レイアウト モジュール
柔軟なワイヤーフレーム レイアウト
CSS 2.1 は 4 つのレイアウト モードを定義しています。これは、兄弟の先祖ワイヤーフレーム ボックスとの関係に基づいて、ワイヤーフレーム ボックスのサイズと位置を決定するルール システムです。
1 ブロック レイアウトブロック レイアウト、ドキュメントを整理するように設計されています
2 インライン レイアウト インライン レイアウト、テキストを整理するように設計されています
3 テーブル レイアウト テーブル レイアウト、表形式でデータを整理するように設計されています
4 配置レイアウト 配置レイアウト、デザイン他の要素についてあまり考えずにドキュメントを作成できます
このモジュールでは、より複雑なアプリケーションやページ向けに設計された新しい植字モード、フレックス レイアウトが導入されています。
フレックス レイアウトは、表面上はブロック レイアウトと似ています。フロートや複数列など、ブロック レイアウトで使用される、より複雑なテキストまたはドキュメント中心の機能の多くが欠けています。
その代わりに、複雑な Web アプリケーションやページでしばしば必要とされる、コンテンツを空間的に分散して位置合わせするための純粋で強力な手段が得られます。
フレックスコンテナのコンテンツ:
コンテンツは任意のフロー方向(左、右、下、さらには上!)に配置できます
コンテンツの表示順序は、スタイルレイヤーまたは並べ替えで反転できます(つまり、 、表示されるコンテンツの順序は、ソース コードまたはオーディオ ストリームの順序とは無関係です)
コンテンツは、単一の主軸に沿って配置することも、複数の行にラップして主軸と交差する副軸に沿って配置することもできます
利用可能なスペースの変化に応じて、コンテンツのサイズを拡大または縮小できます
コンテンツは、そのコンテナに対して位置合わせすることも、互いの二次軸に対して位置合わせすることもできます
コンテンツは、保持したまま主軸に沿って折りたたんだり展開したりできますコンテナの 2 次軸の長さ
フレックス レイアウト ボックス モデルと用語 フレキシブル レイアウト ワイヤーフレーム モードと用語
フレックス コンテナーは要素によって生成されるワイヤーフレームであり、その dsplay 属性値は flex または inline-flex です。フレックス コンテナのフローの子はフレックス アイテムと呼ばれ、そのレイアウトにはフレックス レイアウト モードが使用されます。
ブロックおよびインラインのフロー方向に基づいて植字値を計算するブロックおよびインライン植字とは異なり、ストレッチ植字はストレッチの方向に基づいています。フレックス タイポグラフィに関する議論をわかりやすくするために、このセクションでは、フレックス フローに関連する一連のフレックス フロー関連用語を定義します。 flex-flow プロパティの値と書き方によって、これらの用語が物理的な方向 (上/右/下/左)、軸 (垂直/水平)、および寸法にどのようにマッピングされるかが決まります。
二次元空間
主軸 第一次元軸
主次元 第一次元
フレックスコンテナの第一次元軸は、フレックス項目のレイアウトに使用される主な座標軸です。それは一次元に広がります。
main-start 1次元の開始
main-end 1次元の終了
このようにコンテナ内にFlexアイテムが1次元の開始側から終了側まで配置されます。
メイン サイズ 第一次元の長さ
メイン サイズ プロパティ 第一次元の長さプロパティ
伸縮アイテムの幅または高さのどちらか第一次元にあるものが、アイテムの第一次元の長さになります。アイテムの最初の次元の長さ属性は、アイテムの幅または高さの属性のうち、最初の次元にある方です。
交差軸 2 次元の軸 (1 次元の軸と交差する)
交差次元 2 次元
1 次元の軸に垂直なこの軸を 2 次元軸と呼びます。それは二次元にも広がります。
cross-start 2次元の開始
cross-end 2次元の終了
このようにフレックス項目で埋められたフレックス行が、2次元の開始側から終了側までコンテナ内に配置されます。
クロスサイズ 2 次元の長さ
クロスサイズプロパティ 2 次元の長さプロパティ
伸縮アイテムの幅または高さの 2 次元にある方が、アイテムの 2 次元の長さになります。アイテムの 2 番目の次元の長さ属性は、アイテムの幅または高さの属性のうち、2 番目の次元にある方の属性です。
要素の表示属性値が flex の場合、ブロックレベルの格納式コンテナボックスが生成されます。
要素の表示属性値が inline-flex の場合、インラインレベルのフレックス コンテナ ボックスが生成されます。
格納式ボックス内のフローティングボックスは無効であり、格納式ボックスの余白はそのコンテンツの余白と一緒に折りたたまれません。ブロック コンテナーと同様、フレックス コンテナー ボックスは、コンテンツ ボックスを囲む領域です。オーバーフロー属性はスケーラブルなコンテナにも適用されます。複数列関連属性は無効、浮動関連属性 float および Clear は無効、vertical-align 属性は無効、::first-line および ::first-letter 擬似要素は無効、
大まかに言えば、フレックス コンテナのフレックス アイテムは、フローの内容を表すワイヤーフレームです。フレックス コンテナ フローの各子はフレックス アイテムになります。子要素にネストされたテキストがない場合は、匿名のワイヤーフレームが自動的に作成され、テキストが匿名のフレックス アイテムとしてラップされます。匿名ワイヤフレームはスタイルを独立して適用できず、親要素のスタイルのみを継承できます。
フレックス コンテナーとそのフレックス アイテムのボックスは、フレックス レベル ボックスとも呼ばれます。ブロックレベルのボックスとは何の関係もありません。
隣接するフレックス項目のマージンは折りたたまれません。フレックス項目の order 属性は、すべてのフレックス項目間の表示順序を設定でき、z-index 属性は自動的に有効になります。デフォルト値は auto です。
スケーラブルなアイテムの可視性属性は、UA ごとに異なる方法で折りたたまれるように設定されます。表示:非表示と同じように見えます。非表示でもプレースホルダーを保持するものと、非表示でもプレースホルダーを保持しないものもあります。
表示順序: order プロパティ
並べ替えとアクセシビリティ
デフォルトでは、フレックス項目の表示順序はドキュメント構造内のコンテンツの順序と同じです。順序は order プロパティを通じて変更できます。小さい値が最初に来て、負の数値も使用できます。
CSS は、文書構造を整理するときに、スタイルを考慮するのではなく、意味論とセマンティクスを最初に優先する必要があることを繰り返し強調してきました。特定の表示では、CSS を使用してさまざまなレイアウトやセマンティック構造を実現できます。 CSS は通常、ドキュメントのセマンティック構造を変更しません。コンテンツに対応するボックスを作成し、そのボックスを使用してコンテンツを再レイアウトします。
フレックス ライン
フレックス コンテナ内のフレックス アイテムのレイアウトは、コンテナがグループに揃えられた組版を使用していると仮定して、行 (水平または垂直) を並べてフレックス行 (水平または垂直) に配置します。アルゴリズム。フレックス コンテナは、flex-wrap 属性値に応じて、単一行または複数行にすることができます。
flex-wrap: nowrap などの単一行のフレックス コンテナは、次の場合でも、その内容が 1 行にレイアウトされます。それは溢れます。
flex-wrap:wrap や flex-wrap:wrap-reverse などの複数行のフレックスコンテナでは、その内容は複数の行に分割されます。1 行がいっぱいになると、余分な内容は新しい行に分割されます。追加された行が作成されると、それらは flex-wrap プロパティ値に従って交差軸に沿って積み重ねられます。フレックス コンテナーが空でない限り、行ごとに少なくとも 1 つのフレックス項目が必要です。
Flexibility フレックス タイポグラフィの特徴は、フレックス項目を拡大および縮小できることです。最初の寸法の幅または高さを変更して、利用可能なスペースを埋めます。これは flex プロパティを使用して行われます。フレックス コンテナーは、フレックス アイテムに空きスペースを割り当ててコンテナーを埋めます。残りのスペースに対するフレックス拡張率に従って拡張するか、スペースをオーバーフローさせるためにフレックス縮小率に従って縮小します。
flex-grow と flex-shrink の値が 0 の場合、スケーラブル項目はスケーラビリティ機能を持ちません。値が 0 でない場合にのみスケーラブルになります。
flex 属性は、ストレッチ関連の属性の短縮形属性です: flex-grow、flex-shrink、flex-basis など、ストレッチの長さを計算するための属性値を指定することもできます。ボックスがフレックス項目である場合、ボックスの最初の寸法を決定するためにメインのサイズプロパティの代わりにフレックスプロパティが使用されます。 box が flex アイテムではない場合、flex プロパティは効果がありません。
flex-grow の値は、割り当てる空き領域があると判断された場合に、同じコンテナ内の他の flex アイテムと比較して flex アイテムがどのように拡張されるかを指定する数値です。 flex プロパティで指定しない場合、デフォルト値は 1 です。負の値は無効です。
flex-shrink の値は、フレックスの収縮係数を指定する数値です。これは、空き領域を割り当てるのに十分でない場合に、同じコンテナ内の他のフレックス項目と比較してフレックス項目の長さがどのように縮小するかを決定します。 flex プロパティで指定しない場合、デフォルト値は 1 です。負の値は無効です。注: 限られたスペースを割り当てる場合は、収縮率にフレックス項目の長さを乗算する必要があります。パーセンテージで縮小する方法を決定します。たとえば、非常に長いアイテムが大幅に縮小するまでは、短いアイテムは 0 に縮小されません。
flex-basis は、フレックス項目の初期長さを取得するために使用されるルールを指定するキーワードまたは数値であり、フレックス係数を使用した操作で使用されます。
フレックス ベースの値が auto の場合、フレックス ベースのフレックス アイテムのメイン サイズ属性の値を取得します。
flex-basis 値が content の場合、flex 項目の内容に基づいて長さが自動的に計算されることを示します。注: このキーワードは新しく追加されたものであり、一部の古いパーサーではサポートされていない可能性があります。これは、flex-basis 値が auto で、メイン サイズが auto の場合と同等です。
他の値には、フレックス項目の幅または高さと同じルールがあります。
flex 属性で指定されていない場合、デフォルト値は 0 です。
flex 属性の flex-grow、flex-shrink、flex-basis のデフォルト値は、独立した場合の flex-grow、flex-shrink、flex-basis のデフォルト値と異なります。
一般的に使用される flex 属性の設定:
flex:Initial; flex:0 1 auto と同等です。これはデフォルト値です。幅または高さのプロパティに基づいてフレックス項目の長さを決定します。項目のメイン サイズ プロパティが auto と評価される場合、項目の長さはその内容に基づいて計算されます。スペースが十分にある場合、項目の長さは固定されます。十分なスペースがない場合、アイテムの長さは縮みます。
flex: auto; flex: 1 1 auto と同等; 幅または高さのプロパティに基づいてフレックス項目の長さを決定します。アイテムの長さは、コンテナーの最初の次元の長さに基づいて、最初の次元の軸に沿って 1 倍に自動的に長くまたは短くなります。 flex: auto、flex:initial、または flex: none を持つ項目が複数ある場合、flex: auto を持つ項目には適応可能な残りのスペースがあります。
flex: none; flex: 0 0 auto と同等; 幅または高さのプロパティに基づいてフレックス項目の長さを決定します。スケーリングできないため、コンテンツがコンテナからオーバーフローする可能性があります。
flex: は flex: 1 0; と同等です。フレックス項目は拡張可能であり、基本数値は 0 です。要素の割合に基づいてスペースを割り当てます。すべての項目がこのプロパティで構成されている場合、指定された係数のパーセンテージとしてスペースが割り当てられます。
デフォルトでは、フレックス項目をコンテンツの長さよりも短くすることはできません。コンテンツの最小長は、最長の単語または固定長要素によって決まります。これは、min-width または min-height プロパティを介して変更できます。
値を指定しないプロパティ コンポーネントには共通のデフォルト値が提供されるため、仕様では作成者が短縮プロパティを使用することを推奨しています。
Alignment flex または inline-flex の表示属性値でスケーラブル コンテナの flex-flow 属性、コンテンツの order 属性値と flex 属性の設定を完了し、方向、並べ替え、および長さの計算ルールを決定した後スケーラブルなコンテナの位置合わせと調整を開始できます。
スケーラブルなアイテムの配置調整は、マージン属性と CSS ボックス配置タイプ属性によって行われます。
マージン値が auto のスケーラブル項目のパフォーマンスは、ブロック フロー内のマージン値が auto のボックスと同様です:
フレックス基準値とフレックス長を計算する場合、自動マージンは「 0」。
「justify-content」と「align-self」を使用して分布の配置を制御する前に、対応するディメンション内のすべての正の空きスペースが自動マージンに割り当てられます。
オーバーフローしたボックスは自動マージンを無視し、対応する寸法の終了方向にオーバーフローします。
注: 空きスペースが自動マージンに割り当てられている場合、スケーリング後にマージンがすべての利用可能なスペースを奪うため、位置合わせ関連のプロパティはこの次元では影響しません。
軸の配置: justify-content プロパティ
justify-content プロパティは、行内のすべてのフレックス項目の位置をコンテナの行の 1 次元軸に沿って配置します。このプロパティは、フレックスの長さとすべての自動マージン計算が解決されるまで有効になりません。行内のすべてのスケーラブル項目がスケーラブルではない場合、または最大まで拡張された後に余分な空き領域が残っている場合、この属性を使用して割り当て方法を決定します。項目がオーバーフローした場合でも、このプロパティは引き続き有効です。justify-content: flex-start; 行内の flex 項目は行の先頭に向かって配置されます。最初の次元の行の最初の項目の開始外端は、最初の次元の行の開始外端と完全に同一平面上にあり、その後の項目が順番に前の項目に続き、次の項目の開始端が続きます。最初の次元の行の外側の開始エッジと位置合わせされ、前の項目の終了エッジは完全に面一になります。
justify-content: flex-end の反対。行の最後の項目の終了エッジは、行の終了エッジと完全に面一になります。その前の項目が次の項目の後に続きます。前の項目の終了エッジは、次の項目の開始エッジと完全に面一になります。 。
justify-content: center; 行内の flex 項目は行の中央に近くなります。行内のすべての flex アイテムは互いに完全に同一平面上にあり、行の中央に位置合わせされます。行の開始端と最初の項目の開始端の間のスペースは、終了間のスペースの長さに等しくなります。行の端と最後 項目の終端間のスペースの長さが等しい。残りの空き領域が負の場合、反対方向の両方の項目の全体的なオーバーフロー領域は等しくなります。
justify-content: space-between;
残りの空き領域が負の場合、または行に項目が 1 つしかない場合、この状況は justify-content: flex-start; と同じように動作します。
他の場合は、すべての flex アイテムが行内に均等に配置され、行の最初のアイテムの開始エッジが行の最後のアイテムの終了エッジと完全に同一平面になります。残りの項目を行の残りの空きスペースに均等に配置し、2 つの項目の対向する端の間のスペースの長さが等しくなるようにします。
justify-content: space-around;
残りの空き領域が負の場合、または行に項目が 1 つしかない場合、この状況は justify-content: center; と同じように動作します。
それ以外の場合、行内のフレックス項目は行内に均等に分散され、行内の 2 つの項目の反対側の端の間のスペースの長さは等しく、最初の項目の開始端と最初の項目の間のスペースは等しくなります。コンテナの開始エッジ 最後のアイテムの終了エッジからコンテナの終了エッジまでのスペースの長さと長さは、2 つのアイテムの反対側のエッジ間のスペースの長さの半分です。
軸を越えた位置合わせ: align-items プロパティと align-self プロパティ
ストレッチアイテムは、それが属するコンテナーの行の 2 次元軸上に配置できます。全体としては、justify-content と似ていますが、行の端に垂直に配置されます。
align-items は、匿名フレックス項目を含むフレックスコンテナ内のすべての項目のデフォルトの配置を設定します。
align-self を使用すると、個々のフレックス項目のデフォルトの配置をオーバーライドできます。
匿名フレックス項目の場合、その align-self は、それが属するコンテナーの align-items 値と常に同じです。
flex 項目の 2 番目の次元の margin 属性値が auto の場合、align-self は無効になります。
「align-self」の値が「auto」の場合、その計算値は要素の親要素の「align-items」値になります。要素に親要素がない場合、その計算値は「stretch」になります。
位置合わせ属性値は次のように定義されます:
flex-start
2 番目の次元のインライン フレックス項目の開始外側エッジは、2 番目の次元の行の開始外側エッジと完全に面一になります。
2 番目の次元のフレックスエンド インライン フレックス項目の最後の外側エッジは、2 番目の次元の行の最後の外側エッジと完全に同一平面上に配置されます。
center は、2 次元のインライン伸縮項目の中央を 2 次元の行の中央に直線上に揃えます。 2 番目の次元の行の長さが 2 番目の次元の項目の長さより短い場合、項目はオーバーフローし、2 つの反対方向のオーバーフロー スペースは等しくなります。
ベースライン インライン テレスコピック アイテムはベースラインに従って位置合わせされ、ベースラインから 2 次元のアイテムの開始外側エッジまでの最大長のアイテムを計算し、2 次元のその開始外側エッジを2 次元でのラインの開始外側エッジ 外側エッジが互いに面一になるように開始します。インライン項目の外端からベースラインまでの長さが同じであれば、flex-startと同じように見えます。
stretch
フレックス項目のクロスサイズ属性値が自動として計算され、2 番目の次元の軸のマージンが自動ではない場合、2 番目の次元の項目の長さが引き伸ばされます。
この値を使用すると、min-height/min-width/max-height/ を受け入れながら、2 番目の次元の行の項目の長さが 2 番目の次元の行の長さにできるだけ近くなります。 max-width 属性値 プロジェクトの長さの制限。
コンテナで特定の高さを指定すると、スケーラブル プロジェクトのコンテンツがオーバーフローする可能性があることに注意してください。
フレックスラインのパッキング: align-content プロパティ
align-content プロパティは justify-content プロパティと似ています。 justify-content属性と同じ値を持つ値は翻訳しません。後述の補足説明を参照してください。
この属性は単一行のフレックスコンテナでは無効であることに注意してください。
align-content:stretch;
複数行のボックスは残りのスペースを占めます。残りの空き領域が負の場合、フレックススタートと同様に動作します。
他のケースでは、空き領域がすべての行に均等に分割され、2 番目の次元の各行の長さが増加します。
フレックスコンテナベースライン
フレックスコンテナ自体がベースライン調整に参加します。たとえば、フレックス コンテナ自体が外側のフレックス コンテナのフレックス アイテムである場合です。そのコンテンツを最もよく表すベースラインの場所を送信する必要があります。
最初/最後のメイン軸ベースライン セット
フレックス コンテナの最初または最後の行にあるフレックス項目がベースライン調整に参加している場合、フレックス コンテナの最初または最後のメイン軸ベースライン セットは共有フレックスから生成されます。アイテム。このケースは、コンテナ設定 align-items:baseline;
に対応します。他のケースでは、フレックス コンテナに少なくとも 1 つの項目があり、その最初または最後の項目にコンテナの主軸に平行なベースラインがある場合、最初または最後の項目がこのコンテナの項目 最終的なスピンドル ベースライン設定は、その位置合わせベースラインから生成されます。このケースは、コンテナ内の特定のアイテムのalignment-self:baseline設定に対応します
他のケースでは、コンテナの最初または最後の主軸ベースライン設定は、最初または最後のアイテムコンテンツボックスから合成されるか、直接合成されます。コンテナコンテンツボックスから。この場合、対応するコンテナーもプロジェクトも align-items:baseline と align-self:baseline; を設定していません。
正式翻訳版 https://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans
A Complete Guide to Flexbox
A Complete Guide to Flexbox
補足説明:
フレックスフローについては、フレックス写植の基礎です。
最初にwriting-modeの値がhorizontal-tbかvertical-rlか、そしてflex-directionの値がrowかcolumnかを決定します。これが決定された場合にのみ、後続のすべての用語が明確な意味を持つことができます。 Main は 2 次元空間のどの次元、主軸は XY 軸のどの軸、リバースはどの方向、線が水平か垂直かなどを示します。
最初の主要カテゴリ:writing-mode:horizontal-tb;
最初の主要カテゴリの最初のサブカテゴリ:
最初の属性設定もデフォルトの flex-direction:rowp:nowrap; flex-flow: row nowrap;
主軸は XY 座標系の X 軸として理解でき、フレックス項目の幅は X 軸上の長さです。スケーラブルな項目は、X 軸の原点から正の方向に、つまり主軸に沿って左から右に配置されます。
交差軸はXY座標系のY軸として理解でき、伸縮アイテムの高さはY軸上の長さです。
原点は、スケーラブルなコンテナ ボックスの左上隅です。コンテナボックスは、XY 座標系の第 4 象限として理解できます。 2 番目の属性設定、flex-direction: row; flex-wrap: Wrap;
main axis は、XY 座標系の X 軸、およびスケーラブルなアイテムの幅として理解できます。 X 軸上の位置の長さです。スケーラブルな項目は、X 軸の原点から正の方向に、つまり主軸に沿って左から右に配置されます。
交差軸は、XY 座標系の Y 軸として理解できます。伸縮アイテムの高さは、Y 軸上の長さです。フレックス項目が改行をトリガーすると、フレックス ラインは Y 軸の原点から負の方向に向かって、つまり交差軸に沿って上から下に配置されます。
原点は、スケーラブルなコンテナ ボックスの左上隅です。コンテナボックスは、XY 座標系の第 4 象限として理解できます。 3 番目の属性設定、flex-direction: row; flex-wrap: Wrap-reverse; または省略形の flex-flow: row Wrap-reverse; は、XY 座標系の X 軸として理解できます。スケーラブルな項目の幅は、X 軸上のその長さになります。スケーラブルな項目は、X 軸の原点から正の方向に、つまり主軸に沿って左から右に配置されます。
交差軸は、XY 座標系の Y 軸として理解できます。伸縮アイテムの高さは、Y 軸上の長さです。フレックス項目が改行をトリガーすると、フレックス ラインは Y 軸の原点から正の方向に、つまり交差軸に沿って下から上に配置されます。
原点は、スケーラブルなコンテナ ボックスの左下隅です。コンテナボックスは、XY 座標系の第 1 象限として理解できます。 4 番目の属性設定、flex-direction: row-reverse; flex-wrap: nowrap; または短縮形 flex-flow: row-reverse nowrap; は、XY 座標系の X 軸として理解できます。スケーラブルな項目の幅は、X 軸上のその長さになります。スケーラブルなアイテムは、X 軸の原点から負の方向、つまり主軸に沿って右から左に配置されます。
交差軸は、XY 座標系の Y 軸として理解できます。伸縮アイテムの高さは、Y 軸上の長さです。
原点は、スケーラブルなコンテナ ボックスの右上隅です。コンテナボックスは、XY 座標系の第 3 象限として理解できます。 5 番目の属性設定、flex-direction: row-reverse; flex-wrap: Wrap; または短縮形 flex-flow: row-reverse Wrap; は、XY 座標系の X 軸として理解できます。スケーラブルな項目の幅は、X 軸上のその長さになります。スケーラブルなアイテムは、X 軸の原点から負の方向、つまり主軸に沿って右から左に配置されます。
交差軸は、XY 座標系の Y 軸として理解できます。伸縮アイテムの高さは、Y 軸上の長さです。フレックス項目が改行をトリガーすると、フレックス ラインは Y 軸の原点から負の方向に向かって、つまり交差軸に沿って上から下に配置されます。
原点は、スケーラブルなコンテナ ボックスの右上隅です。コンテナボックスは、XY 座標系の第 3 象限として理解できます。 6 番目の属性設定、flex-direction: row-reverse; flex-wrap: Wrap-reverse; または省略形の flex-flow: row-reverse Wrap-reverse; は、XY 座標の X 軸として理解できます。システム、拡張と縮小 項目の幅は、X 軸上の長さです。スケーラブルなアイテムは、X 軸の原点から負の方向、つまり主軸に沿って右から左に配置されます。
交差軸は、XY 座標系の Y 軸として理解できます。伸縮アイテムの高さは、Y 軸上の長さです。フレックス項目が改行をトリガーすると、フレックス ラインは Y 軸の原点から正の方向に、つまり交差軸に沿って下から上に配置されます。
原点は、スケーラブルなコンテナ ボックスの右下隅です。コンテナボックスは、XY 座標系の第 2 象限として理解できます。
最初のカテゴリの 2 番目のサブカテゴリ:
最初の属性設定、flex-direction: column; flex-wrap: nowrap;
2 番目の属性設定、flex-direction: column;
3 番目の属性設定、flex-direction: column; flex-wrap: Wrap-reverse;
4 番目の属性設定、flex-direction: column-reverse;
5 番目の属性設定、flex -direction: column-reverse; flex-wrap: Wrap;
6 番目の属性設定、flex-direction: column-reverse; flex-wrap: Wrap-reverse;
と前の 6 つのタイプ 1 対 1対応していますが、主軸が X 軸から Y 軸に変化し、交差軸が Y 軸から X 軸に変化する点が異なります。 Row は、行または水平行である inline に対応します。列は、列または縦の行であるブロックに対応します。
2 番目の主要カテゴリの writing-mode:vertical-rl; のプロパティ構成については詳しく説明しません。初期の属性構成は、第 1 の主要カテゴリと第 2 のサブカテゴリの 3 番目の構成のパフォーマンスに似ています。
フレックス属性について
ボックスをフレックスできるかどうか、および長さを変更する方法を決定します。 flex: flex: 0 1 auto; のデフォルト値から、十分なスペースがある場合にそのデフォルト値が狭い画面に適応し、スペースがない場合にのみ Flex 機能がトリガーされることがわかります。十分なスペース。分散と配置については、
justify-content は、文字通りの意味からわかるように、行のスペースに対して行の内容がどのように配置されるかを強調し、行のどちら側または中央が決定されるかに基づいています。全体のサイズ、方向の後に、それらの相対的な位置間隔を配分する方法。
Align-content には justify-content と同じルールがありますが、コンテナ内のすべての行の分散に影響します。 justify-content が行ボックスを基準とした場合、行内でのアイテム ボックスの位置を割り当てる方法、次に align-content がコンテナ ボックスを基準にし、行ボックスの位置を割り当てる方法です。 1行のみの場合は無効となりますのでご注意ください。
align-items と align-self。項目がどのように配置されるか、および項目の行が行の行にどのように配置されるかを強調します。 align-items はコンテナの属性であり、行内のすべての項目に同時に影響します。 align-self は項目の属性で、単一の項目自体に影響します。
仕様書ではラインという用語が広く使用されていますが、主軸と交差軸によって表される 2 次元空間の次元は交換可能であることに注意する必要があります。つまり、2 次元空間の次元は次のとおりです。メインディメンションとして指定できるため、行は水平または垂直になります。中国語の単語を 1 つ使って理解すると、行と列を意味します。
HTML5 仕様における要素スタイルのレンダリングの説明。
UA は、HTML ドキュメントを特定の方法でレンダリングする必要はありません。
CSS タイポグラフィ ワイヤーフレーム、SVG タイポグラフィ ワイヤーフレーム、またはその他の同様のスタイル言語が関連付けられている場合、要素はレンダリングされます。
要素が画面外にあるからといって、その要素がレンダリングされないわけではありません。要素の表示属性が表示されないように、スタイル シートを書き換えることができます。
要素の表示はブロックまたはインラインである必要はなく、UA によって提供されるデフォルトのスタイルをオーバーライドできます。
W3C はデフォルトを強く推進しています。ブラウザのデフォルト スタイルと作成者スタイルが適用される前に、すべての要素のすべての CSS 宣言には仕様で定義されたデフォルト値があります。たとえば、すべての要素の表示属性のデフォルト値はインラインです。これは、仕様で定義されているデフォルト値であるためです。その後、ブラウザのスタイル シートは、ブロック レベル要素の表示属性を block に設定します。 Web 開発者は、スタイル シートを記述して、表示属性値を再度変更できます。
https://html.spec.whatwg.org/multipage/rendering.html
https://www.w3.org/TR/html5/rendering.html
http://www.quirksmode.org/ blog/archives/2015/09/a_new_device_ad.html仕様によって与えられるいくつかのデフォルトのスタイル提案
14.3.2 pagehtml, body { display: block }
14.3.3 フローコンテンツ
address, blockquote, center、div、Figure、figcaption、フッター、フォーム、ヘッダー、hr、
legend、listing、main、p、plaintext、pre、xmp {
display: block;
}
14.3.7 セクションと見出し
記事、脇、h1、h2、h3、h4、h5、h6、hgroup、nav、セクション {
display: block;
}
14.3.8 Listsdir、dd、dl、dt、menu、 ol, ul { 表示: ブロック; }
14.3.9 テーブル
テーブル { 表示: テーブル; }
colgroup、colgroup[hidden] { 表示: テーブル列-group; }
col,col[hidden] { 表示: テーブル列; }
thead, thead[hidden] { 表示: テーブルヘッダーグループ; }
tbody, tbody[hidden] { 表示: テーブル-row-group; }tfoot, tfoot[hidden] { 表示: テーブルフッターグループ; }
tr, tr[hidden] { 表示: テーブル行 }
td, th, td[hidden] , th[hidden] { display: table-cell; }
14.3.13 fieldset 要素と凡例要素
fieldset {
display: block;
}
css-tricks almanac
CSS年鑑