DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved