CSS里display的使用方法

2024-07-11 09:00:59

字體：大中小

供稿：網(wǎng)友

display:block是將對(duì)象塊狀化

display:none
是不顯示
Qu1:我經(jīng)常看到有做一個(gè)層，然后里面寫點(diǎn)什么東西，然后就給它個(gè)屬性display:none,這樣這個(gè)東西就在網(wǎng)頁(yè)上看不見了，但為什么還要建一個(gè)層呢，不是無謂的增加網(wǎng)頁(yè)大小么？
An:1。可以用js讓它們顯示
2。可以在層內(nèi)做個(gè)iframe,當(dāng)作后臺(tái),無刷新處理數(shù)據(jù)
3。在層里放一些圖片，讓瀏覽器先緩存，打開這些圖片時(shí)會(huì)快一些
4。為了SEO，也就是搜索引擎優(yōu)化，在隱藏的層里適當(dāng)?shù)淖鲂?ldquo;關(guān)鍵詞”
等等...
可以用JS讓他們顯示出來
這樣就能做出隱藏/顯示的切換效果……
document.getElementById("divname").display=false;

Q2 :如何理解display:inline-block屬性？
對(duì)所有的塊元素都沒有意義，塊元素的dispaly屬性默認(rèn)值為block，沒必要再顯式定義——除非你之前對(duì)塊元素的display屬性重新定義過。===========================
display：block；比較常用于<a>這兩個(gè)標(biāo)簽——因?yàn)檫@兩個(gè)標(biāo)簽非塊元素，如果不用display：block定義一下，那么定義width、height等和長(zhǎng)寬相關(guān)的css屬性時(shí)會(huì)發(fā)現(xiàn)完全不生效。你可以實(shí)際寫幾行簡(jiǎn)單代碼感受一下。
===========================
是不是div里就沒有必要寫display：block呢？通常情況下是沒有必要的。
常見的特殊情況：之前曾對(duì)div設(shè)置過display：hidden
<a>標(biāo)簽1</a><a>標(biāo)簽2</a><a>標(biāo)簽3</a>
a標(biāo)簽本來就是內(nèi)聯(lián)
這樣寫，他出來效果就是--------標(biāo)簽1標(biāo)簽2標(biāo)簽3
但如果你想要定義寬度,不加塊狀是起不來作用的，都是單單加塊狀（display:block），他又換行了，所以這時(shí)加display:inline-block 就起到很大作用，內(nèi)聯(lián)塊狀，寬度既能實(shí)現(xiàn)，又能不換行...
a{width:100px; display:inline-block}
有時(shí)候解決ie6雙倍像素?fù)伍_，display:inline不夠用，也會(huì)用到這個(gè)屬性
dispaly默認(rèn)屬性是none
block是塊！就是說占據(jù)瀏覽器的一整行
inline是內(nèi)聯(lián)
舉個(gè)例子：
如果要做一個(gè)豎形的導(dǎo)航欄
<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屬性的默認(rèn)屬性是inline 用display方法把a(bǔ)的默認(rèn)屬性改為了block 第一個(gè)a占據(jù)一行
display:none與visible:hidden的區(qū)別
display:none和visible:hidden都能把網(wǎng)頁(yè)上某個(gè)元素隱藏起來，但兩者有區(qū)別:
display:none ---不為被隱藏的對(duì)象保留其物理空間，即該對(duì)象在頁(yè)面上徹底消失，通俗來說就是看不見也摸不到。
visible:hidden--- 使對(duì)象在網(wǎng)頁(yè)上不可見，但該對(duì)象在網(wǎng)頁(yè)上所占的空間沒有改變，通俗來說就是看不見但摸得到。
例子：
<html>
<head>
<title>display:none和visible:hidden的區(qū)別</title>
</head>
<body >
隱藏區(qū)域顯示區(qū)域 
隱藏區(qū)域顯示區(qū)域
</body>
</html>