先讲讲啥叫块状元素。html中元素是可以被分为块状元素和内联元素,块状元素的默认display属性为block,内联元素默认display属性为inline,内联元素有:

a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, var

basefont, font, s, u

块状元素有: address, blockquote, div, dl, fieldset, form, h1-h6, hr, noframes, noscript, ol, p, pre, table, ul center, dir, isindex, menu .

块状元素默认是占据一行的位置,下一个元素将被迫挤到下一行显示。内联元素则不是这样,内联元素会使得下一个元素自动贴到自己的有边显示,比如span,textbox。。。

书中提到的把某些内联元素作为块状元素显示,是出于其某些设计目的考虑。比如a元素。将a元素display:block后,它从内联元素成为了块状元素,然后就可以对这个元素设置margin,padding,border等属性了。参看这段导航条的设计:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#nav { 
  
}
#nav li{
 float:left; 
}
#nav li a{
 color:#000000;
 text-decoration:none;
 padding-top:4px;
 display:block;
 width:97px;
 height:22px;
 text-align:center;
 background-color:#ececec;
 margin-left:2px;
}
</style>

</head>

<body>
<ul id="nav">
<li><a href="#">首 页</a></li>
    <li><a href="#">文 章</a></li>
    <li><a href="#">参 考</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">论 坛</a></li>
    <li><a href="#">联 系</a></li>
</ul>

</body>
</html>