検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML表示ブロック

HTML表示ブロック

WBOY
WBOYオリジナル
2024-09-04 16:39:161079ブラウズ

HTML 表示ブロックは HTML の最も重要な位置プロパティの 1 つであり、ブロックレベルの要素を表示ブロックに配置する役割を果たします。 Web ページをデザインするときは、要素を特定の位置に適切に配置することが常に重要です。レイアウトの適切な位置を設定することは、最も重要な作業の 1 つです。デフォルトでは、表示プロパティをインラインとして受け取りました。これは常に新しい行で始まり、全幅のスペースを占めるまで要素を左から右に引き伸ばします。高さと幅のプロパティをブロックレベル要素に設定でき、その中に他のインライン要素やブロック要素を含めることも可能です。

構文:

  • すべての要素は、Web ページ上の特定の場所に配置されます。プロパティ値は、Web ページ上での表示方法を定義するのに役立ちます。それは次のようになります:
display :block;
  • 位置値を使用して表示するための構文は次のとおりです。
position :value;
  • 上記の構文では、位置は実際の要素が配置される配置領域です。値にブロックを使用して、ブロックレベルの要素を表示できます。したがって、次のように使用されます:
position :block;
  • その HTML ブロックには、
    、

    、

    などの要素が含まれており、表示ブロック内でインライン要素を使用することもできます。
  • 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;
}

上記の値はすべて、レイアウトの設定と制御に役立ちます。ほとんどの場合、レイアウトの値はインラインまたはブロックのいずれかです。表示ブロックは、コンテナの全幅をカバーする新しい行で始まり、HTML 表示ブロック内の Web ページ上の要素を配置します。ブロックレベル要素では、その中で他のブロック要素を使用することはできません。

HTML での表示をブロックするにはどうすればよいですか?

  • ボックスを縦方向に並べた形式です。含まれているブロックの先頭から開始されます。
  • これらのブロックは、CSS のマージン プロパティと呼ばれる同等のスペースを使用して、ブロック間の垂直距離で管理されます。
  • この表示ブロックの書式設定プロセスでは、すべてのボックスの左外側が、そのボックスを含むブロックの左側に接続されます。同じことが、含まれるブロックの右端でも起こります。
  • HTML で表示ブロックを定義するもう 1 つの方法は、英語のようにブロック要素を水平方向に配置することです。 1つずつ下に縦にレイアウトしていきます。
  • マージンを使用しているため、2 つのボックスまたは要素の間にスペースを作成し、要素を互いに分離するのに役立ちます。
  • ブロックレベルの要素はインライン方向のすべてのスペースを占有し、要素をそれらを含むブロックに分割します。
  • ご存知のとおり、レイアウトの高さと幅のプロパティを設定できるため、ブロックを 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>

出力:

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>

出力:

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>

出力:

HTML表示ブロック

結論

上記のすべての情報から、HTML の HTML 表示ブロック プロパティがレイアウトを適切な構造に設定するのに役立つことがわかりました。レイアウト内のこれらのブロックは、縦方向または横方向に次々と配置できます。これには、

、
、
などの要素が含まれます。 <ヘッダー>、<フッター>、

-

など

以上がHTML表示ブロックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html define for while format include using Property default this location display position margin
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML 中央揃え次の記事：HTML 中央揃え

関連記事

続きを見る