快速了解元素的三种分类

在html中的标签元素 大体被分为三种不同的类型：

1、块状元素； 2、内联元素；3、内联块状元素。

特点：

1.块状元素：所谓的块状元素，就是会独占一行的的元素,无论他的内容有多少，他都会独占一整行，【可以设置宽高】

2.内联元素：所谓的内联元素，指的是只占自身大小的元素，不会独占用一行，【不可以设置宽高】

3.内联块状元素：所谓的内联块状元素，指的是只占自身大小的元素，不会占用一行，但是【可以设置宽高】

例子：

块状元素：

<div>我是第一个块状元素</div><div>我是第二个块状元素</div>

运行结果：如下，会独占一行，且可设宽高；

内联元素：

<span>我是第一个内联元素</span><span>我是第二个内联元素</span>

运行结果：如下，只占自行元素大小，不会独占一行，且不可设宽高；

内联块状元素：

<input style="height: 50px;" value="我是第一个内联块状元素" />
<input style="height: 50px;" value="我是第二个内联块状元素" />

运行结果：如下，不会独占一行，且可设宽高；

我们可以根据需要将元素进行转化：

需要哪种样式，设置display即可：

块状元素（block），内联元素（inline），内联块状元素（inline-block）

1.块状元素>>（转）>>内联元素

设置样式：display：inline；

2.块状元素>>（转）>>内联块状元素

设置样式：display：inline-block；

3.内联元素>>（转）>>块状元素

设置样式：display：block；

注意点

一般情况下：
只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
a元素可以包含任意元素，除了他本身
p元素不可以包含任何块状元素

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>