搜尋

首頁  >  文章  >  web前端  >  HTML 內嵌區塊

HTML 內嵌區塊

PHPz
PHPz原創
2024-09-04 16:18:57566瀏覽

HTML 還有另一種類型的元素，稱為內聯塊元素。它只是由定義的元素所呼叫的每個標籤所佔據和界定的空間，而不是破壞 HTML 內容流。區塊級元素的特徵主要是我們認為的

。標籤同樣的事情，我們有一個名為 的內聯元素標籤。主要關注內聯塊元素；內聯元素和內聯塊元素之間存在細微差別，它允許用戶設置Html 元素的寬度、高度，我們還自訂了頂部、底部並顯示內容將是內聯塊，並且如果滿足以下條件，填充將被初始化：所需的要求。

HTML Inline-Block 語法

基本文法如下：

文法：

<html>
<body>
<p><span> ---some html codes ---</span> </p>
</body>
</html>

以上程式碼是在html中編寫內聯塊元素的基本語法。我們在下面使用了一些預先定義的內聯塊元素集。


  • HTML 內嵌區塊

以上標籤主要是根據使用者需求在html中預先定義的html內嵌元素；我們將重點放在 html 內嵌區塊元素中的標記。我們都知道區塊級元素總是開始一個新行並佔據給定變數的完整寬度，但內聯元素不會開始一個新行。此外，與區塊級元素相比，它需要的寬度更小，但有必要在 html 內聯元素中聲明寬度。內聯元素將在段落元素的內部聲明。 元素通常在容器中用作一些文本，並且沒有特定的必需屬性，但給定的 css 樣式、類別和 id 在 時是常見的。 element 在文字的某些樣式部分與 css 一起使用。

如何建立 HTML 內聯塊？

  • 如同先前文章所討論的，我們在區塊級元素中建立了 HTML 內嵌塊元素。 HTML 元素僅需要使用者指派給定的必要空間，並且彼此相鄰地出現在 HTML 標籤的同一行上。我們無法控制 HTML 元素的高度和寬度；這是內嵌元素的屬性。
  • 名為 display: inline 的 CSS 樣式屬性在需要時會忽略內邊距和邊距設定；它將允許 HTML 中的填滿和邊距值。它僅包含內聯元素，並藉助 display: inline 等設定使區塊元素顯示在一行中。 如果您不想最小化 HTML 程式碼，我們可以使用 CSS 樣式將 div 標籤設定為 50% 寬度。這是內聯塊元素的 CSS 解決方案。
  • 有時我們可以使用空格：no-wrap 是父容器；它將允許
    按照我們的預期在每個div 內聯區塊中顯示的標籤，而不將div 連結在一起也稱為嵌套div 標籤。我們已經討論了一些內聯塊元素，這些元素將用於在 CSS 樣式的幫助下建立佈局。
  • 假設我們在 HTML 中使用兩個 div 標籤，並透過 CSS 樣式中的 inline-block 元素設定來顯示。我們可以將每個標籤的寬度設定為 50%，但第二個 div 標籤比第一個 div 標籤低。

    • 代碼：

    <html>
<head>
section {
background: green;
box-sizing: border-box;
padding: 150px;
}
div {
box-sizing: border-box;
display: inline-block;
height: 100px;
padding: 54px;
text-align: center;
width: 53%;
}
.green {
background: lightgreen;
}
.black {
background: black;
}
</head>
<body>
<span style="border: 2px lightgreen">
</span>
<section>
<div class="green">Width: 40%</div>
<div class="black">Width: 60%</div>
</section>
</body>
</html>

    上述程式碼說明：在上面的程式碼中，我們設定了兩個div標籤的寬度；每個都是 50%，顯示屬性是 inline-block。預期輸出會有所不同，因為兩個 div 標籤的寬度為 50%，因此任何標籤值都會變更為 51% 或 49%。儘管如此，這並不是一個好的做法，而且對於 HTML 元素空間來說也不夠；它至少需要 50%，因為內聯元素尊重 HTML 中兩個 div 標籤之間的字間距。

    We can also use some borders and padding styles in the HTML div tags; it will highlight the web pages more effectively. We use

    tag called block-level elements for the above codes. We use the tag as the inline element tag; we will use some contents inside the tags that will be required on the web page.

    Examples to Implement in Inline-Block

    We will discuss the below examples.

    Example #1

    Code:

    <html>
<body>
<p>Sample <span style="border:3px green">Welcome</span>To my domain</p>
<p>Welcome to My Domain</p>
</body>
</html>

    Output:

    HTML 內嵌區塊

    Example #2

    Code:

    <html>
<head>
<style>
span.first {
display: inline;
width: 150px;
height: 120px;
padding: 8px;
border: 3px  blue;
background-color: green;
}
span.second {
display: inline-block;
width: 140px;
height: 110px;
padding: 7px;
border: 3px blue;
background-color: green;
}
span.third {
display: block;
width: 103px;
height: 110px;
padding: 6px;
border: 2px yellow;
background-color: black;
}
</style>
</head>
<body>
<div> Welcome to My Domain
<span class="first">Welcome</span>
<div>
<div> Same Same
<span class="second">Same Same</span>
<div>
<div> Welcome to My Domain
<span class="third">Welcome</span>
<div>
</body>
</html>

    Output:

    HTML 內嵌區塊

    Example #3

    Code:

    <html>
<head>
<style>
.first {
float:center;
display: inline;
width: 150px;
height: 120px;
padding: 8px;
border: 3px  blue;
background-color: green;
}
.1{
clear:center;
}
</style>
</head>
<body>
<div class="first"> <marquee> Welcome to My Domain</marquee>
</div>
</body>
</html>

    Output:

    HTML 內嵌區塊

    Explanation of the above code: The first example will discuss the essential inline element called tag that will use for the web page; the second example will use span in the CSS style, and the same will be called in the tag in body sections each of the CSS styles will be defined in each span third example we will use some text values in the box-limit areas in the inline-block element features.

    Conclusion

    In Conclusion, partly based on the above topics, we have some ideas about inline-block elements in Html. We use both tag elements for their dependencies and features in user areas. However, IE and other browser versions may or may not support some tags.

以上是HTML 內嵌區塊的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css less html Object if for select class var map display margin padding input word
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：HTML 區塊元素下一篇：HTML 區塊元素

相關文章

看更多