ホームページ ウェブフロントエンド CSSチュートリアル 表示にはどのような値がありますか?

表示にはどのような値がありますか?

Nov 20, 2023 pm 05:28 PM
display

<p>表示の値には、block、inline、none、inline-block、flex、grid、table、inline-table、list-item が含まれます。詳細な紹介: 1. block: 要素をブロックレベルの要素にレンダリングします。ブロックレベルの要素はページ上のブロックを形成し、1 行だけを占有します。2. inline: 要素をインライン要素にレンダリングします。インライン要素は、それ自体では 1 行を占有せず、他の要素と並べることができます。3. none、この値は、要素がページ上にないことを指定します。

<p>表示にはどのような値がありますか?

<p>このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。

CSS では、display 属性は要素の表示タイプを決定するために使用されます。さまざまな値を持つことができますが、主な display 属性値をいくつか示します:

<p>1. block: 要素をブロック レベルの要素としてレンダリングします。ブロックレベルの要素はページ上でブロックを形成し、独自の行を占めます。たとえば、<div><p><h1>-<h6>&lt ;li> などはすべてデフォルトのブロックレベル要素です。

<p>2, inline: 要素をインライン要素としてレンダリングします。インライン要素はそれ自体で行を占有せず、他の要素と並べて配置できます。たとえば、<span><a> などはすべてデフォルトのインライン要素です。

<p>3、none: この値は、要素がページに表示されないことを指定します。 visibility: hidden とは異なります。visibility: hidden を使用する要素は引き続きページ領域を占有しますが、display: none を使用する要素はレイアウトから完全に削除されます。取り除く。

<p>4. inline-block: 要素をインラインのブロックレベル要素としてレンダリングします。インライン ブロック レベル要素の特徴は、インライン要素と同様に横に並んで配置されますが、幅と高さを設定でき、ブロック レベル要素と同様に独自の寸法を持つことができます。

<p>5. flex: 要素をフレキシブル ボックス モデルとしてレンダリングします。フレックスボックス モデルは、1 次元空間 (行または列) 内で空間をレイアウト、整列、および分散するための CSS レイアウト手法です。

<p>6, Grid: 要素をグリッド コンテナーとしてレンダリングします。グリッド コンテナーは、2 次元 (行と列) 内でスペースをレイアウト、整列、および分散します。

<p>7, table: 要素をテーブルにレンダリングします。この値は主に表形式のデータを表示するために使用されていましたが、最新の CSS テクノロジがより柔軟なレイアウト方法を提供しているため、現在では一般的に使用されていません。

<p>8. inline-table: 要素をインライン テーブルとしてレンダリングします。インライン テーブルはインライン ブロック レベル要素に似ていますが、セル間のマージンやパディングなどのテーブルの特性を備えています。

<p>9. list-item: 要素をリスト項目としてレンダリングします。この値を使用すると、要素はデフォルトの箇条書きまたは番号付きでリスト内の項目として表示されます。

上記の主要な display 属性値に加えて、run-incompact、# などの他の値もあります。 # #marker などですが、現代の Web 開発では、これらの値を使用することは一般的ではありません。ほとんどの場合、上記の主な値を使用すると、ほとんどのレイアウトのニーズが満たされます。

以上が表示にはどのような値がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

富士フイルム X-M5 の価格予想が上昇、自撮りディスプレイの流出で以前は手頃な価格だったカメララインが複雑化 富士フイルム X-M5 の価格予想が上昇、自撮りディスプレイの流出で以前は手頃な価格だったカメララインが複雑化 Sep 07, 2024 am 09:34 AM

富士フイルムのファンは最近、X-T50 の登場に非常に興奮していました。X-T50 は、1,000 ドル以下の APS-C カテゴリーで非常に人気となっていた低価格志向の富士フイルム X-T30 II の再発売を提示したからです。残念ながら、富士フイルム X-T50 の発売に伴い

比較: Apple Studio Display と Samsung Smart Monitor M8 比較: Apple Studio Display と Samsung Smart Monitor M8 May 11, 2023 pm 10:46 PM

Samsung Smart Display M8 と Apple Studio Display: デザインとサイズ 発売以来、Apple Studio Display は、比較的シンプルな L 字型スタンドに比較的薄いパネルを搭載した iMac と比較されてきました。これはよく知られ、愛されている美学であり、サムスンはプレゼンテーションにそれを借用したようです。 Samsung SmartMonitor M8 は、非常によく似たスタンド上の薄型スクリーンという同じアイデアを使用しています。左下隅の小さな部分が少し突き出ていることや、Samsungのあごが非常に薄いなど、いくつかの細かい要素が異なりますが、基本的なデザインの点では近いようです。サムスンは24インチiMacから多くのインスピレーションを得たようだ。 AppleのディスプレイはSamsungのものより小さい

Apple Studio Display の電源コードは取り外し可能ですが、特別な工具が必要です Apple Studio Display の電源コードは取り外し可能ですが、特別な工具が必要です May 17, 2023 pm 03:05 PM

Apple Studio Display は現在、店舗で正式に販売されており、世界中の多くのお客様が製品を購入しています。 ProDisplayXDR とは異なり、StudioDisplay には取り外しできないように見える独自の電源コネクタがあります。ケーブルは取り外し可能であることがわかりましたが、取り外すには特別なツールが必要です。 Apple は Web サイトで、Studio Display の電源コードは取り外し可能ではないと述べており、多くのユーザーもそう考えています。というのは、ケーブルを手で外すのは不可能に思えますが、幸いなことにケーブルはモニターから取り外すことができます。 , Appleは、新しいStudioDisplから情報を抽出するための特別なツールを持っています。

サムスン:E Ink テクノロジーをベースにした新しい大型ディスプレイは色を表示し、ワイヤレスで通信します サムスン:E Ink テクノロジーをベースにした新しい大型ディスプレイは色を表示し、ワイヤレスで通信します Jun 19, 2024 pm 03:37 PM

私たちは、電子書籍リーダーなど、電子インクを搭載したディスプレイをベースにしたデバイスについて頻繁にレポートしています。この技術には多くの利点があります。バックライトなしで明るい環境でも読み取ることができ、光がない状態でスイッチングするときのみ電力が必要です。

比較: Apple Studio ディスプレイと LG UltraFine 5K ディスプレイ: どちらが優れていますか? 比較: Apple Studio ディスプレイと LG UltraFine 5K ディスプレイ: どちらが優れていますか? Apr 16, 2023 pm 08:25 PM

StudioDisplay と LG UltraFine5KDisplay は市場で同様の地位を占めていますが、Apple のモニターの方が 300 ドル高価です。これらのモニターの比較について知っておくべきことはすべてここにあります。テクノロジーの世界では6年というのは長い期間であり、Appleが5,000ドル以下のブランドモニターを販売して以来の期間でもある。この間、Apple は LG と提携して、Mac ユーザーに特化した LG UltraFine シリーズを販売しました。 2019 年、Apple はこれらの LG モニターの販売を中止し、手頃な価格の Mac 対応ディスプレイである ProDisplayXDR を採用しました。

Boot Camp が Apple Studio Display をサポートするように更新されました Boot Camp が Apple Studio Display をサポートするように更新されました May 20, 2023 pm 11:34 PM

Mac 上で Windows を実行している IntelMac ユーザーは、Apple の StudioDisplay をサポートするために BootCamp でドライバーを更新できるようになりました。 Apple は BootCamp を定期的に更新して、新しいハードウェアのサポートや一般的な互換性とパフォーマンスの向上を導入しています。 3 月のソフトウェア アップデートで、Apple は BootCamp が新しい StudioDisplay と連携できるようにしました。 BootCamp をバージョン 6.1.17 にするアップデートでは、2 つの主要なサポート要素が導入されています。まず、StudioDisplay との互換性が追加され、

それが何を意味するのかを表示する それが何を意味するのかを表示する Oct 26, 2023 am 11:50 AM

ディスプレイとは通常、何らかの方法でデータ、情報、結果をユーザーに表示するか、画面やその他のデバイスに出力する操作または機能を指します。具体的な意味: 1. コマンド ライン インターフェイス (CLI) では、表示とは、ユーザーが表示または分析できるように、テキスト、テーブル、またはその他の形式でデータを端末ウィンドウに出力することを指す場合があります; 2. グラフィカル ユーザー インターフェイス (GUI) では、表示ユーザーの対話やブラウジングなどのために、アプリケーション ウィンドウまたはインターフェイス上に画像、テキスト、グラフ、その他のコンテンツを表示することを指す場合があります。

表示にはどのような値がありますか? 表示にはどのような値がありますか? Nov 20, 2023 pm 05:28 PM

表示の値には、block、inline、none、inline-block、flex、grid、table、inline-table、list-item が含まれます。詳細な紹介: 1. block: 要素をブロックレベルの要素にレンダリングします。ブロックレベルの要素はページ上のブロックを形成し、1 行だけを占有します。2. inline: 要素をインライン要素にレンダリングします。インライン要素は、それ自体では 1 行を占有せず、他の要素と並べることができます。3. none、この値は、要素がページ上にないことを指定します。

See all articles