web工程師是最近5年剛剛興起的一門高薪職業，人們的專注度越來越高。
那麼前端除了學習html標籤之外還需要掌握什麼知識點呢？
爲大家整理了一個和HTML標籤密不可分的知識要點--《CSS樣式常用屬性》
*******
CSS 常用屬性 *********
z-index:
auto
(默認值)
檢索或設置對象的層疊順序。
並級的對象，此屬性參數值越大，則被層疊在最上面。
如兩個對象的此屬性具有同樣的值，那麼將依據它們在HTML文檔中流的順序層疊，寫在後面的將會覆蓋前面的。
必須定義position屬性值爲
relative | absolute | fixed | center | page，此取值方可生效。
對應的腳本特性爲zIndex。
clip：檢索或設置對象的可視區域。區域外的部分是透明的。
必須將position的值設爲absolute，此屬性方可使用。
auto：
對象無剪切
rect(|auto
|auto |auto |auto)：
依據上-右-下-左的順序提供自對象左上角爲(0,0)座標計算的四個偏移數值，其中任一數值都可用auto替換，即此邊不剪切。
上-左
方位的裁剪：從0開始剪裁直到設定值，即上-左
方位的auto值等同於0;
右-下
方位的裁剪：從設定值開始剪裁直到最右邊和最下邊，即
右-下
方位的auto值爲盒子的實際寬度和高度;
示例：clip:rect(auto
50px 20px auto)
說明：上邊不剪切，右邊從第50個像素開始剪切直至最右邊，下邊從第20個像素開始剪切直至最底部，左邊不剪切
inset(|auto
|auto |auto |auto)：
該剪裁方式與 rect()
類似，不同的是 inset()
的剪裁，每個方位都是參照該方位的邊界來進行裁剪的。
上-右-下-左
方位的裁剪：從0開始剪裁直到設定值，即
上-右-下-左
方位的auto值都等同於0;(CSS3)
position：
檢索對象的定位方式。
static：
對象遵循常規流。top，right，bottom，left等屬性不會被應用。
relative：
對象遵循常規流，並且依據自身在正常流中的位置通過top，right，bottom，left屬性進行偏移時不影響常規流中的任何元素。層疊通過z-index屬性定義。
absolute：
對象脫離常規流，使用top，right，bottom，left等屬性進行絕對定位，盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin摺疊，其層疊通過z-index屬性定義。
fixed：
對象脫離常規流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。IE6及以下不支持此參數值
center：
對象脫離常規流，使用top，right，bottom，left等屬性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin摺疊，其層疊通過z-index屬性定義。(CSS3)
page：
盒子的位置計算參照absolute。(CSS3)
margin
h2{margin:10px
0;}
檢索或設置對象四邊的外延邊距。
如果提供全部四個參數值，將按上、右、下、左的順序作用於四邊。
如果只提供一個，將用於全部的四邊。
如果提供兩個，第一個用於上、下，第二個用於左、右。
如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。
內聯對象可以使用該屬性設置左、右兩邊的外補丁;若要設置上、下兩邊的外補丁，必須先使該對象表現爲塊級或內聯塊級。
外延邊距始終透明。
某些相鄰的margin會發生合併，我們稱之爲margin摺疊
aspect-ratio
：
指定比率
定義輸出設備中的頁面可見區域寬度與高度的比率。
本特性接受min和max前綴，因此可以派生出min-aspect-ratio和max-aspect-ratio兩個媒體特性。
background：
[
background-color ]：
指定對象的背景顏色。
[
background-image ]：
指定對象的背景圖像。可以是真實圖片路徑或使用漸變創建的“背景圖像”
[
background-repeat ]：
指定對象的背景圖像如何鋪排填充。
[
background-attachment ]：
指定對象的背景圖像是隨對象內容滾動還是固定的。
[
background-position ]：
指定對象的背景圖像位置。
[
background-origin ]：
指定對象的背景圖像顯示的原點。
[
background-clip ]：
指定對象的背景圖像向外裁剪的區域。
[
background-size ]：
指定對象的背景圖像的尺寸大小。
background-attachment
設置或檢索背景圖像是隨對象內容滾動還是固定的。必須先指定background-image屬性。
fixed：
背景圖像相對於窗體固定。
scroll：
背景圖像相對於元素固定，也就是說當元素內容滾動時背景圖像不會跟着滾動，因爲背景圖像總是要跟着元素本身。但會隨元素的祖先元素或窗體一起滾動。
local：
背景圖像相對於元素內容固定，也就是說當元素隨元素滾動時背景圖像也會跟着滾動，因爲背景圖像總是要跟着內容。(CSS3)
background-clip
指定對象的背景圖像向外裁剪的區域。
padding-box：
從padding區域(不含padding)開始向外裁剪背景。
border-box：
從border區域(不含border)開始向外裁剪背景。
content-box：
從content區域開始向外裁剪背景。
text：
從前景內容的形狀(比如文字)作爲裁剪區域向外裁剪，如此即可實現使用背景作爲填充色之類的遮罩效果。
background-repeat：
設置或檢索對象的背景圖像如何鋪排填充。必須先指定background-image屬性。
允許提供2個參數，如果提供全部2個參數，第1個用於橫向，第二個用於縱向。
如果只提供1個參數，則用於橫向和縱向。特殊值repeat-x和repeat-y除外，因爲repeat-x相當於repeat
no-repeat，repeat-y相當於no-repeat
repeat，即其實repeat-x和repeat-y等價於提供了2個參數值
對應的腳本特性爲backgroundRepeat。
repeat-x：
背景圖像在橫向上平鋪
repeat-y：
背景圖像在縱向上平鋪
repeat：
背景圖像在橫向和縱向平鋪
no-repeat：
背景圖像不平鋪
round：
背景圖像自動縮放直到適應且填充滿整個容器。(CSS3)
space：
背景圖像以相同的間距平鋪且填充滿整個容器或某個方向。(CSS3
background-position：
設置或檢索對象的背景圖像位置。必須先指定background-image屬性。
如果提供四個，每個或偏移前都必須跟着一個關鍵字(即left
| center | right | top | bottom)，偏移量相對關鍵字位置進行偏移。
示例：假設要定義背景圖像在容器中右下方，並且距離右邊和底部各有20px
縮寫方式：
background:url(test1.jpg) no-repeatright 20px bottom 20px;
：
用百分比指定背景圖像填充的位置。可以爲負值。
：
用長度值指定背景圖像填充的位置。可以爲負值。
center：
背景圖像橫向和縱向居中。
left：
背景圖像在橫向上填充從左邊開始。
right：
背景圖像在橫向上填充從右邊開始。
top：
背景圖像在縱向上填充從頂部開始。
bottom：
背景圖像在縱向上填充從底部開始。
background-origin：
設置或檢索對象的背景圖像計算background-position時的參考原點(位置)。
padding-box：
從padding區域(含padding)開始顯示背景圖像。
border-box：
從border區域(含border)開始顯示背景圖像。
content-box：
從content區域開始顯示背景圖像。
WEB前端學習交流羣20 103791667
