display 属性规定元素应该生成的框的类型，这个属性用于定义建立布局时元素生成的显示框类型。
首先来解释一下这三者分别是什么含义：
display：block 此元素将显示为块级元素，此元素前后会带有换行符。
display：inline 默认值，此元素会被显示为内联元素，元素前后没有换行符。
display：inline-block 行内块元素（CSS2.1 新增的值），意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内敛元素的增强。
注意：IE6 不支持inline-block！
再来说一下内联元素和块级元素的定义：
内联元素（行内元素）是不可以控制宽和高、margin等；并且在同一行显示，不换行，比如span、font、em、b、a、img等元素。
块级元素时可以控制宽和高、margin等，并且会换行，比如div、p、ul、li、p和所有的h类标签。
在具体的操作中，通常需要灵活运用这三个属性，以达到对项目设计的需求。
以具体代码为例:
<p>元素是块级元素，通过display：inline就将段落元素设置为了内联元素
<html>
<head>
<style type="text/css">
p {display: inline}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>
</body>
</html>
<span>元素本来是内联元素，通过display：block就将<span>元素设置成了块级元素
<html>
<head>
<style type="text/css">
span
{
display: block
}
</style>
</head>
<body>
<span>本例中的样式表把 span 元素设置为块级元素。</span>
<span>两个 span 元素之间产生了一个换行行为。</span>
</body>
</html>
总结：
(1)块里可以含行，也就是div块里可以有span，但是内联元素内不能包含块元素。
(3)内联存在margin-left和margin-right，但没有margin-top和margin-bottom，也不具有width/height，而块元素具有高,宽,margin等等。
(5) 内联元素可以通过改变它的display属性来变成块，来具有块的属性；同样，块元素同样可以变成内联元素。
注意：在实际运用过程中，还要注意浏览器的兼容问题！
843
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
