一、图片水平居中
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:表示用户是否可以调整缩放比例