块状元素、内联元素和内联块状元素

CSS中，html中的标签元素大致被分为三种不一样的类型：块状元素（display：block）、内联元素(又叫行内元素display：inline)和内联块状元素（display:inline-block）。能够经过代码来相互转换。
一.经常使用的块状元素有：

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

块级元素特色：
一、每一个块级元素都重新的一行开始，而且其后的元素也另起一行。

二、元素的高度、宽度、行高以及顶和底边距均可设置。

三、元素宽度在不设置的状况下，是它自己父容器的100%（和父元素的宽度一致）。默认高度等于子元素高度。父子均是块级元素时，子块的高度可能冲破父级的限制

二.经常使用的内联元素有：

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

内联元素特色：
1.和其余内联元素都在一行上；

2.能够经过margin、padding来改变左右的距离，但不能够改变上下的距离，致使width、height、line-height失效或。可使用border。

3.内联元素之间有空白区域，空白区域的造成是由于<span>之间有回车，在html中，空格、制表符、回车都属于空白符，多个空白符都会视为一个空格，空格的大小由父级<div>的font-size决定。注意：只有内联(内联块)与内联(内联块)之间的空白符才会造成一个空格，文本元素(除空白符)也是属于内联元素。经常使用解决方法，给<div>设置font-size: 0;，在<span>上把font-size设置回去

三.经常使用的内联块状元素有：

<img>、<input>

inline-block 元素特色：
1.和其余元素都在一行上；

2.元素的高度、宽度、行高以及顶和底边距均可设置。

3.它也会有元素间出现空白区域的问题

4、参考的文章：
https://www.jianshu.com/p/1cf...

https://segmentfault.com/a/11...