CSS属性display可以改变元素的展示方式，这方面在不同的资料有不同说法渲染模式、显示方式等等

display常用展示方式

• block块
  • 其元素称之为block-level box块级元素
• inline行内
  • 其元素称之为inline-level box行内级元素
• inline-block行内块
  • 其元素称之为inline-block-level box行内块元素

    一、块级元素

    顾名思义，该元素呈现“块”的特性

1. 每个块级元素独占一行，多个块级元素会另起一行，纵向排列
2. 可以设置width,height,margin,padding属性，如果不设置宽度，默认为width:100%

常见块级元素
div(及其相关语义化标签),h1~h6,p,ul,ol,li,form,table(及其表格相关标签)

二、行内元素

行内的翻译其实怪怪的，其特性可以根据“inline”原意理解

1. 行内元素不会独占一行，其会在水平方向依次放置形成布局，横向排列；当发生水平溢出时默认会换行
2. 不可设置width,height,纵向方向的margin和padding属性，其宽高会根据内部文本自动伸展

常见行内元素
a,span,strong,em,label,select,input,textarea

三、行内块元素

在平常开发中，行内元素由于不可设置宽高而非常不方便，导致时常需要在块级元素中包含行内元素才能实现布局效果，但有了行内块元素就可以省下这些功夫了，其同时取了行内元素和块元素的特点

1. 其排列方式同行内元素，为横向排列
2. 其属性设置同块元素，没有任何限制

默认元素中准确讲不存在行内块元素，但特例是部分替换元素在替换元素内容后同时拥有块元素和行内元素特性，与行内块元素一致
button,input,textarea,select,img

个人认为替换元素属于行内元素，其拥有块元素的特性是由于其暴露了宽高等样式的设置，从而可以设置其宽高等属性

课外补充

如果你已经熟悉三者元素的特性，那么恭喜你，你已经成功掌握CSS最原始的文档流布局！文档流布局 GET!
布局是CSS学习的一大重点，这是需要时常练习才能掌握的难点，而判断是否掌握的方法很简单，看你能否轻松实现各种页面的板块和能否只需看代码就能脑中想象出页面的样子