CSS之乱七八糟的笔记
CSS 滤镜技巧与细节：
（做一些炫酷的效果时用到）
blur 混合 contrast 产生融合效果
filter: blur()： 给图像设置高斯模糊效果。
filter: contrast()： 调整图像的对比度。
// 父元素加filter: contrast(20); 子元素加filter: blur(10px); 要加单位
自动加浏览器私有前缀css：
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
ie-css3.htc【可以让ie实现css3里的圆角和阴影效果】
behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于''类 */ http://fetchak.com/ie-css3/
要想让主流浏览器都支持HTML5标签，使用非常简单，只要链接一个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;合并
控制台断点调试:
按下F12，打开需要调试的JS文件，在行开头单击鼠标左键，打下断点，如下图所示。
快捷键F11是进入下一步，shift+F11跳出进入下一步，F8跳到下一个断点，这样就可以看到每一步程序运行所显示的结果，此时可以用步骤6用到的方法来查看标签的属性
伪元素清楚浮动:
div:after{content:"";height:0;clear: both;display: block; }
唤起QQ聊天和发送邮件:
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=903319315&site=qq&menu=yes">
<img border="0" src=".././img/1.jpg" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
<a href="mailto:zhusirs@139.com">发邮件最新版</a>
flex布局小结:
flexbox布局：注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
CSS的columns在伸缩容器上没有效果。
父元素写：
display: flex;在父元素上声明【个别浏览器加前缀】 inline-flex 这个属性是用在行内元素上的
justify-content:center; 子元素水平居中【中间没间隙】
justify-content:flex-start; 左边对齐
justify-content:flex-end; 右边对齐
justify-content:space-between; 左右对齐边缘 中间居中 项目中多数用这个
justify-content:space-around; 和上面差不多 但是两边会有间距
align-items:center; 子元素垂直居中
align-items:flex-start; 上面
align-items:flex-end; 下面
align-items:baseline;如果伸缩项目的行内轴与侧轴为同一条，则该值与[flex-start]等效。 其它情况下，该值将参与基线对齐。
align-items:stretch;伸缩项目拉伸填充整个伸缩容器。当使用flex-wrap:wrap时候多行效果就出来了
align-content: flex-start || flex-end || center || space-between || space-around || stretch;【这个属性和上面的差不多，当使用flex-wrap:wrap时候多行效果就出来了。】
flex-direction:row; 默认子元素从左到右【默认值】
flex-direction:row-reverse; 从右到左
flex-direction:column; 从上到下
flex-direction:column-reverse; 从下到上排列
flex-wrap:nowrap;伸缩容器单行显示，【默认值】
flex-wrap:wrap;伸缩容器多行显示； 会自动居中 有上到下排列
flex-wrap:wrap-reverse; 和上面正好相反，有下到上排列
flex-flow:row; flex-flow属性是flex-direction属性和flex-wrap属性的简写形式
flex-flow:row-reverse wrap;主轴和行内方向相反，从右到左，项目每一行由上到下排列（侧轴）。
align-content: flex-start | flex-end | center | space-between | space-around | stretch; 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
子元素：在子元素上设置的宽度如果不大于父元素的宽度就是本身的宽度，如果大于会自动缩小;
order:1; // 排序 其中一个数值越小 就在最前面
flex-grow：2；如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。如果一个的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink: 1; 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，空间不足时，前者不缩小。
flex-basis：10px； 属性定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸。main-size值使它具有匹配的宽度或高度，不过都需要取决于flex-direction的值。
flex：0 1 auto；属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto；除了auto，其他都与align-items属性完全一致。
CSS3 will-change粉墨登场:
增强页面渲染性能 { 挂在hover上就好，或者js动画完毕删除 auto }
3D transform会启用GPU加速
/* 关键字值 */
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 */}
// 监测浏览器是否支持css变量
JavaScript 操作 CSS 变量的写法如下:
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');
这意味着，JavaScript 可以将任意值存入样式表。下面是一个监听事件的例子，事件信息被存入 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 读取。这意味着，可以把样式设置写在 CSS 变量中，让 JavaScript 读取。
所以，CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。
CSS定义变量
:root {
--main-bg-color: brown;
}
css渐变:
background:linear-gradient(to right,red 0%, green 50%, blue 100%); 线性渐变的百分比100%说的是位置 不是大小
/*径向渐变 俗称圆点渐变*/
/*background: radial-gradient(red, green, blue); 第一个指定的颜色从中心开始*/
/*background: repeating-radial-gradient(red, yellow 10%, green 15%); 重复的渐变前面属性必须加repeating 否则后面的颜色全是最后一个颜色*/
css裁剪属性:
clip: rect(top,right,bottom,left);
这是css2.1的裁剪属性，以下是需要注意的几点：
top：从元素上方开始裁剪
right：从元素左侧开始裁剪，也就是从left方向右推进，比如200px就是left：200px
bottom： 从元素上方开始裁剪，也就是从top方向下推进，比如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 手机上默认值是（电话号码显示为拨号的超链接）：
<meta name="format-detection" content="telephone=yes"/>
可将telephone=no，则手机号码不被显示为拨号链接
<meta name="format-detection" content="telephone=no"/>
ios设备对meta定义的私有属性：（可以添加至主屏幕）
<meta name="apple-mobile-web-app-capable" content="yes" />
?网站开启对web app程序的支持。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
?在web app应用下状态条（屏幕顶部条）的颜色；
?默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
?若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 移动端标签不可缩放
<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 响应头方式：
Content-Security-Policy: block-all-mixed-content
<meta> 标签方式：
<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
