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

块元素

独占一行，宽度默认为容器的100%，可以设置宽、高、行高、内外边距；布局时，块元素可以包含块元素和行内元素

<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>

效果:

转换

定义元素为行内元素： display: inline;

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

效果:

定义元素为块级元素： display: block;

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

效果:

定义元素为行内块级元素： display: inline-block;

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

效果:

注意 ：
        1）元素宽度的百分比相对于父元素的宽度的百分比
        2）元素的内边距与外边距，都是相对于父元素的宽度的百分比
        3）元素的宽度是内容的宽度，真实占据的位置是这个内容宽度+内边距+边框
        4）元素的高度的百分比相对于父元素的高度的百分比，我们一般不会设置高度 高度就是内容的高度
        5）一行只有一个容器你才能居中，如果有多个，需要自己设置宽度和边距进行居中排列