CSS02

1、框模型：盒子模型，①對象實際寬度=左右外邊距+左右邊框+左右內邊距 + width；②對象實際高度=上下外邊距+上下邊框+上下內邊距 + height；

2、外邊距：margin：取值：①top（上） right（右） bottom（下） left（左）；②value：一個值，四個方向相同；③top/bottom（上/下） left/right（左/右）：上下一致，左右一致；④auto：左右水平居中，上下無效（前提必須設定寬度）；

3、外邊距合併：兩個垂直外邊距相遇，形成一個外邊距，以值大者為主；

4、外邊距溢出：父子元素，設定子元素上下外邊距，結果導致作用於父元素上（父元素無邊框，且設定第一個子元素時產生）；解決：①父元素設定上下邊框； ②為父元素設定內邊距，取代子元素的外邊距；③父元素加入空table作為第一個子元素；

5、內邊距：padding：取值：①top（上） right（右） bottom（下）left（左）；②value：一個值，四個方向相同；③top/bottom（上/下） left/right （左/右）：上下一致，左右一致；* 行內元素的內邊距不影響其他元素；

6、背景：①背景色：background-color；②背景圖片：background-image：url（相對路徑）；③背景平鋪：background-repeat：a、repeat：默認，水平垂直都平鋪；b、 no-repeat：不平鋪；c、repeat-x：水平平鋪；d、repeat-y：垂直平鋪；④背景尺寸：background-size：a、取值/百分比；b、cover：擴大背景圖至完全覆蓋；c、contain：背景圖擴大至一邊適應；⑤背景固定：background-attachment：a、scroll：默認，滾動；b、fixed：固定，背景不隨滾動條改變；⑥背景定位：background-position： x（值正右偏移/橫向關鍵字） y（值正下偏移/縱向關鍵字）⑦Sprites圖：將所需影像移至sprites圖左上角；⑧背景綜合：background：color url() repeat attachment position；

7、漸層：①線性漸層：background-image：linear-gradient（angle（方向，關鍵字或角度），color-point1（變化顏色，顏色位置），color-point2…）；②徑向漸層： background-image：radial-gradient（【size at position】（半徑at圓心位置），color-point1（顏色位置/佔比），color-point2…）；③重複線性漸變：background-image：repeating-linear -gradient（angle，color-point）；* color-point：位置一定要給絕對的數值(px)，不要給相對%；

8、版本相容性：在取值漸變函數前面加上相容前綴，①Firefox：火狐，-moz-；②Chrome：Google，-webkit-；③Opera：歐朋，-o-；④IE：Internet Explorer，-ms- ;