前端（三）
CSS續
一、CSS3新特性：
注意：在使用CSS3新屬性時，可以給CSS3樣式加上各大廠商的前綴，來兼容不同瀏覽器（“瀏覽器內核”負責對網頁語法的解析，內核分為渲染引擎和Js引擎）
?
? ? ??? 瀏覽器內核???????????????????? ?前綴??????????????????? ?瀏覽器
a、Gecko ? ? ? ? ? ? ? ? ? ?-moz-?????????????????? ??火狐
??b、Webkit（谷歌目前已經棄用） ? ? ? ? ? ? ? ? -webkit- ? ? ? ? ? ? ? ? ? ? ? ?谷歌、蘋果
c、Trident ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? -ms- ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?IE????????????????????????
d、Presto（歐朋目前已經棄用） ? ? ? ? ? ? ? ? ? ?-o- ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?opera（歐朋）
e、blink ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 目前谷歌和歐朋）
?
1、CSS3選擇器（屬性選擇器、兄弟選擇器、偽對象選擇器);（詳見上一篇）
2、彈性盒 display:flex;（詳見上一篇）
? 3、圓角 border-radius:;
? ? 1) border-radius : value ; 四個角（value中填像素或百分比，當盒子為正方形時如果填50%，則變成圓，當盒子為矩形時填50%，為橢圓）
? 2)border-radius : value ?value ; 左上角 ?右下角
? ? ? 3)border-radius : value ?value ?value ?value ; 左上角 ?右上角 ?右下角 ?左下角
?
?
注意：如果只要兩邊變圓，則value取高的一般像素?
? ? ?
4、陰影 ?
盒陰影：
box-shadow : ? ? 水平方向的位置 ? ? ? ? ? ? ?垂直方向的位置 ? ? ? ? ? ?模糊度 ? ? ? ? ? ? ? ? ? ? ? ? 擴展值 ? ? ? ? ? ? ? ? ?顏色 ? ? ? ? ? ? ? ? 陰影位置;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???(正右偏，負左偏) ? ? ? ? ? ? ? ??(正下，負上) ? ? ? ? ? ? ? ? (正值，值越大越模糊) ??(正變大，負變小) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??(默認值是外陰影outset?，也可以設置為內陰影);
? 字陰影：
text-shadow?: ? ? 水平方向的位置 ? ? ? ? ? ? 垂直方向的位置 ? ? ? ? ? ?模糊度 ? ? ? ? ? ? ? ? ? ? ? ? 顏色; ?
?(正右偏，負左偏) ? ? ? ? ? ? ? ??(正下，負上) ? ? ? ? ? ? ? ?(正值，值越大越模糊） ?
?
注意：a、如果要左右和下邊有陰影，則,如：box-shadow:0??15px??30px ;(下邊有陰影，左右淡色陰影通過模糊度撐開)
?
??b、如果box-shadow:0 0 30px rgba(0,0,0,.2);?，則水平和垂直都沒有，四周淡色陰影由模糊度撐開
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???
?
? ? ? ?5、2D轉換（transform）:使元素在形狀上或者位置上發生一定的改變
(有時如果需要動畫的元素需要進行變換，建議把該元素進行脫離文檔流)
?
位移
（1）Transform:translate(x,y) ? ? ? ? x取正值朝右邊移動，y取正值朝下移動（當translate中只取一個值，代表水平方向,正右，負左）
? ? ? ? ? ? （2）Transform:translateX(30px) ? 向右移動30px
? ? ? ? ? ? （3）Transform:translateY(30px) ? 向下移動30px
?
旋轉
?（1）transform:rotate(60deg);里面填度數，單位是deg，取正值順時針旋轉，取負值逆時針旋轉
（注意：旋轉會旋轉整個坐標軸，默認旋轉的中心點是整個形狀的中心，即寬高的一半。可以修改默認的旋轉中心點，通過transform-origin:left top;修改中心點）
（2）transform:translate(20px,20px) ? rotate(60deg); 先位移再旋轉
transform:translate(20px,20px) ?rotate(60deg); 先旋轉在位移
上述區別總結：旋轉會旋轉整個坐標軸（一般情況，如果要旋轉，把旋轉寫在位移的后面）
（3）transform:rotateX(60deg)?指繞著水平X軸旋轉
（4）transform:rotateY(60deg)?指繞著垂直Y軸旋轉
?
縮放?
（1）transform : scale(x,y) ; ? ? ? ? ? ? 取值0~1縮小，>1放大，當其中放一個值時等比例縮放
? ? ? ? ? ? （2）transform : scaleX() ; ? ? ? ? ? ? ?水平方向上的縮放
? ? ? ? ? ? （3）transform : scaleY() ; ? ? ? ? ? ? ?垂直方向上的縮放
?
? 傾斜
（1）transform : skewX(30deg) ;
（2）transform : skewY(30deg) ;
（3）transform : skew(xdeg,ydeg) ; ? ? ?取一個值代表水平方向，兩個值代表水平盒垂直
?
?? 6、背景漸變
（1）線性漸變
background: linear-gradient(to top,red,yellow);
? ? ? ? ? 如：
background:linear-gradient(red , pink , palegreen , paleturquoise);??默認由上向下
? ? ? ? ? ? ? ?background:linear-gradient(to right?, red , pink , palegreen , paleturquoise );?朝右
? ? ? ? ? ? ? ?background:linear-gradient(to right bottom?, red , pink , palegreen , paleturquoise);?朝右下
（2）徑向漸變
background: radial-gradient(top,circle,red,yellow);
如：
?background: radial-gradient(red,pink,palegreen,paleturquoise);??默認由中心向周圍
????????? ? background:-webkit-radial-gradient(top,red,pink,palegreen,paleturquoise);由上向周圍
background:-webkit-radial-gradient(top left,red,pink,palegreen,paleturquoise);由左上向周圍
background:-webkit-radial-gradient(top left, circle，red,pink,palegreen,paleturquoise);?由左上向周圍，漸變形狀為圓
?
? 7、過渡
? ? ? ? ? 特點：1、指通過觸發事件從一種樣式平滑的過渡到另外一種樣式（觸發事件，如：點擊，懸浮等）
2、只能做點到點的簡單動畫
語法：
簡寫：transition : 過渡的屬性 ? 過渡的持續時間 ? 過渡的速度變換類型 ? 過渡延遲 ；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 顏色 ? ? ? ? ? ? ? ? ? ? ms/s ? ? ? ? ? ? ? ? ? ? linear (勻速) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ms/s
數值（寬高....） ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?ease（默認值，先加速后減速）
陰影 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ease-in（加速效果）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 轉換（transform） ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?ease-out（減速效果）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 背景漸變 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?ease-in-out（先加速后減速）
? ? ? ? ?如：transition : all 1s ? (這里的all指所有需要變換后的屬性) ? ? ? ? ? ? ? ? 這句寫在需要調用過渡的CSS樣式中
?
屬性單寫：
transition-property:;
transition-duration:;
? ?transition-timing-function:;
transition-delay:;
?
8、animation動畫：通過控制每一幀，可以制作復雜動畫
?
?
（1）設置動畫
語法：
???????????? @keyframes name（自定義）{
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?from/ 0%{
?????????? ?Css樣式
}
??
percent{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Css樣式
? }
?
to/100%{
??????????? Css樣式
? }
}
?
(2）調用動畫 ? ? ? ? ? （在想調用動畫的樣式中添加）
?語法：
?
? 簡寫：animation??: 動畫名字 ? ? ? ?動畫持續時間 ? ? ? ?速度變化類型 ? ? ? ? ?播放次數 ? ? ? ? 播放方向 ? ? ? ?forward ；
? name ? ? ? ? ? ?s/m ? ? ? ? ? ? ? ? ? ?linear ? ? ? ? ? ? ? ? ? ? number ? ? ? ? ? ? ? ?alternate ? ? ? ?動畫停在最后一幀,不然默認值停回初始狀態
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?ease ? ? ? ? ? ? ? ? ? ? ?infinite(無限)
ease-in
ease-out
ease-in-out
屬性單寫：
?
二、CSS Hack（主要針對IE版本瀏覽器）
優點：解決CSS樣式兼容IE低版本問題，低版本的IE瀏覽器，如IE6、IE7、IE8
缺點：大規模使用CSS Hack會帶來維護成本的提高以及瀏覽器版本變化而帶來類似Hack失效等系列問題，即對當前版本起作用的hack，也許升級一下，界面又亂了
（即盡量找通用方法，減少使用CSS Hack）
?
1、條件注釋：
（1）<!--[if IE 9]>
<style>
div{ color : blue } ? ? ? ? ? ? ? //在IE9下，字體顏色為藍色
</style> ? ? ? ?
<![endif]-->
?
（2）<!--[if IE]>
<p>只能在IE瀏覽器上看見這段文字</p> ? ? ? ? ? //只能在IE瀏覽器上看見這段文字
<![endif]-->
?
（3）<!--[if gt IE 6]>
<style>
<span>這段文字只能在大于IE6版本上出現</span> ? ? ? ? //<span>這段文字只能在大于IE6版本上出現</span>
</style>
<![endif]-->
?
?
總結上述：
條件注釋的語法：<!--[if ?條件]> ? ? ? ? ? ? ??
代碼塊；
<![endif]-->
?
其中“條件符號”有：
大于 ? ?gt ?
大于等于 ? ?gte
小于 ? ?lt
小于等于 ? ?lte
非指定版本 ? ?！
?
2、屬性前后綴：
(1)”_”減號是IE6專有的hack
(2)”\9”IE6/IE7/IE8/IE9/IE10都生效
(3)”\0”IE8/IE9/IE10都生效，是IE8/9/10的hack
(4)”\9\0”只對IE9/IE10生效，IE9/10的hack
?
?
設定優先級最高 , 在后面加上!important：如background-color:red?!important;
?
?
三、媒體查詢（以原生代碼寫響應式布局，編寫一次代碼適應于多屏幕尺寸終端）
?
實例：
注意：在頭部加入<meta name=”viewport” content=”device-width , initial-scale=1”>
(為了使電腦上的Chrome或者其他瀏覽器能夠支持手機模式，不然只支持pad端)
?
<head>
<style>
?? ?????????/*PC端開始*/
????? ??????@media screen and (min-width:992px){
??????????????? ??????body{
background-color:pink; ?????????? ????????????????????????????????
}
?}
??????????? /*PC端結束*/
?
?????????? ?/*iPad端開始*/
?????????? ?@media screen and (min-width:769px) and (max-width:992px){
???????????????????? ?body{
???????????????????????????????????? background-color:purple;??????
}
? }
??????????? /*iPad端結束*/
?
?????????? ?/*移動端開始*/
????????? ??@media screen and (max-width:768px){
?????????????????? ???body{
?????????????????????????? ? ?background-color:blue; ????????????????
?}
}
??????????? /*移動端結束*/
</style>
</head>
?
書寫規則：
????在書寫響應式布局中，寬度盡量用百分比表示（以方便各種屏幕大小的比例），高度視情況而定。在開始書寫響應式布局時，首先按照PC頁面的比例開始編寫，書寫完PC端布局之后，將移動端，pad端和PC端顯示中有區別部分的代碼段，分別放入各自的@media中，經過各自需求的更改，就完成了。
?
?
?
四、其他
1、懸浮圖標顯示
cursor : pointer ; ? ? ?把鼠標箭頭圖標顯示轉換成小手圖標顯示
cursor : wait ; ? ? ? ? ?把鼠標箭頭圖標顯示轉換成等待的圓圈圖標顯示
?
2、字體圖標
（1）借助阿里巴巴矢量圖庫
???????????第一步：將需要的圖標加入購物車；
???????????第二步：對購物車中的圖標點擊“下載代碼”，獲得壓縮包；
???????????第三步：打開壓縮包之后，選取“iconfont.css , iconfont.eot , iconfont.svg , iconfont.ttf
iconfont.woff , demo_unicode.html”放入項目的css文件夾（其中以.woff .ttf .svg . eot為后綴的文件，是為了兼容各個瀏覽器的）
???????????第四步：引入時在head中加入<link rel=”stylesheet” href=”url”>
? ? ? ? ? ?如：<i class=”iconfont”>十六進制</i>
?
?
?
?
?
轉載于:https://www.cnblogs.com/qianbin/p/9431305.html
總結
- 上一篇： 数据库架构设计——数据库选型
- 下一篇： 猫抓 浏览器插件安装教程，适用Chrom