今天先来解释一下什么是内联元素，什么是块元素
百度百科中怎么写呢：
块元素又名块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。大多数HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。
内联元素又名行内元素(inline element)，和其对应的是块元素(block element)，都是html规范中的概念。内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。
在我的理解中：
块元素就是：地位高，每一个新的块元素标签都会给分配在新的行里，就算这个元素的宽度很小，也给分配一个新的行。
内联元素就是：地位低，大家挤一挤在一行里，挤不下了再给分配下一行，唉，好惨。
那么常见的块元素和内联元素有哪些嘞？
常用的块级元素：
div , address , center ,dl , form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ul , li
常用内联的元素：
a , b , br , em , font , img , input , label , select , small , span , textarea
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
button
块元素和内联元素的区别
块元素的特点：
①总是在新行上开始，占据一整行；
②高度，行高以及外边距和内边距都可控制；
③宽带始终是与浏览器宽度一样，与内容无关；
④它可以容纳内联元素和其他块元素。
行内元素的特点：
①和其他元素都在一行上；
②高，行高及外边距和内边距部分可改变；
③宽度只与内容有关；
④行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用
哎我天，说这么多没啥用，看看代码（块元素以div为例子，内联元素以span为例）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<span class="txt1">我想让他居中</span>
<span class="txt1">我想让他居中</span>
<span class="txt1">我想让他居中</span>
<span class="txt1">我想让他居中</span>
<div class="txt2">我想让他居中</div>
<div class="txt2">我想让他居中</div>
<div class="txt2">我想让他居中</div>
<div class="txt2">我想让他居中</div>
<div class="txt3">我想让他居中</div>
<div class="txt3">我想让他居中</div>
<div class="txt3">我想让他居中</div>
<div class="txt3">我想让他居中</div>
</body>
</html>
css样式：
<style>
.txt1{
text-align: center;
height: 50px;
width: 100%;
color: peachpuff;
background-color: palevioletred;
}
.txt2{
margin-top: 2px;
text-align: center;
height: 50px;
width: 20%;
color: peachpuff;
background-color: brown;
}
.txt3{
margin-top: 2px;
text-align: center;
height: 50px;
width: 100%;
color: peachpuff;
background-color: brown;
}
</style>
运行效果：
大家可以看到，上面的四个小东西（span）是没有受到css的影响的。
我给span的class取名 txt1
.txt1{
text-align: center;
height: 50px;
width: 100%;
color: peachpuff;
background-color: palevioletred;
}
但是这里的span并没有受到任何影响，居中没影响，宽高没影响，太惨了，这是想急死我们程序员啊，这时候百度大大告诉我，因为span是内联元素，你直接写宽高是不受影响的喔，需要加一个display：block，这样就让span拥有一个块元素的属性。就宛若冲了钱的人民币玩家哦！
那我们加一个
.txt1{
display: block;
text-align: center;
height: 50px;
width: 100%;
color: peachpuff;
background-color: palevioletred;
}
这下我们的4个span的宽高还有居中都好用啦，开心啦
那我还听说还可以添加一个display:inline-block 也是好用的，看下效果咯
//代码
.txt1{
display: inline-block;
text-align: center;
height: 50px;
width: 50px;
color: peachpuff;
background-color: palevioletred;
}
display：inline-block 是可以给排列在一排内的内联元素设置宽高的条件~
反观，各位同学自己看一下div的代码，这里就不一样了，不需要制定display：block这样的属性，宽高设置都是直接好用的。而且每一个新的div，无论大小能不能放在一行内，都会分配给他们一个新行。