HTML 内联块
- PHPz原创
- 2024-09-04 16:18:57532浏览
HTML 还有另一种类型的元素，称为内联块元素。它只是由定义的元素调用的每个标签所占据和界定的空间，而不是破坏 HTML 内容流。块级元素的特征主要是我们认为的
HTML Inline-Block 语法
基本语法如下：
语法：
<html> <body> <p><span> ---some html codes ---</span> </p> </body> </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:
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:
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:
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中文网其他相关文章！