display屬性是我們在前端開發中常常使用的一個屬性，其中，最常見的有：
none
inline
block
inline-block
了解display屬性必須知道幾個重要的基本知識：塊級元素和行內元素。（注：實際上還有空元素，如<br>用於換行，
<hr>為一條水平線）
塊級元素特點：
- 總是以一個塊的形式表現出來，占領一整行。若干同級塊元素會從上之下依次排列（使用float屬性除外）。
- 可以設置高度、寬度、各個方向外邊距（margin）以及各個方向的內邊距（padding）。
- 當寬度（width）缺省時，它的寬度時其容器的100%，除非我們給它設定了固定的寬度。
- 塊級元素中可以容納其他塊級元素或行內元素。
- 常見的塊級元素由<p><div><h1><li>等等。
- 塊級元素的display屬性值默認為block。
行內元素特點：
- 它不會單獨占據一整行，而是只占領自身的寬度和高度所在的空間。若干同級行內元素會從左到右（即某個行
內元素可以和其他行內元素共處一行），從上到下依次排列。
- 行內元素不可以設置高度、寬度，其高度一般由其字體的大小來決定，其寬度由內容的長度控制。
- 行內元素只能設置左右的margin值和左右的padding值，而不能設置上下的margin值和上下的padding值。因此我
們可以通過設置左右的padding值來改變行內元素的寬度。
- 常見的行內元素由<a><em><img>等等。
- 行內元素一般不可以包含塊級元素。
- 塊級元素的display屬性值默認為inline。
1.display:none；這個值表示此元素將不被顯示。
2.使用了display：block;之后， 此元素將顯示為塊級元素，此元素前后會帶有換行符。
通過對一個行內元素設置display: block;可以將行內元素設置為塊級元素，進而設置它的寬高和上下左右的padding和margin。
我們經常會制作導航欄，這時就要使用ul li 和a組合的方式，但是<a>是行內元素，我們無法設置它的寬和高，這時，就可以在<a>
的樣式表中，將之設置為display：block。這樣就可以設置它的寬和高，以及上下左右的margin和padding以達到我們想要的效果了。
<
style
>
*{padding: 0;margin:0;list-style: none;}
ul li{float: left;}
a{display:block;width: 30px;height: 30px;background: yellow;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;}
</
style
>
</
head
>
<
body
>
<
ul
>
<
li
><
a
href="">1</
a
></
li
>
<
li
><
a
href="">2</
a
></
li
>
<
li
><
a
href="">3</
a
></
li
>
<
li
><
a
href="">4</
a
></
li
>
<
li
><
a
href="">5</
a
></
li
>
</
ul
>
</
body
>
效果如下：
3.display:inline
此元素會被顯示為內聯元素，元素前后沒有換行符。在第二部分中，我們介紹了行內元素和塊級元素。顯然，display:inline的作用即
可以將一個塊級元素轉換成行內元素，那么這個塊級元素將不能再設置寬和高以及上下方向的margin和padding。
4.
display：inline-block
display:inline-block是行內塊元素，大家對這個屬性一定是不陌生的。根據名字，實際上我們就可以才出來它是結合了inline和block的特性於一身。
即設置了inline-block屬性的元素既具有block元素可以設置width和height屬性的特性，又保持了inline元素不換行的特性。
我們之前在做橫向導航菜單的時候，一般是用ul li a組合，然后將li設置為float，這樣就可以得到橫向的導航標簽了。而現在我們可以通過li和display:inline-block;來實現。
<
style
>
ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}
li{display: inline-block;border: thin solid red;}
</
style
>
</
head
>
<
body
>
<
ul
>
<
li
><
a
href="">1</
a
></
li
>
<
li
><
a
href="">2</
a
></
li
>
<
li
><
a
href="">3</
a
></
li
>
<
li
><
a
href="">4</
a
></
li
>
<
li
><
a
href="">5</
a
></
li
>
</
ul
>
效果圖如下：
