CSS常见问题集合 - 澳门葡京官网 - 澳门葡京官网

CSS常见问题集合

1.页面内容居中

body{
margin:0 auto;
}

2.单行文字图标居中

div {
height:25px;
line-height:25px;
}
也就是给height和line-height同样的高度,再用margin-bottom来细调。

3.当网页字体小于12px时 chrome内核浏览器始终显示为12px

body{
-webkit-text-size-adjust:none;  *for chorme*
}

4.ie6双倍margin的bug

#box{
float:left;
width:100px;
margin:0 0 0 100px;   ie6会产生200px的距离
display:inline;   解决办法
}

5. 多个class合并书写

通常class里面只写一个值,事实上可以多个值,用空格隔开即可。
<span class=”a b c”>< span>

6.给网页换个鼠标指针(鼠标指针文件是.cur(静态) 或.ani(动态))

cursor:url(‘指针绝对路径’),auto;
通常这个css写在body和a里

7.input文本框光标居中

不同浏览器对这个理解不同
解决方法是设置input高度与文字高度相等,然后用上下padding填充即可。

8.css sprites用法(拼合图片,减轻服务器的压力)

.a {
display:inline-block;
height:16px; width:16px;
background:url(icon.png) x坐标 y坐标 no-repeat;
}网页中可以使用<span class=”a”>< span>来显示,当然,方法还有好多。

9.子容器增长时父容器不自动增长

给父容器定义样式
overflow:auto;
zoom:1;  兼容IE6

10.IE6 IE7下li高度异常

IE6 IE7将字体高度也算入行高 导致li高度异常 只需给li定义以下样式即可
font-size:0px;

11.DIV水平垂直居中

<div id=”1990c”>< div>
#1990c{
width:600px;
height:400px;
position:absolute;   设置绝对定位
top:50%;   距离顶部50%
left:50%;   距离左侧50%
margin-top:-200px;   向上移动div高度的一半
margin-left:-300px;   向左移动div宽度的一半
}

12.子容器margin-top后父容器下移

<div id=”head”>
<div id=”logo”>
< div>
< div>
#logo{
margin-top:10px;
}   实际效果:head下移10px
解决办法:给head定义样式overflow:hidden;

13、input、图片水平对齐

vertical-align: middle; //  100%

14、按钮在IE67下的黑边框问题

把input的type=”submit”改成type=”button”就可以了

15.CSS:span元素margin-top无效的根源

对行内元素(不包括可替换元素如img等):
设置宽度width 无效。
设置高度height无效,可以通过line-height来设置。
设置margin只有左右margin有效,上下无效。(这就是span的margin-top无效的原因)
设置padding只有左右padding有效,上下则无效。
块级元素的width/height/margin/padding都是有效的

css常见问题

版权声明:除特别注明外,本站所有文章均为澳门葡京官网原创

转载请注明:出处来自澳门葡京官网 » CSS常见问题集合

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  1. 域名优惠说道:

    朋友,交换链接吗?

    1. wp_tianshan说道:

      @域名优惠 可以的呀,我先把你的加起了。欢迎回访。