CSS 濾鏡技巧與細(xì)節(jié)：
（做一些炫酷的效果時用到）
blur 混合 contrast 產(chǎn)生融合效果
filter: blur()： 給圖像設(shè)置高斯模糊效果。
filter: contrast()： 調(diào)整圖像的對比度。
// 父元素加filter: contrast(20); 子元素加filter: blur(10px); 要加單位
自動加瀏覽器私有前綴css：
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
ie-css3.htc【可以讓ie實(shí)現(xiàn)css3里的圓角和陰影效果】
behavior: url(ie-css3.htc); /* 通知IE瀏覽器調(diào)用腳本作用于''類 */ http://fetchak.com/ie-css3/
要想讓主流瀏覽器都支持HTML5標(biāo)簽糠赦，使用非常簡單夷陋，只要鏈接一個js文件就可以了审残。所以棠隐，只要您的頁面上（頭部或底部）有這么段代碼：
<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
table:
table：border="1" cellspacing="0" borderColor=#000000 align=center border-collapse:collapse;合并
控制臺斷點(diǎn)調(diào)試:
按下F12，打開需要調(diào)試的JS文件轻黑，在行開頭單擊鼠標(biāo)左鍵糊肤，打下斷點(diǎn)，如下圖所示氓鄙。
快捷鍵F11是進(jìn)入下一步馆揉，shift+F11跳出進(jìn)入下一步，F(xiàn)8跳到下一個斷點(diǎn)抖拦，這樣就可以看到每一步程序運(yùn)行所顯示的結(jié)果升酣，此時可以用步驟6用到的方法來查看標(biāo)簽的屬性
偽元素清楚浮動:
div:after{content:"";height:0;clear: both;display: block; }
喚起QQ聊天和發(fā)送郵件:
<a target="_blank" >
<img border="0" src=".././img/1.jpg" alt="點(diǎn)擊這里給我發(fā)消息" title="點(diǎn)擊這里給我發(fā)消息"/>
</a>
<a href="mailto:zhusirs@139.com">發(fā)郵件最新版</a>
flex布局小結(jié):
flexbox布局：注意，設(shè)為 Flex 布局以后态罪，子元素的float噩茄、clear和vertical-align屬性將失效。
CSS的columns在伸縮容器上沒有效果复颈。
父元素寫：
display: flex;在父元素上聲明【個別瀏覽器加前綴】 inline-flex 這個屬性是用在行內(nèi)元素上的
justify-content:center; 子元素水平居中【中間沒間隙】
justify-content:flex-start; 左邊對齊
justify-content:flex-end; 右邊對齊
justify-content:space-between; 左右對齊邊緣 中間居中 項(xiàng)目中多數(shù)用這個
justify-content:space-around; 和上面差不多 但是兩邊會有間距
align-items:center; 子元素垂直居中
align-items:flex-start; 上面
align-items:flex-end; 下面
align-items:baseline;如果伸縮項(xiàng)目的行內(nèi)軸與側(cè)軸為同一條绩聘，則該值與[flex-start]等效。 其它情況下耗啦，該值將參與基線對齊凿菩。
align-items:stretch;伸縮項(xiàng)目拉伸填充整個伸縮容器。當(dāng)使用flex-wrap:wrap時候多行效果就出來了
align-content: flex-start || flex-end || center || space-between || space-around || stretch;【這個屬性和上面的差不多帜讲，當(dāng)使用flex-wrap:wrap時候多行效果就出來了衅谷。】
flex-direction:row; 默認(rèn)子元素從左到右【默認(rèn)值】
flex-direction:row-reverse; 從右到左
flex-direction:column; 從上到下
flex-direction:column-reverse; 從下到上排列
flex-wrap:nowrap;伸縮容器單行顯示似将，【默認(rèn)值】
flex-wrap:wrap;伸縮容器多行顯示会喝； 會自動居中 有上到下排列
flex-wrap:wrap-reverse; 和上面正好相反，有下到上排列
flex-flow:row; flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式
flex-flow:row-reverse wrap;主軸和行內(nèi)方向相反玩郊，從右到左，項(xiàng)目每一行由上到下排列（側(cè)軸）枉阵。
align-content: flex-start | flex-end | center | space-between | space-around | stretch; 屬性定義了多根軸線的對齊方式译红。如果項(xiàng)目只有一根軸線，該屬性不起作用兴溜。
flex-start：與交叉軸的起點(diǎn)對齊侦厚。
flex-end：與交叉軸的終點(diǎn)對齊。
center：與交叉軸的中點(diǎn)對齊拙徽。
space-between：與交叉軸兩端對齊刨沦，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等膘怕。所以想诅，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認(rèn)值）：軸線占滿整個交叉軸。
子元素：在子元素上設(shè)置的寬度如果不大于父元素的寬度就是本身的寬度来破，如果大于會自動縮小;
order:1; // 排序 其中一個數(shù)值越小 就在最前面
flex-grow：2篮灼；如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間徘禁。如果一個的flex-grow屬性為2诅诱，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍送朱。
flex-shrink: 1; 如果所有項(xiàng)目的flex-shrink屬性都為1娘荡，當(dāng)空間不足時，都將等比例縮小驶沼。如果一個項(xiàng)目的flex-shrink屬性為0炮沐，其他項(xiàng)目都為1，空間不足時商乎，前者不縮小央拖。
flex-basis：10px； 屬性定義了Flex項(xiàng)目在分配Flex容器剩余空間之前的一個默認(rèn)尺寸鹉戚。main-size值使它具有匹配的寬度或高度鲜戒，不過都需要取決于flex-direction的值。
flex：0 1 auto抹凳；屬性是flex-grow, flex-shrink 和 flex-basis的簡寫遏餐，默認(rèn)值為0 1 auto。后兩個屬性可選赢底。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
屬性允許單個項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式失都，可覆蓋align-items屬性。默認(rèn)值為auto幸冻；除了auto粹庞，其他都與align-items屬性完全一致。
CSS3 will-change粉墨登場:
增強(qiáng)頁面渲染性能 { 掛在hover上就好洽损，或者js動畫完畢刪除 auto }
3D transform會啟用GPU加速
/* 關(guān)鍵字值 */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* <custom-ident>示例 */-----------------------------------
will-change: opacity; /* <custom-ident>示例 */
will-change: left, top; /* 兩個<animateable-feature>示例 */
will-change雖然可以加速庞溜，但是，一定一定要適度使用碑定。那種全局都開啟will-change等待模式的做法流码，無疑是死路一條
/* 全局值 */
will-change: inherit;
will-change: initial;
will-change: unset;
css變量:
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0);
if (isSupported) { /* supported */} else { /* not supported */}
// 監(jiān)測瀏覽器是否支持css變量
JavaScript 操作 CSS 變量的寫法如下:
// 設(shè)置變量
document.body.style.setProperty('--primary', '#7F583F');
// 讀取變量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 刪除變量
document.body.style.removeProperty('--primary');
這意味著，JavaScript 可以將任意值存入樣式表延刘。下面是一個監(jiān)聽事件的例子漫试，事件信息被存入 CSS 變量。
const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
docStyle.setProperty('--mouse-x', e.clientX);
docStyle.setProperty('--mouse-y', e.clientY);
});
那些對 CSS 無用的信息碘赖，也可以放入 CSS 變量驾荣。
--foo: if(x > 5) this.width = 10;
上面代碼中外构，--foo的值在 CSS 里面是無效語句，但是可以被 JavaScript 讀取秘车。這意味著典勇，可以把樣式設(shè)置寫在 CSS 變量中，讓 JavaScript 讀取叮趴。
所以割笙，CSS 變量提供了 JavaScript 與 CSS 通信的一種途徑。
CSS定義變量
:root {
--main-bg-color: brown;
}
css漸變:
background:linear-gradient(to right,red 0%, green 50%, blue 100%); 線性漸變的百分比100%說的是位置 不是大小
/*徑向漸變 俗稱圓點(diǎn)漸變*/
/*background: radial-gradient(red, green, blue); 第一個指定的顏色從中心開始*/
/*background: repeating-radial-gradient(red, yellow 10%, green 15%); 重復(fù)的漸變前面屬性必須加repeating 否則后面的顏色全是最后一個顏色*/
css裁剪屬性:
clip: rect(top,right,bottom,left);
這是css2.1的裁剪屬性眯亦，以下是需要注意的幾點(diǎn)：
top：從元素上方開始裁剪
right：從元素左側(cè)開始裁剪伤溉，也就是從left方向右推進(jìn)，比如200px就是left：200px
bottom： 從元素上方開始裁剪妻率，也就是從top方向下推進(jìn)乱顾，比如200px就是top：200px
left：從元素上方開始裁剪
如果left >= right或者bottom <= top，則元素會被完全裁掉而不可見宫静，即“隱藏”走净。
meta:
在iPhone的瀏覽器中頁面將以原始大小顯示，不允許縮放孤里。
禁止縮放
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
width - viewport的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放
在iPhone 手機(jī)上默認(rèn)值是（電話號碼顯示為撥號的超鏈接）：
<meta name="format-detection" content="telephone=yes"/>
可將telephone=no伏伯，則手機(jī)號碼不被顯示為撥號鏈接
<meta name="format-detection" content="telephone=no"/>
ios設(shè)備對meta定義的私有屬性：（可以添加至主屏幕）
<meta name="apple-mobile-web-app-capable" content="yes" />
?網(wǎng)站開啟對web app程序的支持。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
?在web app應(yīng)用下狀態(tài)條（屏幕頂部條）的顏色捌袜；
?默認(rèn)值為default（白色）说搅，可以定為black（黑色）和black-translucent（灰色半透明）。
?若值為“black-translucent”將會占據(jù)頁面px位置虏等，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）弄唧。
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 移動端標(biāo)簽不可縮放
<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> dbclick 雙擊放大頁面
<link media="screen and (width:800px)" rel="stylesheet" href="example.css"> 引入media
HTTP 響應(yīng)頭方式：
Content-Security-Policy: block-all-mixed-content
<meta> 標(biāo)簽方式：
<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
