******* CSS 常用屬性 *********
z-index:
順序。
併級的對象，此屬性參數值越大，則層疊在最上面。
如兩個物件的此屬性具有相同的值，那麼將依據它們在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兩個媒體特性。
@media screen and (aspect-ratio:1680/957){ … }
@import url(example.css) screen and (max-aspect-ratio:20/11);
----------------------- ----------------------------------------------
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-
round： 背景影像自動縮放直到適應且填充整個容器。 （CSS3）
space： 背景影像以相同的間距平鋪且填滿整個容器或某個方向。 （CSS3
-------------------------------------------- -----------------------------
background-position： 設定或擷取物件的背景影像位置。 -image屬性。
範例：假設要定義背景影像在容器中右下方，距離右邊和底部各有20px 縮寫方式： background:url(test1.jpg) no-repeat right 20px bottom 200px;： 以百分比指定背景影像填滿的位置。影像在橫向上填充從左邊開始。 。 ---------------
background-origin：設定或擷取物件的背景影像計算 background-position時的參考原點(位置)。
padding-box： 從padding區域（含padding）開始顯示背景圖像。
border-box： 從border區域（含border）開始顯示背景影像。
content-box： 從content區域開始顯示背景影像。
---------------------------------------------- -------------
以上就是CSS常用屬性總結一的內容，更多相關內容請關注PHP中文網（www.php.cn）！
