CSS——元素分类

1.标签元素被分为三大类：块状元素、内联元素和内联块元素。

（1）常见块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

（2）常见内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

（3）常见内联块元素：<img>、<input>

2.块级元素

如<div>、<p>、<h1>块级元素，每个元素都从新的一行开始，其后元素也另起一行。元素的高度、宽度、行高和底边距都可以设置。

3.内联元素

（1）在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。

（2）元素的高度、宽度、顶部和底部都不可设置，元素的宽度就是包含的文字或图片的宽度，不可改变。

（3）行内元素之间有“回车”、“tab”和“空格”时就会出现间隙。

4.内联块状元素

（1）（inline-block）同时具备内联元素、块状元素的特点。代码display:inline-block就是将元素设置为内联块状元素。

（2）inline-block 元素特点：元素的高度、宽度、行高以及顶和底边距都可设置。

（3）例子：

a{
display:inline-block;
width:20px;/*在默认情况下宽度不起作用*/
height:20px;/*在默认情况下高度不起作用*/
background:pink;/*设置背景颜色为粉色*/
text-align:center; /*设置文本居中显示*/
}

可以看到使用了

display:inline-block;内联块状元素
效果：