1、display屬性的值與作用

常用的值有none、inline、block、inline-block

none

1）表示該元素不會顯示，並且該元素的空間也不存在，可理解為已刪除；

2）visibility：hidden只是將元素隱藏，但不會改變頁面布局，但也不會觸發該元素已經綁定的事件；

3)opacity：0，將元素隱藏，不會改變頁面布局，但會觸發該元素綁定的事件。

inline

1）內聯元素，與其他元素在一行；

2）不可設置寬高；

3）margin-top與margin-bottom無效，但margin-left與margin-right有效；

4）padding-left與padding-right同樣有效，但是padding-top與padding-bottom不會影響元素高度，會影 響背景高度；

5）常見的有<a>、<span>、<br>、<i>、<em>、<strong>。

block

塊級元素，常見的有<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>

inline-block

1)行內塊元素，即是內聯元素，又可設置寬高以及行高及頂和底邊距；

2)常見的有<img>、<input>。

2.position屬性的值和作用

position屬性有四個可選值，分別為static、relative、absolute、fixed。

static

默認值，元素出現在正常的文檔流中，不會受left、top、right、bottom的影響。

relative

相對定位，相對自身位置定位，可通過設置left、top、right、bottom的值來設置位置；

並且它原本所占的空間不變，即不會影響其他元素布局；

經常被用來作絕對元素的容器塊。

absolute

絕對定位，相對於最近的除static定位以外的元素定位，若沒有，則相對於html定位；

脫離了文檔流，不占據文檔空間；

若設置absolute，但沒有設置top、left等值，其位置不變；

若設置absolute，會影響未定義寬度的塊級元素，使其變為包裹元素內容的寬度。

fixed

固定定位 相對於瀏覽器窗口定位，脫離文檔流，不會隨頁面滾動而變化。

1、relative。

定位為relative的元素脫離正常的文本流中，但其在文本流中的位置依然存在。如圖1：

黃色背景的層定位為relative，紅色邊框區域為其在正常流中的位置。在通過top、left對其定位後，從灰色背景層的位置可以看出其正常位置依然存在。

2、absolute。

定位為absolute的層脫離正常文本流，但與relative的區別是其在正常流中的位置不在存在。如圖2：

可以看到，在將黃色背景層定位為absolute後，灰色背景層自動補上。

3、relative與absolute的主要區別：

首先，是上面已經提到過的在正常流中的位置存在與否。

其次，relative定位的層總是相對於其最近的父元素，無論其父元素是何種定位方式。

display和position的值與用途