HTML组件中呈现一片空白区域的组件都可当成盒模型（box model），比如<div.../>元素、<span.../>、<section.../>等元素。而CSS则提供了display属性来控制盒模型的外观。

两种最基本的盒模型

　　就最基本的盒模型组件来说，HTML组件的盒模型可分为两种。
　　➢　block类型：这种盒模型的组件默认占据一行，允许通过CSS设置宽度、高度。例如<div.../>、<p.../>元素。
　　➢　inline类型：这种盒模型的组件不会占据一行（默认允许在一行放置多个组件），即使通过CSS设置宽度、高度也不会起作用。例如<span.../>、<a.../>元素。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 基础盒模型 </title>
    <style type="text/css">
        div,span{
            width: 300px;
            height: 40px;
            border: 1px solid black;
        }
    </style>
</head>  
<body>  
<div>div元素一</div>  
<div>div元素二</div>  
<span>span元素一</span>  
<span>span元素二</span>  
</body>  
</html>
结果

　　上面页面中定义了两个<div.../>元素和两个<span.../>元素，页面的CSS代码设置了<div....>、<span.../>元素的高度为40px，宽度为300px。但由于<span.../>元素默认是inline盒模型，因此设置的高度、宽度对它不起作用。

改变默认的盒模型

　　CSS为display属性提供了block、inline两个属性值，用于改变HTML组件默认的盒模型。例如，将上面页面的CSS样式部分改为如下形式。　　

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 基础盒模型 </title>
    <style type="text/css">
        div,span{
            width: 300px;
            height: 40px;
            border: 1px solid black;
        }
        /* 将div元素改为inline盒模型 */
        body>div{
            display:inline;
        }
        /* 将span元素改为block盒模型 */
        body>span{
            display:block;
        }
    </style>
</head>  
<body>  
<div>div元素一</div>  
<div>div元素二</div>  
<span>span元素一</span>  
<span>span元素二</span>  
</body>  
</html>

none值

　　display属性可指定为none值，用于设置目标对象隐藏，一旦该对象隐藏，其占用的页面空间也会释放。与此类似的还有visibility属性，该属性也可用于设置目标对象是否显示。与display属性不同，当通过visibility隐藏某个HTML元素后，该元素占用的页面空间依然会被保留。visibility属性的两个常用值为visible和hidden，分别用于控制目标对象的显示和隐藏。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 隐藏元素 </title>
    <style type="text/css">
    /* 设置div元素的宽度、高度、背景色和边框 */
    div{
        width:300px;
        height:40px;
        background-color:#ddd;
        border:2px solid black;
    }
    </style>
</head>  
<body>  
<input type="button" value="隐藏"  
    onclick="document.getElementById('test1').style.display='none';"/>
<input type="button" value="显示"  
    onclick="document.getElementById('test1').style.display='';"/>
<div id = "test1">  
使用display控制对象的显示和隐藏
</div>  
<input type="button" value="隐藏"  
    onclick="document.getElementById('test2').style.visibility ='hidden'"/>
<input type="button" value="显示"  
    onclick="document.getElementById('test2').style.visibility ='visible'"/>
<div id = "test2">  
使用visibility控制对象的显示和隐藏
</div>  
<hr/>  
</body>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。