内联元素是不可以控制宽和高、margin等；并且在同一行显示，不换行。
块级元素时可以控制宽和高、margin等，并且会换行。
inline：使用此属性后，元素会被显示为内联元素，元素则不会换行。
block：使用此属性后，元素会被现实为块级元素，元素会进行换行。
inline-block：是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内敛元素的增强。
要注意的是IE6 不支持inline-block
1.inline是行内元素，同行可以显示，像span、font、em、b这些默认都是行内元素，不会换行，无法设置宽度、高度、margin、border2.block，块元素，div、p、ul、li等这些默认都是块元素，会换行，除非设置float
3.inline-block，可以同行显示的block，想input、img这些默认就是inline-block，出了可以同行显示，其他基本block一样，但是inline-block兼容性很差，要用需要写hack
inline-block的hack如下：
display: -moz-inline-stack火狐2hack
display: inline-block
vertical-align: top撑出盒子的bug修复
zoom: 1后面两行IE7hack
*display: inline
使用例子 ul li{ display: -moz-inline-stackdisplay: inline-blockvertical-align: topzoom: 1*display: inline}
inline-block有个好处，就是div设置浮动只能实现居左，或者居右，而inline-block可以通过上级容器设置text-align:center实现块元素居中
1、新建一个html页面，文件名为test.html，用于实现操作div元素的功能。
2、在html页面中加载jquery.min.js文件。
3、在html页面新建一个div元素，并给它一个class类名red。
4、为了实现点击后有明显的效果，通过CSS定义class="red"的div的背景颜色为红色，同时定义类名为black时，背景颜色为黑色。
5、在div元素中增加一个onclick点击事件，当onclick点击事件触发时，执行change_color（）方法，此方法主要用于改变div的class。
6、运行代码，在浏览器中查看结果。
注意事项：
atom支持CSS，HTML，JavaScript等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。通过丰富的插件机制可以完成各种语言开发, 常用于web 开发, 也可用于 php 等后端开发.
