第一部分：display:none

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

 

第二部分：display:block

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

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

塊級元素特點：

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

行內元素特點：