HTML表示ブロック
Sep 04, 2024 pm 04:39 PM
HTML 表示ブロックは HTML の最も重要な位置プロパティの 1 つであり、ブロックレベルの要素を表示ブロックに配置する役割を果たします。 Web ページをデザインするときは、要素を特定の位置に適切に配置することが常に重要です。レイアウトの適切な位置を設(shè)定することは、最も重要な作業(yè)の 1 つです。デフォルトでは、表示プロパティをインラインとして受け取りました。これは常に新しい行で始まり、全幅のスペースを占めるまで要素を左から右に引き伸ばします。高さと幅のプロパティをブロックレベル要素に設(shè)定でき、その中に他のインライン要素やブロック要素を含めることも可能です。
構(gòu)文:
- すべての要素は、Web ページ上の特定の場所に配置されます。プロパティ値は、Web ページ上での表示方法を定義するのに役立ちます。それは次のようになります:
display :block;
- 位置値を使用して表示するための構(gòu)文は次のとおりです。
position :value;
- 上記の構(gòu)文では、位置は実際の要素が配置される配置領(lǐng)域です。値にブロックを使用して、ブロックレベルの要素を表示できます。したがって、次のように使用されます:
position :block;
- その HTML ブロックには、、
、
などの要素が含まれており、表示ブロック內(nèi)でインライン要素を使用することもできます。 - CSS を使用すると、次のような指定された値を使用して表示プロパティを定義できます。
display: [<display-outside> , <display-inside>] [<display - listitem>, <display -internal>, <display-box>]
HTML には次のようなさまざまな表示値があります:
1.値なし
{ display:none; }2.インライン値
{ display:inline; }3.ブロック値
{ display:block; }4.インラインブロック値
{ display : inline- block; }上記の値はすべて、レイアウトの設(shè)定と制御に役立ちます。ほとんどの場合、レイアウトの値はインラインまたはブロックのいずれかです。表示ブロックは、コンテナの全幅をカバーする新しい行で始まり、HTML 表示ブロック內(nèi)の Web ページ上の要素を配置します。ブロックレベル要素では、その中で他のブロック要素を使用することはできません。
HTML での表示をブロックするにはどうすればよいですか?
- ボックスを縦方向に並べた形式です。含まれているブロックの先頭から開始されます。
- これらのブロックは、CSS のマージン プロパティと呼ばれる同等のスペースを使用して、ブロック間の垂直距離で管理されます。
- この表示ブロックの書式設(shè)定プロセスでは、すべてのボックスの左外側(cè)が、そのボックスを含むブロックの左側(cè)に接続されます。同じことが、含まれるブロックの右端でも起こります。
- HTML で表示ブロックを定義するもう 1 つの方法は、英語のようにブロック要素を水平方向に配置することです。 1つずつ下に縦にレイアウトしていきます。
- マージンを使用しているため、2 つのボックスまたは要素の間にスペースを作成し、要素を互いに分離するのに役立ちます。
- ブロックレベルの要素はインライン方向のすべてのスペースを占有し、要素をそれらを含むブロックに分割します。
- ご存知のとおり、レイアウトの高さと幅のプロパティを設(shè)定できるため、ブロックを 1 つずつ下に配置するのに役立ちます。
HTML 表示ブロックの例
以下にさまざまな例を示します。
例 #1
これは、HTML コードで HTML 表示ブロック プロパティがどのように使用されるかを示す通常の例です。
コード:
<!DOCTYPE html> <html> <style> .block_demo{ border: 2px solid red; width:50%; display:block; } </style> <body> <h4>List of Color Names:</h4> <div class="block_demo"> <ul> <li>Red</li> <li>Green</li> <li>Blue</li> <li>Orange</li> <li>Purple</li> <li>Pink</li> </ul> </div> <h4>List of Mobile Brands:</h4> <div class="block_demo"> <ol> <li>Apple</li> <li>SAMSUNG</li> <li>NOKIA</li> <li>MOTOROLA</li> <li>LENOVO</li> <li>OPPO</li> </ol> </div> </body> </html>出力:
例 #2
この例では、次のように 3 つの等しいブロックを作成し、Display ブロックを使用してそれらの間のデータを表示します:
コード:
<!DOCTYPE html> <html> <head> <title>HTML Display box</title> <style> #block1{ height: 100px; width: 400px; background: orange; display: block; } #block2{ height: 100px; width: 400px; background: white; display: block; } #block3{ height: 100px; width: 400px; background: lightgreen; display: block; } .flag { margin-left:20px; font-size:40px; font-weight:bold; color:blue; } .demo { font-size:20px; margin-left:20px; } .main { margin:50px; text-align:center; border: 1px solid black; } </style> </head> <body> <div class = "flag">National Flag of India</div> <div class = "demo">Meaning of National Flag</div> <div class = "main"> <div id="block1">The saffron color of the flag indicates a symbol of courage and sacrifice. This is also known as Bhagwa color. It’s for renunciation . It represents fire. </div> <div id="block2">The white color of our flag represents honesty, peace, purity. It focus on importance of maintaining peace in the country. <img src="AC.png" style="height:60px; width:70px;"> </div> <div id="block3">The green color represents faith and chivalry. It’s for nature. It is a symbol of prosperity and life. It also used for representing auspiciousness of the Indian Motherland..</div> </div> </body> </html>出力:
例 #3
この例には、次のようなヘッダー、フッター、セクション、サイドバーなどの要素が含まれています。
コード:
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Display Block</title> <style> body { margin: 0; } .header { padding: 10px; text-align: center; background-color:cadetblue; color: white; } .navbar { overflow: hidden; background-color:darkkhaki; } .navbar a { float: left; display: block; color: white; text-align: center; padding: 10px 10px; } .navbar a.right { float: right; } .navbar a:hover{ background-color: #eee; color: black; } .row { display: flex; flex-wrap: wrap; } .section { flex: 10%; background-color: #f1f1f1; padding: 20px; } .main { flex: 80%; background-color: white; padding: 20px; } .footer{ padding:3px; background-color:darkcyan; width:100%; } </style> </head> <body> <div class="header"> <h1> HEADER of Webpage</h1> </div> <div class="navbar"> <a href="#">Home</a> <a href="#">About US</a> <a href="#">Services</a> <a href="#">Contact</a> <a href="#" class="right">SignUp</a> </div> <div class="row"> <div class="section"> <h2>Sidebar comes here</h2> </div> <div class="main"> <h2></h2> <p></p> <br> <div class="row"> <div class="section" style="margin-top:-50px;"> <h2>(Example of section)</h2> </div> </div> </div> <div class="footer"> <p>Footer</p> </div> </div> </body> </html>出力:
結(jié)論
上記のすべての情報から、HTML の HTML 表示ブロック プロパティがレイアウトを適切な構(gòu)造に設(shè)定するのに役立つことがわかりました。レイアウト內(nèi)のこれらのブロックは、縦方向または橫方向に次々と配置できます。これには、
、、 以上がHTML表示ブロックの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
なぜ私の畫像がHTMLに表示されないのですか？
Jul 28, 2025 am 02:08 AM
表示されていない畫像は、通常、ファイルパスの間違ったパス、ファイル名または拡張機能、HTML構(gòu)文の問題、またはブラウザキャッシュによって引き起こされます。 1. SRCパスがファイルの実際の位置と一致していることを確認し、正しい相対パスを使用します。 2.ファイル名のケースと拡張機能が正確に一致するかどうかを確認し、URLに直接入力して畫像をロードできるかどうかを確認します。 3.IMGタグ構(gòu)文が正しいかどうかを確認し、冗長文字がなく、ALT屬性値が適切であることを確認してください。 4.ページを強制的に更新するか、キャッシュをクリアするか、Incognitoモードを使用してキャッシュ干渉を排除してください。この順序でのトラブルシューティングは、ほとんどのHTML畫像表示の問題を解決できます。
別のタグ內(nèi)にタグを入れることはできますか？
Jul 27, 2025 am 04:15 AM
youcannotnesttagsinsisideantagbecuseit’sinvalidhtml; browsersautomatelycloseThefirsteforeopeningthenext、spedinginselementsied、useinlineelements like like like、orforstylingwithinaparagraph、またはblockainerslikegoriveparagragh
HTMLで順序付けられていないリストを作成する方法は？
Jul 30, 2025 am 04:50 AM
HTML Unoderedリストを作成するには、タグを使用してリストコンテナを定義する必要があります。各リストアイテムはタグで包まれており、ブラウザは自動的に弾丸を追加します。 1.タグを使用してリストを作成します。 2。各リスト項目はタグで定義されています。 3.ブラウザは、デフォルトのドットシンボルを自動的に生成します。 4。サブリストはネスティングを通じて実裝できます。 5。CSSのリストスタイルタイプの屬性を使用して、ディスク、サークル、スクエア、またはなしなどのシンボルスタイルを変更します。これらのタグを正しく使用して、標準の非秩序化リストを生成します。
コンテンツ誘導(dǎo)性の屬性を使用する方法は？
Jul 28, 2025 am 02:24 AM
thecontentEdentedItedItableattributemakesanyhtmlementedabledaitbyaddingcontenteditable = "true"、avainusErstodirectlymodifyContentinthebrowser.2.ItiscommonlyLichTexteditors、note-takingApps、およびin-place-placeditingintingintingintingintingintingtintingtintingtediv
SEOとアクセシビリティのセマンティックHTMLの重要性
Jul 30, 2025 am 05:05 AM
semantichtmlimprovesbothseoandaccessibilityを使用することはできません
html5 schema.orgマークアップを使用してカスタム語彙を定義します。
Jul 31, 2025 am 10:50 AM
Schema.orgタグは、セマンティックタグ（アイテムスコープ、アイテムタイプ、アイテムプロップなど）を使用して、検索エンジンがWebページコンテンツの構(gòu)造化データ形式を理解するのに役立ちます。カスタム語彙を定義するために使用できます。方法には、既存のタイプの拡張や追加のタイプを使用して新しいタイプの導(dǎo)入が含まれます。実際のアプリケーションでは、構(gòu)造を明確に保ち、公式の屬性の使用を優(yōu)先し、コードの妥當性をテストし、カスタムタイプにアクセスできるようにします。予防策には、部分的なサポートの受け入れ、綴りエラーの回避、JSON-LDなどの適切な形式の選択が含まれます。
HTMLフォームで検索入力フィールドを作成する方法
Aug 02, 2025 pm 04:44 PM
usetheelementwithinatagtocreateasemanticsearchfield.2.includeaforAccessibility、settheform'sactionandmethod = "astributesenddatatoaseandpointwitharaibleableurl.3.addname =" q "dodefinethequeryparameter、umeplyholdertoguideuse
HTMLのリンクタグのREL屬性の目的は何ですか？
Aug 03, 2025 pm 04:50 PM
rel = "styleSheet" linkscssfilesforstylingthepage; 2.Rel = "preoad" hintstopreloadcriticalResourcesforPerformance; 3.REL = "ICON" setSthewebsite’sfavicon;
