CSS里display的使用方法

2024-07-11 09:00:59

字體：大中小

來源：轉載

供稿：網友

display:block是將對象塊狀化

display:none
是不顯示
Qu1:我經常看到有做一個層，然后里面寫點什么東西，然后就給它個屬性display:none,這樣這個東西就在網頁上看不見了，但為什么還要建一個層呢，不是無謂的增加網頁大小么？
An:1?？梢杂胘s讓它們顯示
2?？梢栽趯觾茸鰝€iframe,當作后臺,無刷新處理數據
3。在層里放一些圖片，讓瀏覽器先緩存，打開這些圖片時會快一些
4。為了SEO，也就是搜索引擎優化，在隱藏的層里適當的做些“關鍵詞”
等等...
可以用JS讓他們顯示出來
這樣就能做出隱藏/顯示的切換效果……
document.getElementById("divname").display=false;

Q2 :如何理解display:inline-block屬性？
對所有的塊元素都沒有意義，塊元素的dispaly屬性默認值為block，沒必要再顯式定義——除非你之前對塊元素的display屬性重新定義過。===========================
display：block；比較常用于<a>這兩個標簽——因為這兩個標簽非塊元素，如果不用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 >
隱藏區域顯示區域 
隱藏區域顯示區域
</body>
</html>