块元素(block element)一般是其他元素的容器元素。
块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。
如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想 要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了 查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快 速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。
你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属 性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。
可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。
block元素的特点：
1. 总是另起一行开始；
2. 高度，行高以及顶、底边距都可控制；
3. 宽度缺省是它所在容器的100%，除非设定一个宽度。
inline元素的特点：
1. 和其它元素都在一行上；
2. 高度，行高以及顶、底边距不可改变；
3. 宽度就是它所容纳的文字或图片的宽度，不可改变。
说白了就是块元素是以行为单位，紧接它的下一个元素会另起一行，而在内联元素后面的元素则不会另起一行。
然后就是关于嵌套问题，块元素里可以嵌套内联元素，而内联元素却并不能随意嵌套块元素。例如<p>天空晴朗<div>不温不火</div>不睡懒觉<p>页面会用三行来显示，但这样写是错误的，W3C校验也无法通过。
最后，举一个p(段落)的例子，p本来是块元素，但是我们可以利用css将其变为内联元素。
1、
<body>
我爱
<p>旅行</p>
</body>
其显示效果如下：
我爱
旅行
2、
<style type="text/css"> p{ display: inline; } </style> <body> 我爱 <p>旅行</p> </body>
其显示效果如下：
我爱 旅行
