1. 什么是块级元素？

块级元素是那些视觉上会被格式化成块状的元素，通俗一点来说就是那些会换新行的元素。display属性的：block,list-item,table,flex,grid值都可以将一个元素设置成块级元素。

2. 什么是块元素？

块元素是display属性值为block的元素，它应该是块级元素的一个子集，而不是等同的，一个块元素是一个块级元素，但一个块级元素不一定是一个块元素，所以不要混淆。

3.什么是行内级元素？

行内级元素是那些不会为自身内容形成新的块，而让内容分布在多行中的元素。display属性的：inline,inline-table,inline-block,inline-flex,inline-grid值都可以将一个元素设置成行内级元素。

4.什么是行内元素？

如同块元素之于块级元素的关系，行内元素仅仅是display属性值为inline的元素，这里不再赘述。

对于行内元素，又分为可置换元素和非置换元素

可置换元素（Replaced element）

img | input | select | textarea | button | label | object

可置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。如果查看(X)HTML代码，则看不到图片的实际内容。

这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。

默认就有 CSS 格式化外表范围的元素。

非置换元素（non-replaced element）

span, strong, em, br等

可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素

行内级置换和非置换元素的宽度定义

对于行内级非置换元素，宽度设置是不适用的。·

对于行内级置换元素来说，其宽度的设置需遵循以下几点：

若宽高的计算值都为auto且元素有固有宽度，则width的使用值为该固有宽度；

典型的例子是：拥有默认宽高的input当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度

若宽度的计算值为auto且元素有固有宽度，则width的使用值为该固有宽度；

例子同上

若宽度的计算值为auto且高度有非auto的计算值，并且元素有固有宽高比，则width的使用值为高度使用值 * 固有宽高比；

典型的例子：img当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置

除此之外，当width的计算值为auto时，则宽度的使用值为300px

典型的例子：比如iframe, canvas

其它类型的置换元素，其宽度的定义都参照行内置换元素的定义。

行内级置换和非置换元素的高度定义

对于行内级非置换元素，高度设置是不适用的。

对于行内级置换元素来说，其高度的设置需遵循以下几点：

若宽高的计算值都为auto且元素有固有高度，则height的使用值为该固有高度；

若高度的计算值为auto且元素有固有高度，则height的使用值为该固有高度；

若高度的计算值为auto且宽度有非auto的计算值，并且元素有固有宽高比，则height的使用值为：宽度使用值 / 固有宽高比；

若高度的计算值为auto且上述条件完全不符，则height的使用值不能大于150px，且宽度不能大于长方形高度的2倍。

其它类型的置换元素，其高度的定义都参照行内置换元素的定义。

摘自：

http://blog.csdn.net/claudia_dawn/article/details/52413885

http://blog.doyoe.com/2015/03/15/css/%E7%BD%AE%E6%8D%A2%E5%92%8C%E9%9D%9E%E7%BD%AE%E6%8D%A2%E5%85%83%E7%B4%A0/