在一般的CSS布局制作時(shí)候，我們常常會(huì)用到display對(duì)應(yīng)值有block、none、inline這三個(gè)值。下面我們來(lái)分別來(lái)認(rèn)識(shí)和學(xué)習(xí)什么時(shí)候用什么值。這里通過(guò)CSS display知識(shí)加實(shí)例、圖演示講解方法來(lái)學(xué)習(xí)和了解DIV CSS display。
1、CSS display使用
以下為DIV CSS運(yùn)用dispaly，說(shuō)明這里dispaly值任意
CSS代碼：
.divcss5{display:none}
Html對(duì)應(yīng)運(yùn)用：
<div class="divcss5">我是測(cè)試內(nèi)容</div>
根據(jù)以上可以自己DIV+CSS下，看看使用結(jié)果
2、display的值有哪些
Css display值與解釋-（詳細(xì)可見(jiàn)CSS手冊(cè)的CSS display手冊(cè)）
參數(shù)：
block :塊對(duì)象的默認(rèn)值。用該值為對(duì)象之后添加新行
none :隱藏對(duì)象。與visibility屬性的hidden值不同，其不為被隱藏的對(duì)象保留其物理空間
inline :內(nèi)聯(lián)對(duì)象的默認(rèn)值。用該值將從對(duì)象中刪除行
compact :分配對(duì)象為塊對(duì)象或基于內(nèi)容之上的內(nèi)聯(lián)對(duì)象
marker :指定內(nèi)容在容器對(duì)象之前或之后。要使用此參數(shù)，對(duì)象必須和:after及:before 偽元素一起使用
inline-table :將表格顯示為無(wú)前后換行的內(nèi)聯(lián)對(duì)象或內(nèi)聯(lián)容器
list-item :將塊對(duì)象指定為列表項(xiàng)目。并可以添加可選項(xiàng)目標(biāo)志
run-in :分配對(duì)象為塊對(duì)象或基于內(nèi)容之上的內(nèi)聯(lián)對(duì)象
table :將對(duì)象作為塊元素級(jí)的表格顯示
table-caption :將對(duì)象作為表格標(biāo)題顯示
table-cell :將對(duì)象作為表格單元格顯示
table-column :將對(duì)象作為表格列顯示
table-column-group :將對(duì)象作為表格列組顯示
table-header-group :將對(duì)象作為表格標(biāo)題組顯示
table-footer-group :將對(duì)象作為表格腳注組顯示
table-row :將對(duì)象作為表格行顯示
table-row-group :將對(duì)象作為表格行組顯示
3、css display block
Display:block是我們常用的，block也是Display默認(rèn)的值。
解釋：該對(duì)象隨后的內(nèi)容自動(dòng)換行。
css display block實(shí)例
CSS代碼：
.divcss5{display:block}
Html對(duì)應(yīng)運(yùn)用代碼：
<span class="divcss5">我的后面文字會(huì)換行</span>我是被前面的divcss5對(duì)應(yīng)CSS屬性換行。
<span>不會(huì)被換行,因?yàn)槲覜](méi)有被設(shè)置display:block</span>
說(shuō)明這里使用span作實(shí)例，一個(gè)被設(shè)置CSS樣式，一個(gè)未設(shè)置，自己可以對(duì)比被設(shè)置DIV display:block樣式的對(duì)象隨后的內(nèi)容被換行。
4、css display none
此display的none值，我們也常常使用，用于隱藏對(duì)象內(nèi)容，被隱藏的對(duì)象也不會(huì)占用自身固有寬度高度空間。
5、css display inline
Display:inline,我們常常在li中使用它。功能是讓li排成一排（稱：刪除行）。
接下來(lái)我們以一個(gè)未設(shè)置li列表與一個(gè)設(shè)置css Display inline樣式對(duì)比實(shí)例演示演示。
Css代碼
ul.divcss5 li{display:inline}
解釋：ul.divcss5對(duì)應(yīng)li css樣式屬性為display:inline
Html對(duì)應(yīng)代碼：
<ul>
< li>我父級(jí)ul沒(méi)有divcss5樣式</li>
< li>我是獨(dú)行</li>
< li>我是獨(dú)行</li>
< /ul>
<ul class="divcss5">
< li>我父級(jí)ul有divcss5樣式</li>
< li>我站成一排</li>
< li>我在divcss5下li站成一排</li>
< /ul>
說(shuō)明：設(shè)置css為display:inline的li對(duì)象，li被排成一排，而未設(shè)置的li列表對(duì)象仍然繼承原來(lái)自身獨(dú)占一行的CSS樣式。
以上是DIVCSS5為大家整理和展示的關(guān)于CSS display常用的屬性對(duì)應(yīng)display none、display inline、display block值的詳細(xì)講解與實(shí)例，希望對(duì)你有幫助。
渝公網(wǎng)安備 50024202000196號(hào)
域名注冊(cè)知識(shí)
虛擬主機(jī)知識(shí)
網(wǎng)站建設(shè)知識(shí)
網(wǎng)絡(luò)推廣知識(shí)
網(wǎng)絡(luò)營(yíng)銷知識(shí)
常見(jiàn)技術(shù)問(wèn)題
QQ空間
新浪微博
開(kāi)心網(wǎng)
人人網(wǎng)