---

元素顯示模式

什么是元素顯示模式

元素顯示模式就是元素（標(biāo)簽）以上面方式進(jìn)行顯示，比如div標(biāo)簽獨(dú)占一行，span標(biāo)簽可以在一行內(nèi)與其他元素共存。
網(wǎng)頁的標(biāo)簽非常多，都有各自的布局特點(diǎn)，但是總體而言，它們被分為三大類：行內(nèi)元素，塊級元素以及行內(nèi)塊元素。

---

塊級元素 block

常見的塊級元素有：<h1> -- <h6>，<p>，<ul>，<ol>，<li>，<div>等，其中div是最典型的塊級元素。
塊級元素的特點(diǎn)：

1.獨(dú)占一行
2.可以控制寬高，內(nèi)外邊距
3.寬度默認(rèn)值為父級元素的100%
4.內(nèi)部可以放其它行內(nèi)元素或塊級元素

注意：文字類的塊級元素，不能存放其它塊級元素，否則會發(fā)生錯誤。
示例：

我們將一個div放在了p內(nèi)部，在顯示上，div獨(dú)占一行，把上下的文字?jǐn)D到兩邊，綠色的盒子是p，紅色的區(qū)域是div，好像div在p的內(nèi)部。
但是當(dāng)我們打開調(diào)試會發(fā)現(xiàn)，瀏覽器自動為你的代碼添加了兩個p標(biāo)簽，即被我綠色框出來的p，這樣div就在p的外面了。
所以這種文字類的塊級元素內(nèi)部不能存放塊級元素。
同理h1 - h6也不可以放塊級元素。

---

行內(nèi)元素 inline

常見的行內(nèi)元素有：<a>，<strong>，<b>，<em>，<del>，<span>等，其中span是最典型的行內(nèi)元素。
行內(nèi)元素的特點(diǎn)：

1.一行內(nèi)可以放下多個行內(nèi)元素
2.無法設(shè)置寬高，設(shè)置了也無效
3.寬高由其內(nèi)容撐開
4.只能容納文本或者其它行內(nèi)元素

效果如下：

藍(lán)色區(qū)域就是這個行內(nèi)元素span的寬高，可以發(fā)現(xiàn)，直接設(shè)置的寬高是無效的，最終寬高由內(nèi)容決定。

注意：a標(biāo)簽內(nèi)部不能放a標(biāo)簽，但是a標(biāo)簽內(nèi)可以放塊級元素，是特殊的行內(nèi)元素。

---

行內(nèi)塊元素 inline-block

行內(nèi)塊元素，是前兩者的結(jié)合體，常見的行內(nèi)塊元素有：<img/>，<input/>，<td>等。

行內(nèi)塊元素特點(diǎn)：

1.一行內(nèi)可以有多個行內(nèi)塊元素
2.默認(rèn)寬度是其本身寬度（塊級的默認(rèn)快讀是父親的寬度）
3.可以控制寬高和內(nèi)外邊距

但是行內(nèi)塊元素的在同一行顯示，和行內(nèi)元素是略有區(qū)別的。
行內(nèi)塊元素在一行內(nèi)時，兩個元素之間會有一點(diǎn)空隙，而行內(nèi)元素則是緊緊挨著的。

---

元素顯示模式對比

元素模式	元素排列	設(shè)置樣式	默認(rèn)寬度	包含
塊級元素	一行只能放一個塊級元素	可以設(shè)置寬高	父級容器的100%	可以包含任何標(biāo)簽
行內(nèi)元素	一行可以放多個行內(nèi)元素	不可以直接設(shè)置寬高	由內(nèi)容撐開	只能容納文本或者其它行內(nèi)元素
行內(nèi)塊元素	一行可以放多個行內(nèi)塊元素	可以設(shè)置寬高	由內(nèi)容撐開	----

---

元素顯示模式轉(zhuǎn)換 display

CSS提供了一個屬性display，用于轉(zhuǎn)換元素的顯示模式：

屬性值	對應(yīng)元素
block	轉(zhuǎn)化為塊級元素
inline	轉(zhuǎn)化為行內(nèi)元素
inline-block	轉(zhuǎn)化為行內(nèi)塊元素

示例：

可以看到，經(jīng)過轉(zhuǎn)化后，span也可以獨(dú)占一行了。

---

背景

背景顏色 background-color

background-color定義了元素的背景顏色，其一般情況下是默認(rèn)值：background-color: transparent;此屬性值代表透明。

屬性值：背景顏色的屬性值有四種形式，分別為關(guān)鍵字形式，rgb形式，rgba形式，十六進(jìn)制形式：

表示方式	屬性值
關(guān)鍵字	red,green,blue等，直接指定顏色
rbg	rgb(255,255,255) 或 rgb(100%,100%,100%)
rbga	rgba(255,255,255,0.5)
十六進(jìn)制形式	#ffaabb

rgb形式
此處的rgb分別代表red，green，blue三種顏色，每個顏色的取值為0-255。然后將三種顏色按照比例混合，就得到了你的目標(biāo)顏色。比如rgb(50,100,150)，就是將紅色，綠色，藍(lán)色按照50 ： 100 ：150的比例混合得到的顏色。

rgba形式
相比于rgb形式，rgba形式多了一個a屬性，這里的a代表透明度，取值范圍為0-1。當(dāng)a取值為1，代表不透明；當(dāng)取值為0，代表完全透明。a值可以省略，省略是就是rgb形式，此時a默認(rèn)值為1。

十六進(jìn)制形式
16進(jìn)制，其實(shí)也是和rgb形式一致的，十六進(jìn)制的表示形式有六位值，其中每兩位表示一個顏色。比如#112233中，11代表red的比例，22代表green的比例，33代表blue的比例。
為什么可以這樣做呢？在rgb形式中，每個顏色的取值范圍是0-255，而兩位16進(jìn)制數(shù)字可以代表0-255的十進(jìn)制數(shù)字，所以從十六進(jìn)制的00-ff，剛好對應(yīng)0-255。所以十六進(jìn)制表示形式和rgb形式本質(zhì)上是一致的。

---

背景圖片 background-image

background-image屬性描述了背景圖像，實(shí)際開發(fā)常見于logo或者一些裝飾性的小圖片，以及超大的背景圖片，優(yōu)點(diǎn)是非常便于控制位置，而且不占用空間。
屬性值：

屬性值	作用
none	無背景圖片
url	指定背景圖片的路徑

---

背景平鋪 background-repeat

如果要在HTML頁面上對背景圖像進(jìn)行平鋪，可以用background-repeat屬性。
屬性值：

屬性值	作用
repeat	背景圖片在橫向和縱向平鋪（默認(rèn)值）
no-repeat	背景圖像不平鋪，只顯示一次
repeat-x	只在橫向平鋪
repeat-y	只在縱向平鋪

示例：
這是默認(rèn)情況下，在橫向和縱向同時平鋪：

這是no-repeat情況下，背景圖片只重復(fù)一次：

這是repeat-x，只在橫向平鋪：

這是repeat-y，只在縱向平鋪：

---

背景圖片位置 background-position

background-position可以改變圖片在背景中的位置，其有兩種參數(shù)模式：x軸和y軸的坐標(biāo)，方位名詞。
方位名詞包括：center，top，bottom，left，right。

參數(shù)是方位名詞情況下：

1.如果設(shè)置一個方位名詞，則第二個方位默認(rèn)居中
2.如果設(shè)置倆個方位名詞，則前后兩個值的順序無關(guān)，比如left top和top left的含義相同
3.top和bottom最多設(shè)置一個，left和right也最多顯示一個

示例：

如果參數(shù)是精確單位：

1.如果參數(shù)是精確坐標(biāo)，第一個屬性值一定是x坐標(biāo)，第二個一定是y坐標(biāo)
2.如果只指定一個坐標(biāo)值，則該值默認(rèn)為x坐標(biāo)，y值默認(rèn)居中。

---

背景附著 background-attachment

background-attachment可以設(shè)置背景圖像是否隨著頁面滾動。
屬性值：

屬性值	作用
scroll	背景圖像隨頁面滾動
fixed	背景圖像固定，不隨頁面滾動

fixed的效果如下：

---

背景復(fù)合寫法 background

為了簡化背景屬性的代碼，我們可以將這些屬性簡寫在同一個屬性background上。
當(dāng)使用簡寫屬性時，沒有固定的順序，但是一般習(xí)慣約定順序?yàn)?#xff1a;
background: 背景顏色 背景圖片 背景平鋪 背景附著 背景位置;

---