DIV CSS display (block,none,inline)

DIV CSS display (block none inline)屬性的用法

在一般的CSS布局製作時候，我們常常會用到display對應值有block、none、inline這三個值。下面我們來分別來認識和學習什麼時候用什麼值。這裡通過CSS display知識加執行個體、圖示範講解方法來學習和瞭解DIV CSS display。

目錄 CSS display使用 display的值有哪些 css display block css display none css display inline

1、CSS display使用

以下為DIV CSS運用dispaly

CSS代碼：

.divcss{display:none}

Html對應運用：

<div class="divcss">我是測試內容</div>

2、display的值有哪些

Css display值與解釋

參數：

block :塊對象的預設值。用該值為對象之後添加新行。之前也添加一行。

none :隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間

inline :內聯對象的預設值。用該值將從對象中刪除行。如果其前後都是inline的則在同一行

compact :指派至為塊對象或基於內容之上的內聯對象

marker :指定內容在容器物件之前或之後。要使用此參數，對象必須和:after及:before 虛擬元素一起使用

inline-table :將表格顯示為無前後換行的內聯對象或內聯容器
list-item :將塊對象指定為清單項目。並可以添加可選項目標誌
run-in :指派至為塊對象或基於內容之上的內聯對象
table :將對象作為塊元素級的表格顯示
table-caption :將對象作為表格標題顯示
table-cell :將對象作為表格儲存格顯示
table-column :將對象作為表格列顯示
table-column-group :將對象作為表格列組顯示
table-header-group :將對象作為表格標題組顯示
table-footer-group :將對象作為表格腳註組顯示
table-row :將對象作為表格行顯示
table-row-group :將對象作為表格行組顯示

3、css display:block

Display:block是我們常用的，block也是Display預設的值。

block元素(即預設display:block)的特點是： 

· 總是在新行上開始；

· 該對象隨後的內容自動換行;

· 高度，行高以及頂和底邊距都可控制；

· 寬度預設是它的容器的100%，除非設定一個寬度

<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。(意思是他們預設顯示方式是block)

執行個體1.

CSS代碼：

.divcss{display:block}

Html對應運用代碼：

<span class="divcss">我的後面文字會換行</span>我是被前面的divcss對應CSS屬性換行。<span>不會被換行,因為我沒有被設定display:block</span>

對應結果:

執行個體2.

<div style="width:200px;margin:0;background-color:#CCCCCC"><p style="display:block;margin:0;">the first line</p><p style="display:block;margin:0;width:40%">the second line</p><div style="margin-top:2px;margin-bottom:2px;margin-left:10px;margin-right:10px;height:20px;">test div</div></div>

可以看出這就是三行，可以看出寬度預設設定成其容器的100%，也可以設定成其他百分比。

4、css display:none

此display的none值，我們也常常使用，用於隱藏對象內容，被隱藏的對象也不會佔用自身固有寬度高度空間。

例如在導航條的二級菜單中就會使用此屬性顯示和隱藏二級菜單。

5、css display:inline

Display:inline,我們常常在li中使用它。功能是讓li排成一排（稱：刪除行）。

接下來我們以一個未設定li列表與一個設定css Display inline樣式對比執行個體示範示範。

CSS代碼

ul.divcss li{display:inline}

解釋：ul.divcss對應li CSS樣式屬性為display:inline

inline元素(即預設display:inline)的特點是：

· 和其他元素都在一行上；

· 高，行高及頂和底邊距不可改變；

· 寬度就是它的文字或圖片的寬度，不可改變。

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子

Html對應代碼：

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

示範結果圖：

說明：設定css為display:inline的li對象，li被排成一排，而未設定的li列表對象仍然繼承原來自身獨佔一行的CSS樣式.

inline和block可以控制一個元素的行寬高等特性，需要切換的情況如下：

1. 讓一個inline元素從新行開始；

將需要新開一行的元素的display設定成block.

2. 讓塊元素和其他元素保持在一行上；

將塊元素的display的屬性設定成inline.

3. 控制inline元素的寬度（對導航條特別有用）；

4. 控制inline元素的高度；