HTML5 Day2-块元素和行内块元素
warning:
这篇文章距离上次修改已过193天，其中的内容可能已经有所变动。
在HTML5中，块元素（block element）是一个元素，如果没有特别指定，它将会创建一个新的行或块级区域。典型的块元素包括 <div>, <p>, <h1> 到 <h6>, 和 <ul> 等。
行内块元素（inline-block element）是一个元素，它在视觉上表现为一个块级元素，但在文档中表现为一个行内元素。典型的行内块元素包括 <img>, <input>, 和 <td>。
下面是一个简单的HTML代码示例，展示如何使用这两种类型的元素：
<!DOCTYPE html>
<html>
<head>
<title>块元素和行内块元素示例</title>
<style>
/* 块元素样式 */
div {
background-color: lightblue;
padding: 10px;
margin: 10px 0;
}
/* 行内块元素样式 */
img {
display: inline-block;
background-color: lightcoral;
padding: 10px;
margin: 10px;
max-width: 100%; /* 确保图片不会溢出容器 */
}
</style>
</head>
<body>
<!-- 块元素的使用 -->
<div>这是一个块元素。</div>
<div>这是另一个块元素。</div>
<!-- 行内块元素的使用 -->
<img src="image.jpg" alt="示例图片">
<img src="image.jpg" alt="示例图片">
</body>
</html>在这个例子中，<div> 元素被用作块元素，而 <img> 元素被用作行内块元素。每个 <div> 元素都会在页面上创建一个新的行，而 <img> 元素则会在页面上以行内的方式显示，同时保留块级元素的特性，如可以设置宽高和背景色。
评论已关闭