display none效果被覆蓋解決方案

最近作專案的時候做了乙個顯示和隱藏的側邊導航欄,使用到display:none的css屬性,但執行後審查元素發現樣式被覆蓋,於是想著是不是塊級元素的問題,但後來發現不是是因為bootstrap框架中帶有這樣類似的樣式:

.pull-right

.pull-left

.hide

.show

他們會覆蓋掉你的display,你需要自己在寫乙個類來用,然後也順便總結了一下display的屬性

display:none

它還可以用於二級下拉列表的製作中將二級下拉列表先設定位display:none;,當滑鼠滑過一級選單時，再顯示出來（詳見《如何實現導航選單中的二級下拉列表》）。還可以用於登陸模態框的製作等等。

display:block

使用了display：block;之後，此元素將顯示為塊級元素，此元素前後會帶有換行符。

塊級元素特點：

總是以乙個塊的形式表現出來，占領一整行。若干同級塊元素會從上之下依次排列（使用float屬性除外）。

可以設定高度、寬度、各個方向外補丁（margin）以及各個方向的內補丁（padding）。

當寬度（width）預設時，它的寬度時其容器的100%，除非我們給它設定了固定的寬度。

塊級元素中可以容納其他塊級元素或行內元素。

常見的塊級元素由p div h1 li等等。

塊級元素的display屬性值預設為block。

行內元素特點：

它不會單獨佔據一整行，而是只占領自身的寬度和高度所在的空間。若干同級行內元素會從左到右（即某個行內元素可以和其他行內元素共處一行），從上到下依次排列。

行內元素不可以設定高度、寬度，其高度一般由其字型的大小來決定，其寬度由內容的長度控制。

行內元素只能設定左右的margin值和左右的padding值，而不能設定上下的margin值和上下的padding值。因此我們可以通過設定左右的padding值來改變行內元素的寬度。

常見的行內元素由 a em img 等等。

行內元素一般不可以包含塊級元素。

塊級元素的display屬性值預設為inline。

通過對乙個行內元素設定display:　block;可以將行內元素設定為塊級元素，進而設定它的寬高和上下左右的padding和margin。

display:inline

此元素會被顯示為內聯元素，元素前後沒有換行符。在第二部分中，我們介紹了行內元素和塊級元素。顯然，display:inline的作用即可以將乙個塊級元素轉換成行內元素，那麼這個塊級元素將不能再設定寬和高以及上下方向的margin和padding。

display：inline-block

我們就可以才出來它是結合了inline和block的特性於一身。即設定了inline-block屬性的元素既具有block元素可以設定width和height屬性的特性，又保持了inline元素不換行的特性。

display:inherit

規定應該從父元素繼承 display 屬性的值。