先講講啥叫塊狀元素。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>