1.做H5 App页面时,有时候,按钮可能会放到页面的最底下,这个时候可能会用到绝对定位(position: absolute),但是,当input 输入框被点击时,弹出的软键盘会顶起底部的按钮,就像这样:
这个时候,可以给 底下的 Button 或者包含这个Button的Div 添加一个CSS样式:z-index: -1
但是,这种方法只适用于内容不满一屏的情况下可以用,否则,就找不到按钮了
2.禁用input的自动提示功能
将input元素的autocomplete属性设置为off可以关闭自动提示,如果所有表单元素都不想使用自动提示功能,只需在表单form上设置autocomplete=off。
3.背景透明,文字不透明的办法
background-color:rgba(255,255,255,0.15) ->最后一位代表透明度
4.什么是CSS清除浮动?
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。
推荐使用伪类after的方法来清除浮动,通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点".",并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。
.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
5.overflow:hidden会影响inline-block布局,使用垂直对其可以修正这种情况
.a,.b{width:48%;height:30px;line-height:30px;display:inline-block;vertical-align: bottom;}