前端面試題3----display的值和作用

3.display的值和作用

display 的屬性值有：none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit

其中常用的的有none、inline、block、inline-block。分別的意思是：
1、none:元素不會顯示,而且改元素現實的空間也不會保留。但有另外一個 visibility: hidden, 是保留元素的空間的。
2、inline:display的預設屬性。將元素顯示為內聯元素，元素前後沒有換行符。我們知道內聯元素是無法設定寬高的，所以一旦將元素的display 屬性設為 inline， 設定屬性height和width是沒有用的。此時影響它的高度一般是內部元素的高度（font-size）和padding。
3、block:將元素將顯示為塊級元素，元素前後會帶有換行符。設定為block後，元素可以設定width和height了。元素獨佔一行。
4、inline-block：行內塊元素。這個屬性值融合了inline 和 block 的特性，即是它既是內聯元素，又可以設定width和height。

內聯元素和塊級元素的一些特點：
內聯元素：
和其他元素都在一行上；
元素的高度、寬度及頂部和底部邊距不可設定；
元素的寬度就是它包含的文字或圖片的寬度，不可改變。

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
塊級元素：
每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）；
元素的高度、寬度、行高以及頂和底邊距都可設定。
元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

常用的塊狀元素有：

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

內聯塊狀元素：
和其他元素都在一行上；
元素的高度、寬度、行高以及頂和底邊距都可設定。

常用的內聯塊狀元素有：

<img>、<input>