狂人日記學習 之九 div display : block 的妙用

來源:互聯網
上載者:User
先講講啥叫塊狀元素。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>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.