css的一些常见问题处理方法

1.css画小三角 （4边边框就是4个方向的三角）

　　　　 <span class="s1"></span>
        <span class="s2"></span>
        <span class="s3"></span>
        <span class="s4"></span>
        <style>
            span{display:inline-block;content:"";width:0;height:0;border:10px solid transparent;}
            .s1{border-left-color:red;}
            .s2{border-top-color:#000;}
            .s3{border-right-color:blue;}
            .s4{border-bottom-color:orange;}
        </style>

 （左图）

2. 带箭头的提示语

原理，父盒box相对定位并设置边框，然后伪类:before 画一颜色与边框颜色一样的 小三角，伪类：after画一白色的小三角； 两个小三角绝对定位，白色三角覆盖到灰色的三角上，错开1px 形成边框

.box{400px; height:100px;border:1px solid #ccc;position:relative;}
.box:before{
    content:"";  // content为必需
    position:absolute;
    0;
    height:0;
    bottom:-10px;
    left:100px;
    border:20px solid transparent;
    border-top-color:#ccc;
}
.box:after{
    content:"";
    position:absolute;
    0;
    height:0;
    bottom:-9px;
    left:100px;
    border:20px solid transparent;
    border-top-color:#ccc;
}

3.横向滚动条

　　当窗口小于页面主体宽度时才显示横向滚动条

//全局样式里设置：
body{
   min-1000px;(页面主体宽）
   width：100%；
 }

4.img标签与div 或p 上下间有间隙

img{display:block;}//将img设置为块级元素

5.table边框的另外设置方法

除都设上border：1px solid #ccc;
另外方法：设置背景 bgcolor="#ccc"; 然后设上间距 cellspacing="1",
由这个缝隙看到背景，就如边框一样

6.input type=file 的样式设置

思路：先用a标签做一个按钮，定好宽度并要加上overflow:hidden;属性，然后将<input type="file" />
放在a标签里面，通过定位，将input相对于a的右上角对齐，最后将input的透明度设为0即可。
（因为ie中，单击弹出窗口，只能是点击浏览按钮，定位右上角，确保浏览按钮挤满整个a标签）
a{display:inline-block; 100px; height:40px;position:relative; overflow:hidden;}
input{position:absolute; right:0;top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);}

7.行内元素间的间隙

一.元素间留白间距出现的原因就是标签段之间的空格或回车符，因此，去掉HTML中的空格，自然间距就木有了：
 
//写法1：
<div class="space">
    <a href="##">
    惆怅</a><a href="##"> 
    淡定</a><a href="##">
    热血</a>  
</div>
//写法2：
<div class="space">
    <a href="##"> 惆怅</a
    ><a href="##"> 淡定</a
    ><a href="##">热血</a>  
</div>
//写法3：
<div class="space">
    <a href="##"> 惆怅</a><!--
    --><a href="##"> 淡定</a><!--
    --><a href="##">热血</a>  
</div>

二、用css设置
.space{font-size:0;} //父div设置字体大小0 ，注意会影响其他子元素的字体大小
.space a{font-size:14px;}// 设置正常的字体大小

8.设置背景大图片居中

background:url(../img/bg.jpg) no-repeat center top; //加上 center top 属性；