欧美激情网,国产欧美亚洲高清,欧美屁股xxxxx,欧美群妇大交群,欧美人与物ⅴideos另类,区二区三区在线 | 欧洲

知識學(xué)堂
  • ·聯(lián)系電話:+86.023-75585550
  • ·聯(lián)系傳真:+86.023-75585550
  • ·24小時手機(jī):13896886023
  • ·QQ 咨 詢：361652718 513960520
當(dāng)前位置 > 首頁 > 知識學(xué)堂 > 網(wǎng)站建設(shè)知識
CSS學(xué)習(xí)教程:display屬性使用詳細(xì)講解
更新時間：2012-05-20 | 發(fā)布人：本站 | 點擊率：697 次

在一般的CSS布局制作時候，我們常常會用到display對應(yīng)值有block、none、inline這三個值。下面我們來分別來認(rèn)識和學(xué)習(xí)什么時候用什么值。這里通過CSS display知識加實例、圖演示講解方法來學(xué)習(xí)和了解DIV CSS display。

1、CSS display使用

以下為DIV CSS運用dispaly，說明這里dispaly值任意
CSS代碼：
.divcss5{display:none}
Html對應(yīng)運用：
<div class="divcss5">我是測試內(nèi)容</div>
根據(jù)以上可以自己DIV+CSS下，看看使用結(jié)果

2、display的值有哪些

Css display值與解釋-（詳細(xì)可見CSS手冊的CSS display手冊）
參數(shù)：

block :塊對象的默認(rèn)值。用該值為對象之后添加新行
none :隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline :內(nèi)聯(lián)對象的默認(rèn)值。用該值將從對象中刪除行
compact :分配對象為塊對象或基于內(nèi)容之上的內(nèi)聯(lián)對象
marker :指定內(nèi)容在容器對象之前或之后。要使用此參數(shù)，對象必須和:after及:before 偽元素一起使用
inline-table :將表格顯示為無前后換行的內(nèi)聯(lián)對象或內(nèi)聯(lián)容器
list-item :將塊對象指定為列表項目。并可以添加可選項目標(biāo)志
run-in :分配對象為塊對象或基于內(nèi)容之上的內(nèi)聯(lián)對象
table :將對象作為塊元素級的表格顯示
table-caption :將對象作為表格標(biāo)題顯示
table-cell :將對象作為表格單元格顯示
table-column :將對象作為表格列顯示
table-column-group :將對象作為表格列組顯示
table-header-group :將對象作為表格標(biāo)題組顯示
table-footer-group :將對象作為表格腳注組顯示
table-row :將對象作為表格行顯示
table-row-group :將對象作為表格行組顯示

3、css display block

Display:block是我們常用的，block也是Display默認(rèn)的值。
解釋：該對象隨后的內(nèi)容自動換行。
css display block實例
CSS代碼：
.divcss5{display:block}

Html對應(yīng)運用代碼：
<span class="divcss5">我的后面文字會換行</span>我是被前面的divcss5對應(yīng)CSS屬性換行。
<span>不會被換行,因為我沒有被設(shè)置display:block</span>

說明這里使用span作實例，一個被設(shè)置CSS樣式，一個未設(shè)置，自己可以對比被設(shè)置DIV display:block樣式的對象隨后的內(nèi)容被換行。

4、css display none

此display的none值，我們也常常使用，用于隱藏對象內(nèi)容，被隱藏的對象也不會占用自身固有寬度高度空間。

5、css display inline

Display:inline,我們常常在li中使用它。功能是讓li排成一排（稱：刪除行）。
接下來我們以一個未設(shè)置li列表與一個設(shè)置css Display inline樣式對比實例演示演示。

Css代碼
ul.divcss5 li{display:inline}
解釋：ul.divcss5對應(yīng)li css樣式屬性為display:inline

Html對應(yīng)代碼：
<ul>
< li>我父級ul沒有divcss5樣式</li>
< li>我是獨行</li>
< li>我是獨行</li>
< /ul>

<ul class="divcss5">
< li>我父級ul有divcss5樣式</li>
< li>我站成一排</li>
< li>我在divcss5下li站成一排</li>
< /ul>

說明：設(shè)置css為display:inline的li對象，li被排成一排，而未設(shè)置的li列表對象仍然繼承原來自身獨占一行的CSS樣式。

以上是DIVCSS5為大家整理和展示的關(guān)于CSS display常用的屬性對應(yīng)display none、display inline、display block值的詳細(xì)講解與實例，希望對你有幫助。

相關(guān)文章