CSS基础学习十四：盒子模型补充之display属性设置

我在 CSS基础学习十三：盒子模型的i博文只是阐释了CSS盒子模型，并没有过多的使用实例来演示。这篇博文就来做一些盒子模型知识的补充。这一部分对于网页总体布局还是蛮重要的，过去大多数使用HTML中的table元素和框架标签来进行网页的整体布局，现在我们使用最多的是DIV+CSS网页布局。所以一定要掌握好盒子模型，记住content，border，padding和margin各自在盒子中的作用和使用方式。

先来看一个完整元素的盒子模型实例：

<span style="font-size:18px;"><!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>CSS盒子模型演示</title>
<style type="text/css">
/*去掉浏览器缺省设置*/
body {
padding:0px;
margin:0px;
}
/*设置盒子的宽度和高度以及边框*/
div {
border:#FF0000 solid 2px;
width:300px;
height:200px;
}
#div_1 {
background-color:#00FF00;
padding:20px 50px;
}
#div_2 {
background-color:#0000FF;
margin:20px;
}
#div_3 {
background-color:#FF00FF;
}
</style>
</head>

<body>

<div id="div_1">第一个盒子</div>
<div id="div_2">第二个盒子</div>
<div id="div_3">第三个盒子</div>

</body>
</html></span>

运行的结果为：

我们会好奇哪些元素可以作为盒子模型？其实任何一个HTML标签都可以盒子！但是盒子的类型是有区别的，我们重点讨论这个问题，这就涉及到了display属性。

display属性：

设置元素的盒模型的类型，也就是行内元素和块级元素的类型。

经常可用的值：

none 不显示，隐藏

inline 内联元素(行内元素)

block 块级元素

inline-block 行内块级元素

我们先来回忆哪些是块级元素，行内元素

HTML标签分为两大类：

1，块级标签(元素)：一个完整的区块，区域。标签结束后都有换行。常用标签有：div p dl table ol ul title等。

2，行内标签(元素)：用于块级元素内，不能表示一个完整的区块，一个区块或者只是一行内的某一部分。标签结束后没有换行。常用标签有：font span img input select a等。

下面我们举例子来说明怎么使用display属性：

实例一：给div元素和span元素设置相同的宽度和高度：

<span style="font-size:18px;"><!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>CSS盒模型演示</title>
<style type="text/css">
div {
width:300px;
height:200px;
background-color:#0000FF;
}
span {
width:300px;
height:200px;
background-color:#FFFF00;
}
</style>
</head>

<body>
     <div>div区域</div>
     <hr/>
     <span>span区域</span>
</body>
</html></span>

运行的结果为：

看上述的结果一目了然，div区域显示宽度和高度，与文本内容的多少无关；而span区域不显示设置宽度和高度，文本内容有多少它就有多少的宽度和高度，这就说明了div元素和span元素的盒子类型不一样。

实例二：再增加一个span元素，设置同样的高度和宽度，再把它的display属性设置为：block

<span style="font-size:18px;"><!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>CSS盒模型演示</title>
<style type="text/css">
div {
width:300px;
height:200px;
background-color:#0000FF;
}
span {
width:300px;
height:200px;
background-color:#FFFF00;
}
#span_2 {
width:300px;
height:200px;
background-color:#FFFF00;
display:block;/*把span设置成块级元素*/
}
</style>
</head>

<body>
     <div>div区域</div>
     <hr/>
     <span id="span_1">span区域1</span>
     <hr/>
     <span id="span_2">span区域2</span>
</body>
</html></span>

运行的结果为：

这一次我们看到了不一样的两个span元素，因为第二个span元素它通过display属性设置为了块级元素，所以高度和宽度都显示了出来。

实例三：区别行内块级元素和块级元素

<span style="font-size:18px;"><!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>CSS盒模型演示</title>
<style type="text/css">
div {
width:300px;
height:200px;
background-color:#0000FF;
}
span {
width:300px;
height:200px;
background-color:#FFFF00;
}
#span_2 {
width:300px;
height:200px;
background-color:#FFFF00;
display:block;/*把span设置成块级元素*/
}
#span_3 {
width:300px;
height:200px;
background-color:#FFFF00;
display:inline-block;/*把span设置成行内块级元素*/
}
</style>
</head>

<body>
     <div>div区域</div>
	 <hr/>
	 <span id="span_1">span区域1</span>
	 <hr/>
	 <span id="span_2">span区域2</span>
	 <a>欢迎来到攻城课堂</a>
	  <hr/>
	 <span id="span_3">span区域3</span>
	 <a>欢迎来到攻城课堂</a>
</body>
</html></span>

运行的结果为：

行内块级元素还是处于一行，它的右侧还可以其他的元素；但是块级元素就不可以，第二个元素必须换行才能显示，这就是它们最直接的区别。

对于盒子模型的display属性暂时了解了这么多，如果有什么错误，会及时更正！！后续会学到更深层次的知识，回头来在进行补充。