一、行内元素和块级元素
1.1、块级元素（block）：
它独占一行；
它的宽高可以设置；
默认时，宽度是100%；
例如：<div>、<h1-h6>、<ul>、<ol> 、<li>等。
1.2、行内元素（inline）：
它的宽度由内容决定，高度由内容字体大小决定；
它不可以设置宽高；垂直方向的边距失效。
它可以和其他的行内元素位于同一行；
例如：<span>、<label>、<i>、<e>等。
1.3、行内块级元素（inline-block）：
它可以和其他的行内元素位于同一行，
元素的宽高及与间距（垂直和水平方向都可以）都可以设置；
例如：<input>、<img>、<select>等。
二、块级元素、行内元素、行内块级元素转换
2.1、display：block；转换成块级元素。
2.2、display：inline；转换成行内元素。
2.3、display：inline-block；转换成行内块级元素。
总结
不管块级元素还是行内元素，区别主要是三个方面:一是排列方式，二是宽高边距设置，三是默认宽度。
- 块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。
- 块级元素和内联块元素可以设置 width、height ， 边距属性，而内联元素设置无效。
- 块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。
- 行内块级元素又同时拥有块级元素和行内元素的特点。
