表示ブロックとはどういう意味ですか?使い方？-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

表示ブロックとはどういう意味ですか?使い方？

不言

Oct 24, 2018 pm 02:08 PM

display 属性に block 属性値があることは誰もが知っていますが、この display:block は何を意味するのでしょうか?どのように使用できますか?この記事ではdisplay:blockの意味と使い方を紹介しますので、困っている友達は参考にしてください。

まず、display:block の意味を見てみましょう。

実際、css 表示属性は何を意味するのでしょうか? cssのdisplay属性の詳しい説明この記事では、display:block属性の意味について説明しました。簡単に言うと、display:blockを設定すると、要素をブロックレベルの要素として表示します。

display:block の意味を読んでもまだ理解できない場合は、読み進めて display:block の使い方を見てみましょう。 display:block を使用することで、display:block の意味をさらに理解できます。

#推奨マニュアル: CSSオンラインマニュアル

display:block:
#の使い方#すべてのブロックレベル要素については、display:block を使用して定義する必要はありません。ブロックレベル要素のデフォルトの属性は block であるため、やのように、display:block がより一般的に使用されます。など。ブロックレベルの要素ではない要素のうち、具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span{
            width: 200px;
            height: 30px;
        }
    </style>
</head>
<body>
    <span style="background-color: red ">php中文网</span>
        <span style="background-color: red ">php中文网</span>
    <span style="background-color: red ">php中文网</span>
</body>
</html>

上記のコードは display:block で定義されていないため、その効果は次のとおりです。

表示ブロックとはどういう意味ですか?使い方？上記のレンダリングから、スパンの幅と高さを設定するのは無意味であることがはっきりとわかります。コンテンツはすべて同じ行にあります。どのように表示されるかを見てみましょう。 display:block 定義を使用する場合と同様に、コードは次のようになります:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span{
            width: 200px;
            height: 30px;
            display: block;
        }
    </style>
</head>
<body>
    <span style="background-color: red ">php中文网</span>
        <span style="background-color: red ">php中文网</span>
    <span style="background-color: red ">php中文网</span>
</body>
</html>

display:block を使用する効果は次のとおりです:

表示ブロックとはどういう意味ですか?使い方？上記の効果は次のとおりです。これらは幅と高さの設定に有効であり、One line 専用であることが明確にわかります。

おすすめ関連記事:

1.cssでの表示の使い方
2. imgタグのdisplay:block属性を設定する際に幅を100%に設定できない問題の解決方法
関連動画のおすすめ:
1. CSS ビデオチュートリアル - 翡翠少女般若心経編
上記で紹介した内容を読んで、display:block についてさらに深く理解できましたか。display:block 属性について詳しく知りたい場合は、 php Chinese Net の

css 学習マニュアル

を参照してください。

以上が表示ブロックとはどういう意味ですか?使い方？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

スクリーンリーダーの分解：アクセス可能なフォームとベストプラクティスMar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理：Focus-Visible」をご覧ください。で

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成するMar 07, 2025 am 11:33 AM

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています（注：使用できなくなりました）。フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

WordPressブロックと要素にボックスシャドウを追加しますMar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

満足している属性を持つインラインテキストエディターを作成しますMar 02, 2025 am 09:03 AM

インラインテキストエディターの構築は些細なものではありません。このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。エディターの作成このエディターを構築するには、コンテンツを動的に変更する必要があります

最初のカスタムSvelteトランジションを作成しますMar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

GraphQLキャッシングの使用Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較するMar 04, 2025 am 10:22 AM

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

node.jsとexpressのMulterを使用してファイルアップロードしますMar 02, 2025 am 09:15 AM

このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。まず、プロジェックをセットアップします

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。