css相关

1.css如果冲突，可以使用!important提升优先级

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
height: 27px!important;
line-height: 27px!important;
border-radius: 0 4px 4px 0;
}

2.如果js定义了样式比如（background），会导致相应的css文件的background无效，因为js定义是内联样式，优先级比css高，

解决方式：采用!important提升css的优先级

3. 子元素在div中水平居中

margin:0 auto;

在div中垂直居中

将line-height:设定为div的高度

4.关于height:100%;
要想高度百分比起作用，一般来说，要满足两个条件：其一，父标签有高度可寻，就是向上遍历父标签要找到一个定值高度（body，html另外讨论），如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用；其二，标签本身的属性，如果inline属性的标签，如果没有浮动，zoom，或是绝对定位之类属性是不支持百分比高度的，block或inline-block属性可以说是高度百分比起作用的前提条件之一吧。
而这里要讲的是关于body和html的高度百分比显示的。
默认状态下，body不是高度100%显示的，不要看body定义background属性好像body就是满屏显示的，正如上面所推断的，此背景已非body之背景。用这个body{background:#039; border:50px solid #C00;}一测便知。看边框范围是否高度100%显示，答案是否定的。见下图（截自IE6，Firefox浏览器下表现一致）：
body默认高度是不100%显示的
body默认高度是不100%显示的
那么body是否支持height:100%;呢？经过我的测试，IE6支持，Firefox浏览器不支持。
要想让Firefox浏览器也支持body的height:100%;是简单的，就是设置html标签height:100%;一旦设置了height:100%;则无论哪个浏览器下body都支持height:100%;了，而body内部的容器也可以支持height:100%;了。
前段时间看到百度的一道面试题，说什么透明层无论滚动与否都满屏显示，其实就是对html和body标签做一番手脚，两者高度100%显示，同时溢出隐藏（overflow:hidden），然后用一个div高度100%系显示，溢出滚动。而这个透明层就使用绝对定位且与这个div平级，高宽100%显示，就可以使得无论怎么滚动这个透明覆盖层都是满屏显示的。这其实也就解决IE6下浮动层固定定位的经典方法。

</pre><p>5.一个简单的遮罩层</p><p><pre name="code" class="javascript">function show_overlay(){
    var docHeight = $(document).height(); //获取窗口高度

    $('body').append('<div id="overlay"></div>');

    $('#overlay')
        .height(docHeight)
        .css({
            'opacity': .2, //透明度
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'background-color': 'lightskyblue',
            'width': '100%',
            'z-index': 5000 //保证这个悬浮层位于其它内容之上
        });
}