一，背景(background)
- background的常用樣式有：
1.background-color：設(shè)置背景顏色驴党；
2.background-image：添加背景圖片瘪撇；
3.background-position：設(shè)置背景圖片的位置；
4.background-repeat：設(shè)置背景圖片的重復(fù)值；
5.background-size：設(shè)置背景圖片的大小尺寸倔既；
6.background-attachment：設(shè)置背景是否隨元素的滾動(dòng)而產(chǎn)生的動(dòng)態(tài)恕曲；（用的很少）
- 常用樣式的常用值
1.background-color：① 英文名：red；② 十六位進(jìn)制顏色：#000叉存；③rgba（0码俩，0，0歼捏，0）；
2.background-image：url(圖片地址或路徑)笨篷；
3.background-position：① 數(shù)值偏移量（px為單位）：x y瞳秽；② 百分比偏移量：x% y%；
③ 橫坐標(biāo)和縱坐標(biāo)的固定值：[top | center | botom] [left | center | right]率翅；
4.background-repeat：① 不重復(fù)：no-repeat练俐；② X軸重復(fù)：repeat-x；③ Y軸重復(fù)：repeat-y冕臭；
④ X和Y軸都重復(fù)：repeat腺晾；
5.background-size：
① 直接寫寬高：20px 20px；
②contain：調(diào)整背景圖片的寬度或高度（較大者）辜贵，使背景圖片完全包含在元素中悯蝉；
③cover：調(diào)整背景圖片的寬度或高度（較小者），以鋪滿整個(gè)元素托慨；
PS：contain和cover都會(huì)保持當(dāng)前背景圖片的寬高比鼻由；
-
background樣式縮寫，例子如下圖：
縮寫背景樣式
- contain與cover的區(qū)別
效果區(qū)別
PS：可以用背景圖片的方式引入雪碧圖厚棵，關(guān)于雪碧圖可見我的這篇文章CSS雪碧圖現(xiàn)學(xué)現(xiàn)做
二蕉世，關(guān)于inline-block的一些特性
- 特性
1.呈現(xiàn)inline元素的特性（不占據(jù)一整行，寬度由內(nèi)容寬度決定）婆硬；
2.同時(shí)呈現(xiàn)block元素的特性（可以對(duì)其設(shè)置寬高以及上下padding和margin）狠轻；
3.多個(gè)并排顯示時(shí)存在inline元素的縫隙問題，如下圖彬犯；
inline-block元素的縫隙問題
4.多個(gè)不同高的inline-block元素并排顯示時(shí)上下對(duì)齊的基線是文本內(nèi)容的底線向楼；
對(duì)齊方式
- 縫隙問題產(chǎn)生的原因和解決方案
1.產(chǎn)生的原因：因?yàn)镠TML標(biāo)簽的寫法，換行后上行與下行產(chǎn)生的間距被視作空格躏嚎，而瀏覽器會(huì)渲染多個(gè)空格為一個(gè)空格蜜自，而這個(gè)空格也被當(dāng)做是一個(gè)字符，所以產(chǎn)生縫隙卢佣；
2.解決方案一：HTML標(biāo)簽連寫重荠，如下圖可見連寫HTML標(biāo)簽后縫隙消失，沒有連寫的還是存在縫隙：
解決方案一
3.解決方案二：設(shè)置父容器font-size: 0;虚茶，然后再重新設(shè)置inline-nlock的元素的font-size：
解決方案二
4.解決方案三：設(shè)置浮動(dòng)戈鲁，有可能導(dǎo)致父容器高度坍塌：
解決方案三
5.解決方案四：設(shè)置負(fù)margin擠掉空格仇参，但是這種方法會(huì)導(dǎo)致元素溢出父容器：
解決方案四
- 不同高中間的inline-block元素的頂部或底部對(duì)齊方法，設(shè)置
vertical-align: top | bottom
1.頂部對(duì)齊：
頂部對(duì)齊
2.底部對(duì)齊：
底部對(duì)齊
三婆殿，行高line-height
首先說說行高的特性
1.有繼承性诈乒；
2.行高使用的單位：① 固定單位:px；② 相對(duì)單位(倍數(shù)):2婆芦；③ 相對(duì)單位百分比:200%怕磨；單行文字在元素中垂直居中的line-height辦法
設(shè)置line-height與這個(gè)文字的容器的高度相同，如下圖：
單行文本垂直居中的line-height辦法
- 相對(duì)單位中的倍數(shù)與百分比的區(qū)別消约，例如(
line-height: 2;與line-height: 200%的區(qū)別)
答：兩者之間主要是在繼承的計(jì)算方式上的不同
line-height: 2;被繼承的是這個(gè)倍數(shù)肠鲫，而 line-height: 200%;被繼承的是計(jì)算后的到的px值；
區(qū)別可見下圖：
百分比繼承的是父元素字體的200%行高
倍數(shù)繼承的是倍數(shù)或粮，然后通過倍數(shù)計(jì)算子元素的字體大小所得出來的px值
四导饲，IE盒模型與W3C盒模型的區(qū)別
可見我的這篇文章CSS盒模型簡(jiǎn)介
