我們發現div是獨自佔一行的,而多個span標籤才佔一行,這就是今天要講的顯示模式,就好比我們android中的是垂直還是豎直佈局,

在css中元素可以分為 塊級元素  行內元素  行內塊元素

塊級元素:每個塊級元素會獨自佔一行或者多行,可以設定寬  高  對齊屬性,常見的塊元素有<h1>...<h6> ,<p>,<div>,<ul> <ol> <li>等,其中div是最常見的塊級元素,其中塊級元素的寬度是預設容器的寬度,還有一個特點就是塊級元素內能巢狀其他行內元素

行內元素：也叫內聯元素,不佔有獨立的區域,僅僅靠自身的字型大小和內容或者影象大小來決定高度和寬度,一般不可以設定寬度,高度,對齊屬性,但是padding,marign是可以的,但是在垂直方向是無效的,常用於控制頁面中文字樣式，一般情況下行內元素只能放行內元素,不會放塊級元素

常見的行內元素有：<a>,<b>,<strong>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>，其中<span>是最典型的行內元素.

注意：

1:<p>,<h1>...<h6>不能放其他塊級元素

2:<a>不能放塊級元素

行內塊元素,也就是這個標籤既有塊元素特點也有行內元素特點,從這名字就可以看到出來,常見的行內塊元素有

<image>,<input>,<td> 可以對其設定寬  高   對齊屬性

行內塊元素特點:

1:和相鄰行內元素在一行上,但是元素之間有空隙

2:預設寬度就是內容的寬度

3:高度  行高  內邊距   外邊距 都可以控制

標籤的顯示模式是可以相互轉換的 使用display

1:塊轉行內元素 display:inline

2:行轉塊級元素 display:block

3:塊級元素  行內元素都可以轉換成行內塊元素  display:inline-block