CSS2-盒模型、背景圖片

盒模型屬性

margin外邊距（top,right,bottom,left）
border邊框(top,right,bottom,left)
padding內邊距(top,right,bottom,left)
content內容區(width,height)
margin,border,padding值的書寫方法：
margin-top/-right/-bottom/-left
margin:10px 11px 12px 13px; 上右下左的順序
margin:10px 12px;簡寫即上下10px,左右12px;
margin:10px; 即4個方向都是10px

關於margin的合併
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

---

IE 盒模型和W3C盒模型的區別

W3C盒模型（box-sizing:content-box）,寬度width=內容區content的寬度

IE盒模型（box-sizing:border-box）,寬度width=border+padding+content內容寬度

沒有DOCTYPE的怪異模式，IE瀏覽器默認使用「IE盒模型」，IE8及如下也使用IE盒模型。

---

CSS Sprite(雪碧圖|精靈圖)

CSS Sprite圖是把多個icon圖標圖片或頁面會重複用到的小圖片合併放在一張圖裏面，經過background-position這個屬性調整背景圖片的位置來顯示合併大圖中的某個局部圖像區域。
做用是減小網絡請求，讓頁面加載更快，圖片只需請求一次，之後使用都調用緩存內的圖片。與此相似減小請求另外一種方法是把圖片（只適用於很小的圖標例如icon）轉換成base64的編碼，url直接引用這個編碼就能看見圖片。base64適用在圖標加載響應要求較高的場景下使用。
雪碧圖的使用：背景圖與元素的原點重合。比如把牀單的左上角與桌子的左上角對齊，多餘的部分不要。（0，0）座標原點位置，即外層塊元素的左上角，background-position位置設定是指圖片與座標原點的偏移量。白色框是元素，綠色框是背景圖片。X座標值爲正則圖片左上角向右平移，爲負則圖片左上角向左平移，Y座標值爲正則圖片左上角向下平移，爲負則圖片左上角向上平移。

背景小技巧：在開發過程當中用圖片作背景的同時，每每還要用圖片的主色調來做用元素的背景色，目的是背景圖片丟失的時候防止視覺效果變化太大。

---

img標籤和CSS背景使用圖片的區別

頁面上固定不變的東西如圖標icon、logo等用CSS背景圖片
對於常常會改變的內容（圖片是和內容相關的），用戶img標籤圖片，好比VIP會員頭像等。

---

background: url(abc.png) 0 0 no-repeat;

background-image:url(http://xxx.jpg) 這裏是url引用，而不是src引入要引號
background-position:0px 0px; 圖片偏移位置水平垂直均爲0
background-repeat:repeat-x/repeat-y/no-repeat(水平重複/垂直重複/不重複)

---

background-size的做用

background-size指定背景圖片實際顯示區域大小。
屬性值：像素值/百分比/cover/contain
cover圖片會覆蓋整個背景區域,不會留下邊白,即小於背景區域的圖片會放大充滿整個背景區域。contain圖片自適應最好的顯示效果並被包裹在背景區域裏，有可能會留下空白。

---

div元素水平居中，img圖片水平居中

塊級元素水平居中：margin：0 auto; 不考慮上下margin值時而直接使用:
margin-left:auto;
margin-right:auto;
圖片水平居中：對img標籤先包裹一個塊級父容器，再對塊級父容器使用text-align:center實現居中。text-align:center;設置元素內的文本水平居中對齊。只對塊級元素裏面的行內元素生效（a,img,input,span）,注意這裏居中是參照該行內元素的父容器元素生效。text-align有5個值：left/right/center/justify/inherit，左對齊/右對齊/居中對齊/兩端對齊/繼承父元素align值。justify兩端對齊的時候，每行中的字間距可能不一致。

---

設置元素透明

使用opacity屬性來設置元素的透明度，值從 0.0 （徹底透明）到 1.0（徹底不透明）。兼容性

---

opacity和 rgba設置透明的區別

opacity:0.5;（0～1）使元素內全部內容透明度爲0就像消失，可是所佔據的空間還在，不會改變頁面佈局,opacity屬性可繼承。
background-color: rgba(0,0,0,0.5); 這種加alpha通道值設透明度只能對元素的顏色或者背景色設置透明度，rgba設置的透明屬性沒法繼承。

---

title和 alt屬性的區別

title是補充的額外信息即鼠標懸停標籤上的額外說明信息。alt則是替代信息而不是提供額外說明，alt能夠用來替換說明加載失敗時的img或a連接。