CSS元素显示模式的存在(块级元素，行内元素，行内块元素）

这篇文章距离上次修改已过437天，其中的内容可能已经有所变动。

CSS中的元素显示模式定义了元素如何显示以及如何处理与其他元素的关系。主要的显示模式包括：

块级元素（Block-level elements）：默认宽度自动扩展到父元素的宽度，可以设置宽度、高度、外边距（margin）和内边距（padding）。典型的块级元素有 <div>, <p>, <h1> 到 <h6> 等。
行内元素（Inline elements）：宽度和高度由内容决定，不可直接设置宽度和高度，外边距（margin）和内边距（padding）水平方向有效。典型的行内元素有 <span>, <a> 等。
行内块元素（Inline-block elements）：结合了块级元素和行内元素的特点，可以在行内显示，并且可以设置宽度和高度，以及外边距和内边距。典型的行内块元素有 <img>, <input> 等。

示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Modes</title>
<style>
  .block {
    display: block; /* 块级元素 */
    width: 100%;
    height: 50px;
    background-color: lightblue;
    margin-bottom: 10px;
  }
 
  .inline {
    display: inline; /* 行内元素 */
    background-color: lightgreen;
    margin: 0 5px;
  }
 
  .inline-block {
    display: inline-block; /* 行内块元素 */
    width: 50px;
    height: 50px;
    background-color: orange;
    margin: 0 5px;
  }
</style>
</head>
<body>
 
<div class="block">块级元素</div>
<span class="inline">行内元素</span>
<span class="inline">行内元素</span>
<img class="inline-block" src="image.jpg" alt="行内块元素">
<input class="inline-block" type="button" value="行内块元素">
 
</body>
</html>

在这个例子中，.block 类使得 <div> 成为块级元素，并设置了其样式；.inline 类使得 <span> 成为行内元素，并设置了其样式；.inline-block 类使得 <img> 和 <input> 成为行内块元素，并设置了其样式。

CSS元素显示模式的存在(块级元素，行内元素，行内块元素）

评论已关闭

推荐阅读