今天先來解釋一下什麼是内聯元素，什麼是塊元素
百度百科中怎麼寫呢：
塊元素又名塊級元素(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 >
<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，無論大小能不能放在一行内，都會配置設定給他們一個新行。