css3新特性

標籤：css3 背景   函數   打破   clear   階段   nim   添加   text   過渡   

CSS3 新屬性

一、【 CSS3新增屬性首碼 】　　1、-webkit-:chrome/safari　　2、-moz-:Firefox　　3、-mo-:IE　　4、-o-: Opera 歐朋二 、【CSS 長度單位】　　1、px：像素。長度固定，表示解析度占幾個像素點；　　2、%：表示相對於預設值的百分比；　　3、em:長度與元素的字型大小掛鈎。　　rem:長度與根項目的字型大小掛鈎。 即與html 的 font-size 掛鈎，若不設定，預設16px 。　　【 em與rem區別 】　　em與當前元素自身的font-size掛鈎，若當前元素沒有設定，則向上尋找最近的祖先元素字型大小，直至根字型大小；　　rem與當前元素字型大小無關，直接與根節點字型大小有關。代碼

html{    font-size: 48px;            /*  修改根項目字型大小大小 */}            #div3{    font-size: 200%;         /*32號字*/    background-color: yellow;    height: 3rem;                /* 3*32=94*/            }

三、【CSS3 背景屬性】　　1、background-clip: 設定背景圖或者背景色的裁切顯示地區　　　　border-box：從邊框外圓開始顯示　　　　padding-box：從邊框內圓開始顯示　　　　content-box： 從文字內容地區開始顯示　　　　如果不在顯示地區的背景圖或者背景色，會被裁切掉不顯示　　2、background-origin：設定背景圖左上方 從哪個位置 開始定位顯示　　　　border-box：背景圖左上方從邊框外緣開始顯示　　　　padding-box：背景圖左上方從邊框內圓開始顯示　　　　content-box： 背景圖左上方從文字內容地區開始顯示【注】background-origin 不會改變背景圖顯示地區的大小，只是決定 背景圖左上方 從哪個位置 開始定位。　　　background-clip 只負責 裁切出顯示地區，並不關心背景圖定位在哪。　　3、background-attachment：背景圖的附著方式　　　　scroll ：背景圖隨地區滾動　　　　fixed：背景圖充滿整個地區。並且是固定的，不隨捲軸滾動。　　4、縮寫形式：　　　background： background-color background-image background-repeat background-attachment background-position；代碼

#div4{    width: 100px;    height: 1000px;    background-color: yellow;    padding: 20px;    border: 20px dotted red;    background-clip: border-box;    background-image: url(img/005.png);    /*background-repeat: no-repeat;*/    background-origin:content-box;    background-attachment: fixed;  /*驗證該條語句*/}    

   fixed 背景不隨捲軸滾動

四、【 transition 過渡屬性】　　transition: all .5s ease 3s; 過渡屬性，接受四個屬性　　1、設定哪個CSS屬性，參與過渡；可以直接指定all或none；　　2、過渡多長時間完成。通常 .3s、.5s　　3、過渡的樣式效果。通常 ease　　4、過渡延時幾秒後再開始。可以省略不寫【注】 可以同時定義多個屬性的過渡效果，用，隔開。　　　　eg.  transition: width .3s ease,height .5s ease;代碼

#div5{    width: 100px;    height: 100px;    background-color: red;    transition: width .3s ease,height .5s ease;}#div5:hover{    height: 50px;    background-color: yellow;    width: 50px;    transition: all .5s ease;  /*對比transition置於不同位置，過渡特效作用完後恢複到原狀態的時間不同*/}    

過渡前

過渡後五、【 transform變換屬性 】　　1、 常用的變換函數：　　　　translate（10px,10px）第二個不寫，預設為0　　　　scale（1.1）縮放 overflow=hidden；　　　　rotate（90deg）90度旋轉，預設繞z軸轉 可以使用rotateY(180deg)；等　　　　skew（20deg，30deg）扭曲，水平、垂直方向扭曲多少度　　2、可以實現多種變換，用空格分隔　　　　eg. transform：skew(180deg) scale(1.5) translate(200px 200px) ；　　3、 transform-origin 定義變換起點,常用於旋轉變換　　　　可選值:left center right top center bottom　　　　也可以直接定義x、y座標點，第一個數為X軸　　　　eg .transform: rotate(90deg);　　　　　  transform-origin:right bottom ; 繞右下角旋轉90度代碼

#div6{    width: 100px;    height: 100px;    background-color: red;    }            #div6-1:hover+#div6{    /*transform:translate(200px 200px) ;*/    transform: scale(1.5);                       /*放大*/    transform: rotateY(180deg);       /*旋轉180°*/    transform-origin:right  bottom;   /*繞右下角*/    transform: skew(180deg);  /*  扭曲180°*/}

 六、【 CSS3 動畫的使用 】　　1、聲明一個主要畫面格（動畫）　　　　@keyframes name{　　　　　　from{}　　　　　　to{}　　　　}　　　 階段的寫法：① 直接使用from-to的寫法；　　　　　　　　　 ② 設定0%到100%的寫法，開頭結尾必須是0%、100%；　　2、在CSS選取器中，使用 animation 調用聲明好的動畫 ；　　　　animation的縮寫　　　　Animation-name:動畫名稱 （聲明的主要畫面格name）　　　　Animation-duration：動畫期間 （5s ）　　　　Animation-timing-function：動畫速度曲線（ease）　　　　Animation-iteration-count：動畫播放次數，預設為1.（infinite 無限次重複）　　　　Animation-direction：動畫在下一個是否逆向播放，預設為（不逆向播放）normal.（逆序播放alternate）　　　　Animation-fill-mode：表示動畫結束後停留在何種狀態。要使用這個屬性，動畫執行次數必須有限次！（forwards 動畫停留在結束狀態；backwards表示動畫停留在初始狀態，預設效果）　　　　【注】 name和duration必須設定，其他選填！可以同時設定多個動畫，多個動畫之間 用 ， 分隔。例如，animation：frame1 1s，frame2 1s......   響應式布局一、實現響應式的方式:      JS  媒體查詢 流體布局  彈性布局二. flex 彈性布局 　　1、瞭解兩個基本概念;     　　 容器：需要添加彈性布局的父元素；    　　  項目：彈性布局中的每一個子項目。　　 2、彈性布局的使用 　　　　① 給父容器添加display：flex/inline-flex；可以使容器內部採用彈性布局顯示，不遵循常規文檔流的顯示方式； 　　　　② 容器添加彈性布局後，僅僅是內容採用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規文檔流；（不打破文檔流，友好） 　　　　 ③ display: flex; 容器添加彈性布局後，顯示為區塊層級元素     　　　　  display:inline-flex; 容器添加彈性布局後，顯示為行級元素　　　　 ④ 設為flex布局之後，子項目的float、vertical-align、clear失效。但是position依然生效。  樣本圖   display:inline-flex; 顯示為行級元素 display:flex; 顯示為區塊層級元素 自動換行　　3、作用於容器的相關屬性：　　　　① flex-direction 屬性決定 主軸的方向（即項目的排列方向）。       　　　　 row（預設值）：主軸為水平方向，起點在左端      　　　　  row-reverse：主軸為水平方向，起點在右端       　　　　 column：主軸為垂直方向，起點在上沿。       　　　　 column-reverse：主軸為垂直方向，起點在下沿。  樣本圖   　　　   ② flex-wrap 屬性定義，如果一條軸線排不下，如何換行。 　　　　　　  nowrap（預設）：不換行。當容器寬度不夠時，每個項目的寬度會被擠壓        　　　　   wrap：換行，並且第一行在容器最上方   　　　　　　 wrap-reverse; 換行，第一行在下方。  　　　     flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。  代碼    樣本圖  　　③ justify-content 屬性定義了項目在主軸上的對齊。     　　【注】此屬性與主軸 方向息息相關。主軸方向：row - 起點在左邊；row-reverse - 起點在右邊； column - 起點在上邊；column-reverse - 起點在下邊。      　　　　 flex-start（預設值）：項目位於主軸起點       　　　　flex-end：項目位於主軸終點    　　　　   center： 置中       　　　　space-between：左右對齊，項目之間的 間隔都相等。（開頭和最後的項目，與父容器邊緣沒有間隔）【常用】      　　　　 space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。（開頭和最後的項目，與父容器邊緣有一定間隔）  樣本圖   justify-content: space-between;  左右對齊 　　   ④ align-items 屬性定義項目在交叉軸上的相片順序。            　　  flex-start：交叉軸的起點對齊。            　　  flex-end：交叉軸的終點對齊。             　　 center：交叉軸的中點對齊。    　　　　   baseline: 項目的第一行文字的基準對齊。（文字行高、字型大小會影響每行的基準）    　　　　   stretch（預設值）：如果項目未設定高度或設為auto，將佔滿整個容器的高度。可以參照加以理解：　　　 ⑤ align-content 屬性定義了多根軸線的對齊。如果項目只有一根軸線，該屬性不起作用。                     　　【注】當項目換為多行時，可以使用align-content 取代 align-items 。      　　　　  flex-start：與交叉軸的起點對齊。      　　　　  flex-end：與交叉軸的終點對齊。       　　　　 center：與交叉軸的中點對齊。        　　　　space-between：與交叉軸左右對齊，軸線之間的間隔平均分布。     　　　　   space-around：每根軸線兩側的間隔都相等。所以軸線之間的間隔比軸線與邊框的間隔大一倍。     　　　　   stretch（預設值）：軸線佔滿整個交叉軸。　　4、作用於項目上的屬性    　　 ① order: 0;屬性定義項目的排列順序。 數值越小越靠前，預設為0。    　　 ② flex-grow 屬性 定義項目的放大比例，預設為0，即如果存在剩餘空間，也不放大。    　　 ③ flex-shrink 屬性 定義了項目的縮小比例，預設為1，即如果空間不足，該項目將縮小。     　　④ flex-basis 定義項目佔據的主軸空間（設定後，若果主軸為水平，相當於設定項目的寬度，原width失效。）   　　  ⑤ flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。  　　　　  這個屬性有兩個快捷設定：auto=（1 1 auto）空間不夠會擠壓、空間剩餘會放大 和 none = (0 0 auto)空間不夠不擠壓、空間剩餘也不放大      　　⑥ align-self 定義單個項目自身在交叉軸上的相片順序，可以覆蓋掉容器上的align-items屬性     　　　　屬性值：與 align-items 相同，預設auto，表示繼承父容器align-items的屬性值 eg.

#div{    width: 500px;    height: 500px;    background-color: yellow;    display:flex;        justify-content: space-between;    align-items: flex-start;}#div div{        width: 100px;        height: 100px;        line-height: 100px;        text-align: center;        background-color: blue;        color: white;        font-size: 30px;        }.div1{    font-size: 100px;                order: 1;                  /*調換次序*/    flex-grow: 0;                }.div3{    order: 0;    flex-grow: 2;        flex-shrink: 1;    align-self: flex-end;            /*使序號3向下對齊*/}

css3新特性