CSS的一些常見樣式(二)——背景，inline block，行高，兩種盒模型及元素不可見

一，背景(background)

• background的經常使用樣式有： 1.background-color：設置背景顏色； 2.background-image：添加背景圖片； 3.background-position：設置背景圖片的位置； 4.background-repeat：設置背景圖片的重複值； 5.background-size：設置背景圖片的大小尺寸； 6.background-attachment：設置背景是否隨元素的滾動而產生的動態；（用的不多）

• 經常使用樣式的經常使用值 1.background-color：① 英文名：red；② 十六位進制顏色：#000；③rgba（0，0，0，0）； 2.background-image：url(圖片地址或路徑)； 3.background-position：① 數值偏移量（px爲單位）：x y；② 百分比偏移量： x% y%； ③ 橫座標和縱座標的固定值：[top | center | botom] [left | center | right]； 4.background-repeat：① 不重複：no-repeat；② X軸重複：repeat-x；③ Y軸重複：repeat-y； ④ X和Y軸都重複：repeat； 5.background-size： ① 直接寫寬高：20px 20px； ② contain：調整背景圖片的寬度或高度（較大者），使背景圖片徹底包含在元素中； ③ cover：調整背景圖片的寬度或高度（較小者），以鋪滿整個元素； PS：contain和cover都會保持當前背景圖片的寬高比；

• background樣式縮寫，例子以下圖：

• contain與cover的區別

PS：能夠用背景圖片的方式引入雪碧圖，關於雪碧圖可見個人這篇文章CSS雪碧圖現學現作

二，關於inline-block的一些特性

• 特性 1.呈現inline元素的特性（不佔據一整行，寬度由內容寬度決定）； 2.同時呈現block元素的特性（能夠對其設置寬高以及上下padding和margin）； 3.多個並排顯示時存在inline元素的縫隙問題，以下圖；

4.多個不一樣高的inline-block元素並排顯示時上下對齊的基線是文本內容的底線；

• 縫隙問題產生的緣由和解決方案 1.產生的緣由：由於HTML標籤的寫法，換行後上行與下行產生的間距被視做空格，而瀏覽器會渲染多個空格爲一個空格，而這個空格也被當作是一個字符，因此產生縫隙； 2.解決方案一：HTML標籤連寫，以下圖可見連寫HTML標籤後縫隙消失，沒有連寫的仍是存在縫隙：

3.解決方案二：設置父容器font-size: 0;，而後再從新設置inline-nlock的元素的font-size：

4.解決方案三：設置浮動，有可能致使父容器高度坍塌：

5.解決方案四：設置負margin擠掉空格，可是這種方法會致使元素溢出父容器：

• 不一樣高中間的inline-block元素的頂部或底部對齊方法，設置vertical-align: top | bottom 1.頂部對齊：

2.底部對齊：

三，行高line-height

• 首先說說行高的特性 1.有繼承性； 2.行高使用的單位：① 固定單位:px；② 相對單位(倍數):2；③ 相對單位百分比:200%；

• 單行文字在元素中垂直居中的line-height辦法 設置line-height與這個文字的容器的高度相同，以下圖：

• 相對單位中的倍數與百分比的區別，例如(line-height: 2;與line-height: 200%的區別) 答：二者之間主要是在繼承的計算方式上的不一樣 line-height: 2;被繼承的是這個倍數，而 line-height: 200%;被繼承的是計算後的到的px值； 區別可見下圖：

四，IE盒模型與W3C盒模型的區別

可見個人這篇文章CSS盒模型簡介