萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS裡display的使用方法
CSS裡display的使用方法
display:block是將對象塊狀化
display:none
是不顯示Qu1:我經常看到有做一個層，然後裡面寫點什麼東西，然後就給它個屬性display:none,這樣這個東西就在網頁上看不見了，但為什麼還要建一個層呢，不是無謂的增加網頁大小麼？
An:1。可以用js讓它們顯示
2。可以在層內做個iframe,當作後台,無刷新處理數據
3。在層裡放一些圖片，讓浏覽器先緩存，打開這些圖片時會快一些
4。為了SEO，也就是搜索引擎優化，在隱藏的層裡適當的做些“關鍵詞”
等等...
可以用JS讓他們顯示出來這樣就能做出隱藏/顯示的切換效果……
document.getElementById("divname").display=false;
Q2 :如何理解display:inline-block屬性？
對所有的塊元素都沒有意義，塊元素的dispaly屬性默認值為block，沒必要再顯式定義——除非你之前對塊元素的display屬性重新定義過。===========================display：block；比較常用於<a><span>這兩個標簽——因為這兩個標簽非塊元素，如果不用display：block定義一下，那麼定義width、height等和長寬相關的css屬性時會發現完全不生效。你可以實際寫幾行簡單代碼感受一下。
===========================
是不是div裡就沒有必要寫display：block呢？通常情況下是沒有必要的。
常見的特殊情況：之前曾對div設置過display：hidden<a>標簽1</a><a>標簽2</a><a>標簽3</a>
a標簽本來就是內聯
這樣寫，他出來效果就是--------標簽1標簽2標簽3
但如果你想要定義寬度,不加塊狀是起不來作用的，都是單單加塊狀（display:block），他又換行了，所以這時加display:inline-block 就起到很大作用，內聯塊狀，寬度既能實現，又能不換行...
a{width:100px; display:inline-block}有時候解決ie6雙倍像素撐開，display:inline不夠用，也會用到這個屬性
dispaly默認屬性是none
block是塊！就是說占據浏覽器的一整行inline是內聯
舉個例子：
如果要做一個豎形的導航欄
<html>
<head>
<style type="text/css">
a {
display:block;
}
</style>
</head>
<body>
<a href="#">a</a>
<a href="#">b</a>
<a href="#">c</a>
<a href="#">d</a>
<a href="#">e</a>
<a href="#">f</a>
</body>
</html>
a屬性的默認屬性是inline 用display方法把a的默認屬性改為了block 第一個a占據一行display:none與visible:hidden的區別
display:none和visible:hidden都能把網頁上某個元素隱藏起來，但兩者有區別:
display:none ---不為被隱藏的對象保留其物理空間，即該對象在頁面上徹底消失，通俗來說就是看不見也摸不到。
visible:hidden--- 使對象在網頁上不可見，但該對象在網頁上所占的空間沒有改變，通俗來說就是看不見但摸得到。
例子：
<html>
<head>
<title>display:none和visible:hidden的區別</title>
</head>
<body >
<span style="display:none; background-color:Blue">隱藏區域</span><span style=" background-color:Green">顯示區域</span><br />
<span style="visibility:hidden; background-color:Blue">隱藏區域</span><span style="background-color:Green">顯示區域</span>
</body></html>
