一台电脑
vim或者其他的文本编辑器（IDE也行）
chrome、Firefox或者opera等主流浏览器
display属性有很多的属性值，其中最常见的类型是这三种：block, inline, 和 inline-block，这也是在开发中经常用到的类型，所以我们重点讲解这三种，其他的类型大家有兴趣可以去查询css的相关文档进一步了解和学习
block：是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以对它进行设置宽高。
inline：与block是相反的，它随着文档的文字流动（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效。
inline-box：它不会重新另起一行但会像行inline一样随着周围文字而流动，而且他能够设置宽高，不会在段落行中断开。
以下是具体的代码：HTML： 1 2
311 block：是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以对它进行设置宽高。 12 block：是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以对它进行设置 宽高。 13 block：是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以对它进行设置宽高。 14
15 1617 inline：与block是相反的，它随着文档的文字流动（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它> 的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效。 18 inline：与block是相反的，它随着文档的文字流动（例如：它将会和周围的文字和其他行内元> 素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效。 19 inline：与block是相反的，它随着文档的文字流动（例如：它将会和周围的文字和其他行内元素出现在同一行，而且> 它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效。 20
21 2223 inline-box：它不会重新另起一行但会像行inline一样随着周围文字而流动，而且他能够设置宽高，不会在段落行中断开 。 24 inline-box：它不会重新另起一行但会像行inline一样随着周围文字而流动，而且他能> 够设置宽高，不会在段落行中断开。 25 inline-box：它不会重新另起一行但会像行inline一样随着周围文字而流动，而且他能够设置宽高，不会在段落行中 断开。
26 27 CSS： 1 p{ 2 padding:1em; 3 border:1px solid black; 4 } 5 6 span{ 7 padding:0.5em; 8 border:1px solid green; 9 background-color:yellow; 10 } 11 12 .inline{ 13 display:inline; 14 } 15 16 .block{ 17 display:block; 18 } 19 20 .inline-block{ 21 display:inline-block; 22 } 23写完保存后，使用chrome（或者其他浏览器）打开index.html页面，就可以看到最终的效果了，当然大家也可以继续尝试修改，然后刷新浏览器看看效果变化
大家在刚开始学习css的时候，面对各种各样的属性和规则会感到一丝丝无从下手，查询文档时看官方给出的概念解释有点似懂非懂，看后就忘。所以我的建议是结合例子、亲手去尝试写css，然后查看效果，这样比较容易巩固记忆，活学活用。