HTML表示ブロック-htmlチュートリアル-php.cn

HTML表示ブロック

WBOY

リリース： 2024-09-04 16:39:16

オリジナル

1061 人が閲覧しました

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表示ブロック