第一部分：display:none

none這個值表示此元素將不被顯示。比如，當(dāng)我們在瀏覽網(wǎng)頁時，如果看到了某個煩人的廣告遮擋了我們的實現(xiàn)，更為可氣的是，它還沒有關(guān)閉的選項，這時（以chrome為例），我們就可以按下F12，打開開發(fā)者工具，點擊element，然后使用左上角的選擇工具選中想要刪除的廣告，可以看到element中會有高亮的一行或幾行代碼，右鍵，點擊Add Attribute，然后輸入：style="display:none"，這時就可以發(fā)現(xiàn)廣告不見啦！ 當(dāng)然display:none的用法絕不是專門用于這里的，它還可以用于二級下拉菜單的制作中將二級下拉菜單先設(shè)置位display:none;,當(dāng)鼠標(biāo)滑過一級菜單時，再顯示出來（詳見《如何實現(xiàn)導(dǎo)航菜單中的二級下拉菜單》）。還可以用于登陸模態(tài)框的制作等等。

 

第二部分：display:block

使用了display：block;之后， 此元素將顯示為塊級元素，此元素前后會帶有換行符。我們先來回顧以下塊級元素是什么，他有什么特點。

既然要區(qū)分塊級元素和行內(nèi)元素，就得先說說標(biāo)準(zhǔn)文檔流了。標(biāo)準(zhǔn)文檔流：簡稱標(biāo)準(zhǔn)流，指的是在不使用其他的與排列和定位相關(guān)的css規(guī)則時，各種元素的排列規(guī)則。于是，我們將“各種元素”分為塊級元素和行內(nèi)元素。（注：實際上還有空元素，如<br>用于換行，<hr>為一條水平線，這里對空元素不做過多討論）

塊級元素特點：

  • 總是以一個塊的形式表現(xiàn)出來，占領(lǐng)一整行。若干同級塊元素會從上之下依次排列（使用float屬性除外）。
  • 可以設(shè)置高度、寬度、各個方向外補(bǔ)?。╩argin）以及各個方向的內(nèi)補(bǔ)丁（padding）。
  • 當(dāng)寬度（width）缺省時，它的寬度時其容器的100%，除非我們給它設(shè)定了固定的寬度。
  • 塊級元素中可以容納其他塊級元素或行內(nèi)元素。
  • 常見的塊級元素由<p><div><h1><li>等等。
  • 塊級元素的display屬性值默認(rèn)為block。

行內(nèi)元素特點：