CSS3 新屬性 一、【 CSS3新增屬性前綴 】 　　1、-webkit-:chrome/safari 　　2、-moz-:火狐 　　3、-mo-:IE 　　4、-o-: Opera 歐朋 二 、【CSS 長度單位】 　　1、px：像素。長度固定，表示分辨率占幾個像素點； 　　2、%：表示相對于默認值的百分比； 　　3、em:長度與元素的字號掛鉤。 　　rem:長度與根元素的字號掛鉤。 即與html 的 font-size 掛鉤，若不設置，默認16px 。 　　【 em與rem區(qū)別 】 　　em與當前元素自身的font-size掛鉤，若當前元素沒有設置，則向上查找最近的祖先元素字號，直至根字號； 　　rem與當前元素字號無關，直接與根節(jié)點字號有關。 代碼 html{font-size: 48px; /* 修改根元素字號大小 */ }#div3{font-size: 200%; /*32號字*/background-color: yellow;height: 3rem; /* 3*32=94*/}

效果圖

三、【CSS3 背景屬性】 　　1、background-clip: 設置背景圖或者背景色的裁切顯示區(qū)域 　　　　border-box：從邊框外圓開始顯示 　　　　padding-box：從邊框內(nèi)圓開始顯示 　　　　content-box： 從文字內(nèi)容區(qū)域開始顯示 　　　　如果不在顯示區(qū)域的背景圖或者背景色，會被裁切掉不顯示 　　2、background-origin：設置背景圖左上角 從哪個位置 開始定位顯示 　　　　border-box：背景圖左上角從邊框外緣開始顯示 　　　　padding-box：背景圖左上角從邊框內(nèi)圓開始顯示 　　　　content-box： 背景圖左上角從文字內(nèi)容區(qū)域開始顯示 【注】background-origin 不會改變背景圖顯示區(qū)域的大小，只是決定 背景圖左上角 從哪個位置 開始定位。 　　　background-clip 只負責 裁切出顯示區(qū)域，并不關心背景圖定位在哪。 　　3、background-attachment：背景圖的附著方式 　　　　scroll ：背景圖隨區(qū)域滾動 　　　　fixed：背景圖充滿整個區(qū)域。并且是固定的，不隨滾動條滾動。 　　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置于不同位置，過渡特效作用完后恢復到原狀態(tài)的時間不同*/ }

效果圖

過渡前

過渡后 五、【 transform變換屬性 】 　　1、 常用的變換函數(shù)： 　　　　translate（10px,10px）第二個不寫，默認為0 　　　　scale（1.1）縮放 overflow=hidden； 　　　　rotate（90deg）90度旋轉，默認繞z軸轉 可以使用rotateY(180deg)；等 　　　　skew（20deg，30deg）扭曲，水平、垂直方向扭曲多少度 　　2、可以實現(xiàn)多種變換，用空格分隔 　　　　eg. transform：skew(180deg) scale(1.5) translate(200px 200px) ； 　　3、 transform-origin 定義變換起點,常用于旋轉變換 　　　　可選值:left center right top center bottom 　　　　也可以直接定義x、y坐標點，第一個數(shù)為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 調(diào)用聲明好的動畫 ； 　　　　animation的縮寫 　　　　Animation-name:動畫名稱 （聲明的關鍵幀name） 　　　　Animation-duration：動畫持續(xù)時間 （5s ） 　　　　Animation-timing-function：動畫速度曲線（ease） 　　　　Animation-iteration-count：動畫播放次數(shù)，默認為1.（infinite 無限次重復） 　　　　Animation-direction：動畫在下一個是否逆向播放，默認為（不逆向播放）normal.（逆序播放alternate） 　　　　Animation-fill-mode：表示動畫結束后停留在何種狀態(tài)。要使用這個屬性，動畫執(zhí)行次數(shù)必須有限次！（forwards 動畫停留在結束狀態(tài)；backwards表示動畫停留在初始狀態(tài)，默認效果） 　　　　【注】 name和duration必須設置，其他選填！可以同時設置多個動畫，多個動畫之間 用 ， 分隔。例如，animation：frame1 1s，frame2 1s...... ? ?響應式布局 一、實現(xiàn)響應式的方式: ? ? ? JS ?媒體查詢 流體布局 彈性布局 二. flex 彈性布局
　　1、了解兩個基本概念; ? ? ?　　 容器：需要添加彈性布局的父元素； ? ? 　　? 項目：彈性布局中的每一個子元素。 　　?2、彈性布局的使用 ?　　　　① 給父容器添加display：flex/inline-flex；可以使容器內(nèi)部采用彈性布局顯示，不遵循常規(guī)文檔流的顯示方式； ?　　　　② 容器添加彈性布局后，僅僅是內(nèi)容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規(guī)文檔流；（不打破文檔流，友好）? 　　　　?③ 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;屬性定義項目的排列順序。 數(shù)值越小越靠前，默認為0。 ? ? 　　?② flex-grow 屬性 定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。 ? ? 　　?③ flex-shrink 屬性 定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。 ? ? ?　　④ flex-basis 定義項目占據(jù)的主軸空間（設置后，若果主軸為水平，相當于設置項目的寬度，原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; /*調(diào)換次序*/flex-grow: 0; } .div3{order: 0;flex-grow: 2; flex-shrink: 1;align-self: flex-end; /*使序號3向下對齊*/ }

效果圖

CSS部分可以告一段落了~~~如果對你有幫助? → 點收藏哦~~~ ? ? ? ? ? ? ? ? ? ?

轉載于:https://www.cnblogs.com/Tracey-1023/p/7392483.html

總結

以上是生活随笔為你收集整理的两点补充——CSS3新属性以及弹性布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。