標籤：透明度 比例 對齊 分組 div 依次 圖片 另一個 單位
一、CSS常用文字屬性
【css中的顏色表示方式】
1、直接使用顏色的單詞表示：red、green、blue
2、使用顏色的十六進位表示：#ff0000,#00ff00；
六位元，兩兩分組，分別表示紅、綠、藍
3、使用RGB（0~255，0~255，0~255）；三位元，分別表示紅綠藍的配比。
4、RGBa();第四位元表示透明度。
【字型】
1、font-weight:字型粗細；400表示norml,700表示加粗；
bold：加粗；lighter：細體；也可以使用100-900數值。
2、font-style：字型樣式；
italic：傾斜；norml：正常；
3、font-size：字型大小；可以寫像素單位px；也可以寫%；
200%表示瀏覽器預設大小（16px）的兩倍=32px;
4、font-family：字型系列；可以直接寫字型名，也可以寫字型系列名。
常用子體系列：serif：襯線體；sans-serif：非襯線體；
可以寫多個值，用多個逗號隔開。表示優先使用第一個，如果沒有這個字型，依次向後使用。通常最後一個放字型系列名。
5、font縮寫形式：
順序必須是：font-weight font-style font-sizene-height font-family
不同屬性之間，用空格分隔；
font-sizene-height必須一組，用/分隔；
font-family：多個字型之間，用逗號分隔。
【字型顏色】
color：字型顏色，可以是單詞，RGB，十六進位等。
opacity：透明度，可選值0-1
【opacity和RGBA的區別】
RGBA本身可以設定顏色，而opacity必須配合其他屬性來用，
rgba僅僅是當前元素設定的顏色透明；
opacity會讓當前元素裡面的所有文字，背景，子項目都透明。
line-height：行高；可以寫px單位，可以寫數字（表示預設行距的幾倍），可以寫%（表示預設行距的百分比）
行高的重要作用：讓單行文字在div中垂直置中。
設定行高=div的高度，既可以讓文字垂直置中。
text-align：設定地區內行級元素水平對齊，對區塊層級元素無效。
letter-spacing：字元間距。字與字之間的距離。
text-decoration：文本修飾；
under-line：底線；over-line：上劃線；line-through：刪除線；none：去除底線；
text-overflow：設定行末多餘文字的顯示方式；
clip：多餘文字裁剪掉；ellipsis：多餘文字顯示省略符號（需要配合white-space：nowrap;使用）；
white-sapce：nowrap;設定中文行末，不斷行顯示。
【重點】設定行末顯示省略符號（三行代碼，缺一不可）
overflow：hidden；
white-space：nowrap;
text-overflow：ellipsis；
text-shdow：2px(水平往右2像素) 2px（垂直2像素） 2px（模糊程度，0表示不模糊） blue;文字陰影，
水平陰影距離正數表示陰影右移，負數表示陰影左移。
垂直陰影距離：正數表示陰影下移，負數表示陰影上移。
text-indent：首行縮排。
-webkit-text-stroke:0.5px blue;文字描邊。
-webkit：表示只有webkit核心的瀏覽器生效，常見的chrome，safari
二、CSS常用背景屬性
1、background-color： 背景色。
2、background-image：url（ ）; 背景圖片.背景圖和背景同時存在時，背景圖覆蓋背景色。
3、background-repeat：背景圖重複方式
no-repeat：不平鋪；
repeat-x：X軸平鋪；
repeat-y：Y軸平鋪；
repeat：平鋪；
4、background-size:背景圖大小；
指定寬度高度：可以寫px,也可以寫%（父容器寬高的%）
寫兩個屬性時，分別表示寬度高度
寫一個屬性時，表示寬度，高度將會等比縮放
contain: 圖片等比縮放，直到寬或高較大的一邊縮放到100%為止。（可能導致較短的一邊<100%，圖片無法蓋住全部地區）
cover： 圖片燈筆縮放，直到寬或高較小的一邊縮放到100%為止。（可能導致較長的一邊>100%，導致圖片無法顯示）
5、 background-position:背景圖位移量.
指定位置: left/center/right top/center/bottom
當寫一個值時，另一個預設置中。
指定座標：兩個屬性分別表示水平位移，垂直位移。
座標的值可以是像素單位，也可以是%
當寫像素px單位時：正數右移，負數左移；垂直方向：正數下移，負數上移。
當寫%時：一般唯寫正數。表示的是，去掉圖片的寬高，剩餘空白地區的分布比例。
background-position：30%；水平方向去掉圖片寬度，剩餘地區3：7分。
6、【列表】
list-style：修改列表小圓點的樣式。
none：去掉小圓點
url（）；可以使用url匯入一個小圖片，作為列表的
float：浮動,可以實現讓區塊層級元素,在一行顯示.
CSS基本屬性
