css中實現顯示和隱藏

CSS中的display和visibility       在平時的開發過程中，總是會遇到一些文字在特定的場景下顯示或者隱藏來達到我們想要的效果，css中display和visibility語法，他們都可以隱藏和顯示html元素。看起來貌似一樣，但是他們還是有一定的區別的。      首先先來看一下display和visibility的屬性      display屬性設置元素的顯示方式，對應腳本特性為display，可選值為none、block和inline，各值的說明如下：      none 隱藏元素，不保留元素顯示時的空間。      block塊方式顯示元素。      inline 以內嵌方式顯示元素。      visibility屬性設置是否顯示元素，對應的腳本特性為visibility，可選值為inherit、hidden和visible，各值的說明如下：      inherit 繼承父元素的visibility屬性設置。      hidden 隱藏元素，但保留其所占空間。      visible 顯示元素(默認值)。 
    使用的時候的說明：     display:none;時隱藏該html元素，確切的說，是在瀏覽器中消除該元素，不占屏幕的空間。若其下有其他元素，就會上移到該空間區域。      dispaly:block;顯示已經隱藏的html元素，如果別的元素占有了該空間時，他將下移，空間重新別原來的元素占有。       visibility:hidden;隱藏該元素，真正的隱藏，但他還占有那塊空間。       visibility:visible;讓元素顯示.  下面寫了一個簡單的例子，看一下效果：


將第二行隱藏後依然占據著原來的位置，將第四行隱藏後，不占據原來的位置。