<address><article><aside><blockquote><body><dd><details><div><dl><dt><fieldset><figcaption><figure><footer><form><h1><header><hgroup><hr><html><legend><menuitem><nav><ol><optgroup><option><p><section><summary><ul>
<a><abbr><area><b><bdi><bdo><br><cite><code><del><dfn><em><i><ins><kbd><label><map><mark><output><pre><q><rp><rt><ruby><s><smap><small><span><strong><sub><sup><time><u><var><wbr>
表示属性の深い理解_html/css_WEB-ITnose
ディレクトリ [1]ブロック [2]インライン [3]インラインブロック [4]なし [5]リストアイテム [6]ランイン [7]テーブル [8]インラインテーブル [9]テーブル- cell [10]table-caption
前の言葉
display属性はWebページのレイアウトでは非常に一般的ですが、よく使われるのはblock、inline-block、inline、noneなどの少数の属性値だけです。この記事では、表示のさまざまな側面について詳しく説明します
定義
表示属性は、表示方法に影響を与える、要素によって生成されるボックスのタイプを指定するために使用されます
値: none | inline-block | | テーブル項目 | テーブル行グループ | テーブル行グループ | | table-caption | 継承
初期値: inline [ 1 ] 幅が設定されていない場合は 1 行いっぱいになります
[2] 1 行のみ
[3] 幅と高さをサポートします
【ラベル】 <address><article><aside><blockquote><body><dd><details><div><dl><dt><fieldset><figcaption><figure><footer><form><h1><header><hgroup><hr><html><legend><menuitem><nav><ol><optgroup><option><p><section><summary><ul>
ログイン後にコピー
<address><article><aside><blockquote><body><dd><details><div><dl><dt><fieldset><figcaption><figure><footer><form><h1><header><hgroup><hr><html><legend><menuitem><nav><ol><optgroup><option><p><section><summary><ul>
【注意】menuitemタグはfirefoxでのみサポートされています
【サポートされていないスタイル】
[1]vertical-align
inline
【特徴】
[ [1]コンテンツのスプレッド幅
[2]非排他行
[3]幅と高さをサポートしません [4]コードの改行はスペースに解析されます
【タグ】 <a><abbr><area><b><bdi><bdo><br><cite><code><del><dfn><em><i><ins><kbd><label><map><mark><output><pre class="brush:php;toolbar:false"><q><rp><rt><ruby><s><smap><small><span><strong><sub><sup><time><u><var><wbr>
ログイン後にコピー
<a><abbr><area><b><bdi><bdo><br><cite><code><del><dfn><em><i><ins><kbd><label><map><mark><output><pre class="brush:php;toolbar:false"><q><rp><rt><ruby><s><smap><small><span><strong><sub><sup><time><u><var><wbr>
【サポートされていないスタイル】
[1]background-position
[2]clear
[4]height | min-height[5]max-width | min-width
[6]overflow
[7]text-align
inline-block
【機能】
[1] 幅が設定されていない場合、コンテンツは幅を拡張します
[2] 非排他行
[3] 幅と高さをサポート
[4] コードの改行はスペースに解析されます
【タグ】
<audio><button><canvas><embed><iframe><img><input><keygen><meter><object><progress><select><textarea><video>
【サポートされていないスタイル】
[1 ]clear
[2]text-align
none
【機能】
要素の非表示とドキュメントフロー
【タグ】
<base><link><meta><title><datalist><dialog><param><script><source><style>
リストアイテム
【特徴】
[1] 幅が設定されていない場合、幅は1行で埋められます
[2] 専用ライン
[3] 幅と高さをサポート
ランイン
ランインはブロック要素とインライン要素の興味深い組み合わせ。これにより、特定のブロックレベル要素が次の要素のインライン部分になる可能性があります。要素がランイン ボックスを生成し、そのボックスの後にブロック レベル ボックスが続く場合、ランイン要素はブロック レベル ボックスの先頭のインライン ボックスになり、ランイン ボックスは次のようにフォーマットされます。別の要素内のインラインボックスですが、ドキュメント内の親要素から属性を継承します[注意] safari と IE8+ のみがサポートします
<h3 style="display:run-in">run-in test</h3><p>paragraph</p>
run-in ボックスの後にブロックが続かない場合レベルボックス、ランインボックス自体はブロックレベルボックスになります Box
<span style="display:run-in">run-in test</span><span>paragraph</span>
Table 要素
table{display: table;}thead{display: table-header-group;}tbody{display: table-row-group;}tfoot{display: table-footer-group;}tr{display: table-row;}td,th{display: table-cell;}col{display: table-column;}colgroup{display: table-column-group;}caption{display: table-caption;}table 要素の表示には次の種類があります。 tbody>
table の４つのタグに対応する表示属性を以下に紹介します。
[1] 幅が設定されていない場合、内容によって幅が引き伸ばされます
[2] 1行を占有します
[3] 幅と高さをサポートします
[4] デフォルトでテーブルの特性を持ち、とテーブルを設定できます - レイアウト、ボーダーコラプス、ボーダースペースなどのテーブル固有のプロパティ
inline-table
【機能】[1] 幅が設定されていない場合、幅はコンテンツによって引き伸ばされる
[2] 1行で非排他的
[3] 幅と高さをサポート [4] デフォルトでテーブル機能があり、table-layout、border-collapse、border-spacingを設定できますその他のテーブル固有の属性
table-cell
【機能】[1] 幅が設定されていない場合、幅はコンテンツによって拡張されます
一 [2]の非独占ライン
[3] ワイドハイ対応
[4] 縦並び [5] 同レベルのハイ
[特徴] [ 1] 幅が設定されていない場合は、内容によって幅が拡張されます
[2] 1行のみ
[3] 幅と高さをサポートします
注意事項
【1】要素が絶対的なものである場合位置指定要素の場合、 float の値は none に設定され、浮動要素または絶対位置指定要素の場合、計算値は宣言された値によって決まります
【2】ルート要素の場合、値が inline として宣言されている場合、 table または table の場合、計算値 table が取得されます。none として宣言した場合も同様です。計算値は none であり、その他の表示値はすべてブロックとして計算されます
🎜
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7564
15
1386
52
86
11
28
99
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
