在标准文档流里面，块级元素具有以下特点：
1、总是在新行上开始，占据一整行；
2、高度，行高以及外边距和内边距都可控制；
3、宽带始终是与浏览器宽度一样，与内容无关；
4、它可以容纳内联元素和其他块元素。
5、浮动后的元素相当于inline-block.
①和其他元素都在一行上；
②高，行高及外边距和内边距部分可改变；
③宽高只与内容有关；
④行内元素只能容纳文本或者其他行内元素。
1、总是在新行上开始，占据一整行；
2、高度，行高以及外边距和内边距都可控制；
3、宽带始终是与浏览器宽度一样，与内容无关；
4、它可以容纳内联元素和其他块元素。
5、浮动后的元素相当于inline-block.
行内元素的特点：
①和其他元素都在一行上；
②高，行高及外边距和内边距部分可改变；
③宽高只与内容有关；
④行内元素只能容纳文本或者其他行内元素。
不可以设置宽和高，其宽高度随着内容增加，字体大小而改变，内联元素可以设置内外边界，但是内边界和外边界不对上下起作用，只能对左右起作用。
要设置行内元素的宽和高有两种方法：
一、变成块级元素：display:block;
二、对span成功设置宽度和高度同时与前后内容紧贴不换行,在css2.1标准中为display增加了一个叫inline-block的属性值，刚好可以实现即是inline对象，又可以像block那样设置宽度的属性值，这个属性值在ie6以上版本都有效，firefox要在3.0以后才行，如果要兼容2.0的朋友可以使用-moz-inline-box达到同样的效果。
例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>span宽度高度解决案例</title>
<style>
.divcss5{
width:150px;height:100px;
border:1px solid #000;
display:-moz-inline-box; /* css注释：for ff2 */
display:inline-block;
}
</style>
</head>
<!--只要span标签同行前或者后有内容，不设置inline-block也行-->
<body>
divcss5 span上<span class="divcss5">我在SPAN标签内</span>span外
</body>
</html>
123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
