18/05/04日常总结整理

gulp自动化打包工具的安装与使用
https://blog.csdn.net/yangxiayuan/article/details/54172991

今日份的踩坑：

rgba和opacity还是有很大的区别的：比如想要父元素半透明子元素不透明，那么用rgba,在opacity中，不存在父元素透明子元素不透明这一说。

综上，rgba比较好用哈哈哈

z-index定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

日常写堆叠，但是某一天突然没有写定位，然后还想让它正常的堆叠，就完蛋了，磕在堆叠上只有有半个小时吧，说多了都是泪。

//修改placeholder的颜色
input::-webkit-input-placeholder { /* WebKit browsers */  
                color: #cccccc;  
              }  
              input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  
                color: #cccccc;  
              }  
              input::-moz-placeholder { /* Mozilla Firefox 19+ */  
                color: #cccccc;  
              }  
              input:-ms-input-placeholder { /* Internet Explorer 10+ */  
                color: #cccccc;  
              }  

Ie8及以下浏览器兼容背景半透明的写法

background: rgba(0, 0, 0, .5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000);
其中 样式里的 #88000000 说明：
• 前两位是十六进制透明值，00 是完全透明，FF 是完全不透明。
• 后六位是十六进制颜色值。

display在 IE7的兼容性问题

1. 原本是inline的元素加上display：inline-block之后正常显示 但是原本是block属性的元素加上display：inline-block之后，会失效
IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。
解决方案：
1、 先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失）。代码如下（…为省略的其他属性内容）：
div {display:inline-block;…}
div {display:inline;}
2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1 或float属性等）。代码如下：
div { display:inline-block; _zoom:1;_display:inline;} /推荐/
div { display:inline-block; _zoom:1;display:inline;} /推荐:IE67*/

天杀的IE7IE8哟 用户老爷们还不更新

兼容IE及FF的text-align
/IE/
text-align: left | center | right
/FF/
text-align: -moz-left | -moz-center | -moz-right

老是忘记写兼容性写法的我···