棟棟曉05：詳解css佈局中的display屬性（行內元素和塊級元素）

display屬性是我們寫css代碼，做css佈局經常會用到的屬性，把display用熟練了，寫起css佈局得心應手。

首先，所有主流瀏覽器都支持 display 屬性。其次，我們都知道display 屬性規定元素應該生成的框的類型。默認值：inline

我們常用的display屬性值有：

• inline
• block
• inline-block
• none

下面我就詳細講講有關display的知識點：
NO.1： display:none和visibility:hidden的區別

CSS display:none;
使用該屬性後，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;
visibility:hidden;
使用該屬性後，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。

NO.2:display:inline、display:block和display:inline-block有什麼區別呢?

1. inline特性
   　常用的inline就是文字和圖片，而且給它設置屬性height和width是沒有用的，inline不單獨佔一行，其它元素會緊跟其後。“`

   如何把inline元素轉換成“塊”元素？可用display:block，這樣就可以添加寬高了。（display:table也可以使其變成塊元素）

2. block特性

   塊對象block是可以設置寬高的，block要單獨佔一行。

   然而，當我們即需要div有寬高，又不希望它獨佔一行怎麼辦？往下看。

3. inline-block特性

   這個時候我們就需要使用inline-block了，

   inline-block既具有block的寬高特性又具有inline的同行元素特性。
   也就是說，當我們想要讓一個元素既不獨佔一行，又可以設置其寬高屬性的時候，我們就可以選擇inline-block了。

   在IE6/7下padding對inline的寬高是對其沒影響的。

總結：

行內元素特點

1、和其他元素都在一行上；

2、元素的高度、寬度、行高及頂部和底部邊距不可設置；

3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。 

塊級元素特點

1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）

2、元素的高度、寬度、行高以及頂和底邊距都可設置。

3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

常見的塊狀元素有：

<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,
<address>,<blockquote>,<form>

常見的內聯元素有：

<a>,<span>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>,
<img>,<input>,<select>,<textarea>,<button>

以下來源於別人的博客總結：

常用display
1、div{display:block} 有換行作用。
案例：圖片做背景，隱藏圖片上文字http://www.divcss5.com/jiqiao/j55.shtml
2、div{display:None } 隱藏對象及對象內容。
案例：CSS隱藏HTML內容 http://www.divcss5.com/jiqiao/j55.shtml
3、div{display:Inline } 在一排顯示。
代表案例，對li列表默認一排顯示li{display:Inline }