盒的基本类型
在CSS中,使用display属性来定义盒的类型。总体来说,CSS中的盒分为block类型与inline类型。例如,div元素与p元素属于block类型,span元素与a元素属于inline类型。
接下来,我们将block类型与inline类型做一个对比。用包含两个div元素与两个span元素。为了更容易辨别,我们将div元素的背景设定为绿色,将span元素的背景设定为橘色。从这个示例的运行结果我们可以看出,div元素所代表的block类型的元素的宽度占满了整个浏览器的宽度,而span元素所代表的inline类型的元素的宽度只等于其内容所在的宽度。另外,每一行中只允许容纳一个block类型的元素,但是可以并列容纳多个inline类型的元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>将block类型与inline类型进行对比的示例</title>
</head>
<style type="text/css">
div
{
background-color: #aaff00;
}
span
{
background-color: #ffaa00
}
</style>
<body>
<div>div元素</div>
<div>div元素</div>
<span>span元素</span>
<span>span元素</span>
</body>
</html>
在样式代码中如果使用display属性,可以将div元素与span元素的类型进行互换,将div元素变成inline类型的元素,将span元素变成block类型的元素:
<style type="text/css">
div{
background-color: #aaff00;
display:inline;
}
span
{ background-color: #ffaa00;
display:block;
}
</style>
inline-block类型概述
inline-block类型是在CSS 2.1中追加的一个盒类型。目前为止,它受到了Safari浏览器、Opera浏览器、Chrome浏览器、Firefox浏览器以及IE8以上版本浏览器的支持。
inline-block类型盒属于block类型盒的一种,但是在显示时具有inline类型盒的特点。例如,在div元素的样式代码中将display属性设定为“inline-block”,则div元素在显示时与将div元素的display属性设定为“inline”后的显示效果相同。
例如:具有四个div元素,其中两个被指定为inline-block类型,背景为浅蓝色;另外两个被指定为inline类型,背景为绿色。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/ht