1、css是什麼？
cascading style sheet 層疊樣式表，
目的是對html中元素的字型、顏色、邊距、高度、寬度、背景、網頁定位等設定，以達到美化網頁的目的
2、css3是是前一直仍然在完善的css最新標準和規範。新加入了很多css樣式屬性，但是因為規範讓然未最終形成。
所以瀏覽器支援力度仍然存在不同，很多時候需要去完成css的相容處理。
css3新加入的特性主要如下方面：
1）新加入一些選擇器
2）對font字型、漸變效果的支援
3）盒子模型（圓角、陰影、邊框背景）
4）文字特效（文字陰影）
5）2d/3d轉換（平移、縮放、旋轉、矩陣變換）
6）動畫過渡特效
7）多列布局及彈性盒子、響應式媒介查詢
3、css的相容處理常見字首如下：
火狐瀏覽器（-moz-）
chrome、safri、最新版opera（-webkit-）
老版ie瀏覽器（-ms-）
老版（版本號15以前）opera瀏覽器（-o-）
所以經常會出現如下相容寫法：
#example
4、css3盒子樣式
border:1px solid red;/*分別是邊框寬度、線條格式實線、顏色三個的縮寫*/
border-radius:15px 50px 30px 5px; 定義盒子圓角，左上、右上、右下、左下
box-shadow:10px 10px 5px #888888; 定義盒子陰影，x軸偏移、y軸偏移、發散寬度、陰影顏色
邊框border: 15px solid transparent;
border-image: url(img/border.png) 30 round; /*round可以為stretch拉公升*/
-webkit-border-image:url(img/border.png) 30 round; /* safari 5 and older */
(30代表擷取上、右、下、左邊框的大小作為顯示區)
練習1：設定乙個div寬度400px，高度400px。變成圓形border-radius:50%。
增加盒子陰影效果。
練習2：使用提供的border，設定乙個div的邊框效果
5、背景樣式
background-image：背景，多個以，號分隔
background-repeat:背景平鋪
background-size：背景大小
background-origin：設定背景的開始位置（左上角）
background-position：背景定位（定位的時候注意是動，預設左上角開始顯示）
練習3：使用多背景實線課堂上的日記本樣式效果
6、自定義字型設定
@font-face
使用的時候如下：
.testbox
7、漸變效果：
1）線性漸變（相容不同瀏覽器）：
background:linear-gradient(right,red,blue);
background:-webkit-linear-gradient(right,red,blue);
background:-o-linear-gradient(right,red,blue);
background:-moz-linear-gradient(right,red,blue);
說明：right代表從有向左漸變，可改為left,top,bottom
2）圓心四周漸變：
background: -webkit-radial-gradient(red, green, blue);
background: -o-radial-gradient(red, green, blue);
background: -moz-radial-gradient(red, green, blue);
background: radial-gradient(red, green, blue); /* 標準的語法 */
說明：上面例子採用了3種顏色的漸變，可在最後加入 circle（圓形） 或者 ellipse（橢圓）
練習3：使用定位+背景+邊框，陰影等實現絕對求生的圓形效果。
效果圖課件pdf文件。
8、彈性盒子是 css3 的一種新的布局模式，
當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。
其目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間
（注：這裡只介紹常用的基礎操作，細節需要網上查詢調整）
1）彈性布局的父容器需要加入：display:flex;則預設是按照水平左右排列的方式布局。
2）flex-direction屬性指定了彈性子元素在父容器中的位置
row：橫向從左到右排列（左對齊），預設的排列方式。
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面
3）內容水平對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。
flex-start：彈性專案向行頭緊挨著填充。這個是預設值。
flex-end：彈性專案向行尾緊挨著填充。
center：彈性專案居中緊挨著填充。
space-between：彈性專案平均分布在該行上。
space-around：彈性專案平均分布在該行上，兩邊留有一半的間隔空間。
4）align-items 設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
（垂直方式另外還有2種，這裡只涉及了簡單的3個方式好理解一些）
css3學習筆記
1.為什麼分許多模組進行管理？為了避免產生瀏覽器對於某個模組支援不完全的情況。2.使用元素的class屬性的缺點 第一，class屬性本身沒有語義，褚翠是用來為css樣式服務的，屬於多餘屬性。第二，使用屬性的話，並沒有把樣式與元素繫結起來，針對同乙個class屬性文字框，下拉框，按鈕都可使用。這樣很...
CSS3學習筆記
一.選擇符 二.屬性 溢位隱藏 div4 p文字陰影 text shadow 2px 1px rgba 255,255,255,1 圓角效果 border radius邊框陰影 box shadow 2px 2px 5px 5px inset 內陰影透明度 div for ie8 and earli...
css3學習筆記
1，transition是過度效果，一般是和hover一起用，transition的屬性有height，width常用屬性，在hover裡面就是會覆蓋原來的屬性，屬性由逗號間隔，各個屬性之間沒有先後關係，webkit transition width 2s ease in,height 2s,web...