在HTML中，每个元素都有默认的显示模式，这决定了元素在文档中的布局方式。主要有三种基本模式：块级（block）、行内（inline）、行内块（inline-block） 模式。
块级元素（block）
- 特点：
- 独占一行，宽度默认撑满整个父容器，高度默认由内容决定
- 宽高可以通过
CSS设置 - 可以包含其他块级元素（
<p>标签除外）或行内元素
- 常见块级元素：
<html>, <body>, <div>, <p>, <h1>~<h6>, <hr>, <pre>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>,
<table>, <tbody>, <thead>, <tfoot>, <tr>, <caption>, <form>, <option>
- 示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>元素显示模式</title>
<style>
.d1 {
background-color: orange;
}
.d2 {
background-color: green;
}
</style>
</head>
<body>
<div class="d1">我是块元素，独占一行，可以通过CSS调整宽高</div>
<div class="d2">我是块元素，独占一行，可以通过CSS调整宽高</div>
</body>
</html>
行内（内联）元素（inline）
- 特点：
- 不独占一行，元素从左到右排列
- 宽高由内容决定，不能通过
CSS设置 - 只能包含行内元素，不能嵌套块级元素
- 常见行内元素：
<span>, <br>, <strong>, <em>, <sup>, <sub>, <del>, <ins>, <a>, <lable>
- 示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>元素显示模式</title>
<style>
.sp1 {
background-color: greenyellow;
}
.sp2 {
background-color: green;
width: 1000px;
}
</style>
</head>
<body>
<span class="sp1">我是行内（内联）元素，在一行中从左到右排列，宽高由内容决定，不可以通过CSS调整宽高</span>
<span class="sp2">我是行内（内联）元素，在一行中从左到右排列，宽高由内容决定，不可以通过CSS调整宽高</span>
</body>
</html>
行内块元素（inline-block）
- 特点：
- 不独占一行，元素从左到右排列
- 宽度由内容决定
- 高度由内容决定，与字体大小和行高相关
- 可以通过
CSS设置宽高 - 只能包含行内元素，不能嵌套块级元素
- 常见行内块元素
<img>, <th>, <td>, <input>, <textarea>, <select>, <button>, <iframe>
- 示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>元素显示模式</title>
<style>
input {
width: 320px;
}
</style>
</head>
<body>
<input type="text" placeholder="我是行内块元素"/>
<input type="password" placeholder="，和行内元素的唯一区别是可以通过CSS调整宽高"/>
</body>
</html>
自定义显示模式
通过CSS，任何元素的显示模式都可以更改。例如，将<div>元素设置为行内元素：
div {
display: inline;
}
隐藏元素
- 特点：元素完全从文档中移除，不占据空间。主要用于动态显示或隐藏内容
- CSS设置：
input {
display: none;
}
