css3

css3屬性

一 顏色表示法
英文單詞
十六進制
rgb(10,25,30)
第一個值表示的是紅色佔比
第二個值表示的是綠色佔比
第三個值表示的是藍色佔比
佔比取0-255

透明度
rgba(紅色,綠色,藍色,透明度)---(ie9)
透明度的取值：0---1,若是值越大，透明度越低

opacity:0.5---(ie9)
後面跟一個0---1的值,若是值越大，透明度越低
opacity對整個元素的全部內容都會透明，而rgba只是設置元素的顏色透明

filter:alpha(opacity=50);---濾鏡(支持ie8及更早版本),取值爲(0---100)%,若是值越大，透明度越低
opacity:0.5;

二 設置圓角邊框---(ie9)
-webkit-/-moz-
border-radius:5px/5%;
border-top-left-radius:150px;
border-bottom-right-radius:150px;

縮寫：
border-radius: 左上 右上 右下 左下;
border-radius: (左上/右下) (右上/左下);
border-radius: (左上) (右上/左下) (右下);

----前綴----
爲何會產生前綴：在標準爲肯定時，部分瀏覽器已經根據最初草案實現了部分功能，爲了與以後肯定下來的標準進行兼容
加了前綴的做用：能夠兼容到瀏覽器更早的版本
-webkit- chrome
-moz- firfox
-o- opara
-ms- IE

三 設置盒陰影---ie9
-webkit-/-moz-/-o-
box-shadow: 水平偏移量 垂直偏移量 模糊距離 陰影尺寸 顏色 inset/outset;

四 過渡效果---ie10
-webkit-/-moz-/-o-
transition：參與屬性 過渡時間 動畫類型 延遲時間；
當參與的css屬性發生變化時，才能產生過渡效果
動畫類型：
默認,ease---以慢速開始，而後變快，最後以慢速結束
linear---從始至終都是相同的速度
五 2D轉換---ie9
-webkit-/-moz-/-o-/-ms-
transform:
translate(x,y) 沿着X和Y軸移動,在初始位置的左上角開始偏移
translateX(n)/translateY(n)
scale(width,height) 改變元素的寬度和高度
scale(n) 寬度和高度都是以n的倍數進行放大或縮小
scaleX(n)/scaleY(n),以中心點爲座標進行放大或縮小
rotate(deg) 規定元素旋轉多少度,以順時針的方向旋轉
skew(x-deg,y-deg) 沿着x和y軸傾斜

transform-origin:設置中心座標

center center;(默認值)
left/right top/bottom;
具體值/百分比;
六 transparent====》rgba(0,0,0,0)全透明黑色速記法
background-color---ie5
border-color----ie7
color----ie9

七 設置背景圖大小---（ie9）
background-size:
500px;等比例縮放
500px 300px;
cover;將背景圖等比例縮放到徹底覆蓋容器，背景圖有可能會超出容器
contain;將背景圖像等比例縮放到寬度或高度與容器的寬度或高度相等，背景圖始終被包含在容器內

八 設置背景圖的定位區域---（ie9）
background-origin:
padding-box;從padding區域(包含padding)開始顯示背景圖像
border-box;從border區域開始顯示背景圖像
content-box;從內容區域顯示背景圖
九 設置文本陰影--（ie10）
text-shadow:水平偏移量 垂直偏移量 模糊距離 陰影顏色;

十 溢出文本處理
text-overflow:
clip;不顯示省略標記，而是簡單的裁切
ellipsis;當文本超出時以省略號的方式顯示，省略號插入的位置是在最後一個字符
ellipsis-word;省略號插入的位置是最後一個詞
white-space:
nowrap;表示強制在同一行顯示
pre;表示顯示語文本格式
讓文本顯示在一行，超出部分顯示省略號
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
十一 動畫(@keyframes規則)---ie10
-webkit-
animation:@keyframes名字 花費時間 速度曲線 延遲時間 播放次數 是否輪流反向
速度曲線：
linear，勻速播放
ease，默認。先慢再快後慢的播放
播放次數：
n，表明播放n次
infinite，無限循環
輪流反向：
normal，默認
alternate，輪流方向播放

十二 多列---ie10
-webkit-/-moz-
屬性：
column-count:3;規定元素應該被分割的列數
column-gap:50px/5%;設置列之間的間隙
column-rule: color style width;設置列之間的寬度、樣式和顏色規則
column-span:1/all;規定元素橫跨的列數，通常咱們都寫在標題標籤上面
十三 用戶界面
網頁佈局中有兩種處理方式：漸進加強、優雅降級

屬性：
box-sizing，容許以確切的方式定義適應某個區域的具體內容，寫在子元素上面
content-box,父容器的寬度和高度受子容器的content/border/margin/padding值的影響
border-box,父容器的寬度和高度受子容器的content/margin值的影響,不受border/padding值的影響，同時向內收斂

十四 多媒體查詢---ie9
針對不一樣的媒體類型能夠定製不一樣的樣式規則。
響應式佈局：設計一套方案，便可以適用於移動端也能夠適用於pc端

語法：
@media not/only 媒體類型 and (表達式){

css代碼
}

媒體類型：
all 用於全部多媒體類型設備
print 用於打印機
screen 用於電腦屏幕，平板，智能手機等
speech 用於屏幕閱讀器
not:用來排除掉某些特定設備的
only:用來指定某種特別的媒體類型
表達式：
max-width/min-width/max-height/min-height...

************************************************************
字體單位
px:相對長度單位。像素px是相對於顯示器屏幕分辨率而言的
em:相對長度單位。相對當前對象內文本的字體尺寸。
若是當前文本的字體尺寸沒有被人設置，則相對於瀏覽器的默認字體大小尺寸
任意瀏覽器的默認字體大小都是16px.谷歌瀏覽器的最小支持的字體大小爲12px

若是沒有設置瀏覽器的默認字體大小，那麼
1em=16px;
10px=0.625em

body{
font-size:62.5%;
}
1em=10px

rem:相對於根元素（即html元素）font-size計算值的倍數----ie9

html{
font-size:62.5%;
}
1rem=10px;

************************************************************
ViewPort
咱們的界面在移動端設備上是，咱們的用戶每每會對界面的內容進行縮放等操做，這時候咱們每每須要使用ViewPort以此來限制咱們的用戶的某些操做
<meta name="viewport" content=""/>
width="device-width";寬度等於當前設備的寬度
initial-scale:1.0;初始的縮放比例
minimum-scale:1.0;容許用戶縮放的最小比例
maximum-scale:1.0;容許用戶縮放的最大比例
user-scalable:是否容許用戶能夠手動縮放用戶界面（默認爲no）
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
設置屏幕寬度爲設備寬度，禁止用戶手動縮放

移動端的佈局建議：使用的字體單位rem padding margin