【HTML】元素的分类（块元素、行内元素、行内块元素）

元素的分类

• 块元素
• 行内元素
• 行内块元素
• 转换

块元素

<div>div</div><p>p</p><h3>h1-h6</h3><hr>
<form action="">form</form>
<dl>
	<dt>dt</dt>
	<dd>dd</dd>
</dl>
<table border="1">
	<tr>
		<th>tr</th>
		<th>tr</th>
	</tr>
	<tr>
		<th>tr</th>
		<th>tr</th>
	</tr>
</table>
<table border="1">
	<tr>
		<th>tr</th>
		<th>tr</th>
	</tr>
	<tr>
		<th>tr</th>
		<th>tr</th>
	</tr>
</table>
<ul><li>ul > li</li></ul>
<ol><li>ol > li</li></ol>
<header>header</header><aside>aside</aside><footer>footer</footer>
<section>section</section><nav>nav</nav><article>article</article>

效果:

行内元素

<button>button</button>
<sub>下标</sub><sup>上标</sup>
<span>span</span>
<del>del</del><strong>strong</strong><ins>ins</ins><em>em</em>
<a href="#">a</a>
<input type="text"><label>lable</label>
<img src="./images/小车汽车.png"></img>
<video controls src="./images/videoEdit.mp4" width="200px" height="200px"></video>
<audio controls src="./images/Clairo-may-as-well.mp3"></audio>
<select>
	<option value="">select</option>
	<option value="">select</option>
	<option value="">select</option>
</select>
<textarea>textarea</textarea>

效果:

行内块元素

<style>
	button,input,textarea,img{
		padding: 5px;
		margin: 20px;
		width: 200px;
		height: 60px;
	}
</style>
<button>button</button>
<input placeholder="input" type="text">
<textarea>textarea</textarea>
<img src="images/小车汽车.png">

效果:

‌1） 将行内块元素之间的 html 代码写在同一行，删除换行符和空格‌
2） 通过设置父元素的字体大小为 0‌，可以使空白文本节点不占据空间，再为行内块元素设置合适的字体大小
3） 使用负的间距( margin )，通过为行内块元素设置负的间距，可以抵消它们之间的间隙
4） 给行内块元素添加 float 属性（浮动）

<style>
	img{
		border: 1px solid red;
		/*float: left;*/
		/*margin: -3px;*/
	}
	div{
		font-size: 0;
	}
</style>
<div>
	<img src="images/小车汽车.png">
	<img src="images/小车汽车.png">
	<img src="images/小车汽车.png">
	<img src="images/小车汽车.png">
	<img src="images/小车汽车.png">
	<img src="images/小车汽车.png">
	<img src="images/小车汽车.png">
	<img src="images/小车汽车.png">
</div>

效果:

转换

<style>
	div{
		border: 1px solid #f531ff;
		display: inline;  /*强转为行内元素*/
	}
</style>
<div>div1</div>
<div>div2</div>
<div>div3</div>

效果:

<style>
	span{
		border: 1px solid #f531ff;
		display: block; /*强转为块元素*/
	}
</style>
<span>span1</span>
<span>span2</span>
<span>span3</span>

效果:

<style>
	span{
		border: 1px solid #f531ff;
		display: inline-block; /*强转为行内块元素*/
	}
	div{
		border: 1px solid #f531ff;
		display: inline-block; /*强转为行内块元素*/
	}
</style>
<span>span</span>
<div>div</div>

效果: