Web前端常见问题解决方法

一、图片水平居中

img必须被一个容器包裹起来，div、p、span都可以，但是建议用p。

方法如下：

<p style=“text-align:center”><img src="……"></p>

二、图片垂直居中

外部容器设置：display:table，img标签外嵌套一个span标签，并设置span的显示模式为display:table-cell;vertical-align:middle。

三、用表格布局时，如何取消td之间的空隙

table{border:0;cellspacing:0;cellpadding:0;border-collapse:collapse;}

table tr td{border:1px solid #e8e8e8;}

四、表格跨列后设置列宽不起作用

<table style="table-layout:fixed">

<colgroup>

<col style="width:15%;"></col>

<col style="width:80%;"></col>

<col style="width:5%;"></col>

<col></col>

</colgroup>

然后接正常的跨列的行

五、解决页面中的两个window.onload冲突的问题

使用Jquery中的$().ready(function(){});方法

六、设置背景色透明，文字不透明

background-color:rgba(0,0,0,0.5)

七、背景图填充的几种方法

①background-size:auto

auto是默认值，不改变背景图片的原始高度和宽度；

②background-size:<长度值>

成对出现如200px 50px，将背景图宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

③background-size:<百分比>

当出现0%~100%之间的任何值，将背景图宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

④background-size:cover

覆盖的意思，即将背景图等比缩放以填满整个容易；

⑤background-size:contain

容纳的意思，即将背景图等比缩放至某一边紧贴容器边缘为止。

八、竖版一屏按百分比布局

html,body{height:100%;}

#container{min-height:100%;}

*html #container{height:100%;}

.box{width:100%;height:100%;}

九、手机网页调整大小

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例