版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/z_x_Qiang/article/details/82391578
html标签一般分为块标签和行内标签和行内块元素三种
1.块元素：
常见的标签有：<h1>~<h6>、<p> ,<div> ,<ul> ,<ol>, <li> 等；
特点：1.块元素通常会都占一行或者多行，
2.可以对其设置宽高，对齐等属性，常用于网页的布局和结构的搭建；
3.可以容纳内联元素和其他块元素；
4.默认宽度是容器的100%。
ps：文字类块元素中不能在放块元素了， p ， h1--h6 ，dt中不能再放块元素了；
2.行内元素
常见的行内元素有：<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>
特点：1.不占有独立的区域，区域是包裹内容
2.不可以设置宽高和对齐，常用于控制页面中文本样式；
3. 只能容纳文本或者其他的行内元素；（<a>比较特殊除外）
ps：a 中不能再放了a了
3.行内块元素
常用的元素：<img>,<input>,<td>
特点：1.和相邻的行内元素，行内块元素在一行上，但是之间有空隙；
2.默认宽高是它本身内容的宽高；
3.高度，行高，外边距以及内边距都是可以控制的；
其实上面三种元素类型在显示的时候可以互相转换显示模式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
display: inline; /*将块元素的显示模式转换成行内元素的显示模式;*/
}
span{
width: 100px;
height: 100px;
background-color: orange;
display: block; /*将行内元素的显示模式切换成块元素的显示模式;*/
}
a{
width: 100px;
background-color: green;
display: inline-block; /*将行内元素的显示模式切换成行内块元素的显示模式;*/
}
</style>
</head>
<body>
<div>块元素</div>
<div>块元素</div>
<hr />
<span>行内元素</span>
<span>行内元素</span>
<hr />
<a href="#">行内元素转行内块</a>
<a href="#">行内元素转行内块</a>
</body>
</html>