HTML 块级元素、行内元素、行内块元素详解
warning:
这篇文章距离上次修改已过202天，其中的内容可能已经有所变动。
HTML中的元素可以根据其display属性分为三类：块级元素、行内元素和行内块元素。
- 块级元素：默认占据一定宽度的容器，处于新的一行，如
<div>,<p>,<h1>至<h6>,<ul>,<ol>,<table>等。 - 行内元素：不形成新的一行，宽度随内容变化，常见的如
<span>,<a>,<img>,<strong>,<em>等。 - 行内块元素：结合了行内元素和块级元素的特点，可以设置宽高，同时不会形成新的一行，如
<input>,<td>。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
/* 块级元素样式 */
div {
display: block;
width: 100%;
height: 50px;
background-color: lightblue;
margin: 10px 0;
}
/* 行内元素样式 */
span {
display: inline;
background-color: lightcoral;
padding: 5px;
}
/* 行内块元素样式 */
input {
display: inline-block;
width: 200px;
height: 30px;
background-color: lightgreen;
margin: 0 10px;
}
</style>
</head>
<body>
<div>块级元素</div>
<span>行内元素</span>
<span>行内元素</span>
<input type="text" placeholder="行内块元素">
<input type="text" placeholder="行内块元素">
</body>
</html>在这个例子中，<div>, <span>和<input>元素分别设置了不同的display属性来展示其各自的特性。
评论已关闭