css常用技巧【持续更新】_html/css_WEB-ITnose

         1、横向滚动条去除
    demo：
   

代码解析：    
   竖向正常显示，横向溢出隐藏。

        2、关于背景平铺（百分百显示）
    demo：
    .outer {width:100%;background:url() no-repeat center top;}
    .core {width:1000px; margin:auto;}
代码解析：
    双层div嵌套，外层div设置宽度百分百，no-repeat背景不重复，center背景图片的缩放基点在中间，top自上边往下显示；内层div设置固定宽度，margin自动【居中显示】。

        3、position与z-index
    demo：
    层被遮盖，不能正常显示。
问题解析：
    设置div的position和z-index。 详情：POSITION和Z-INDEX

        4、去除超链接虚线边框
    deme:
    点击超链接后，出现虚线边框
代码解析：
    IE浏览器：a {blr:expression(this.onFocus=this.blur());}
    FF浏览器：a {outline: none;} 或者缩小范围： a:focus { outline: none; } 注：后者使得鼠标左键在链接上按下，松开之前的这段时间里，仍会显示虚线的outline. 
    
        5、加入收藏（简洁代码）
    demo:
    右上角：加入收藏
代码解析：
加入收藏

        6、div应用float溢出fatherdiv
    demo:
    Fdiv不设置高度，div应用float，内容溢出
    解决方法：
    增加Bdiv并应用clear：both清浮动或者给Fdiv设置高度。

        7、CSS的缩写规则
    ①、color的缩写
    demo：
#ff00ee->#f0e  简单缩写  注：#f0f0fe->#f0f0fe 不可以缩写
    ②、单位的缩写
    数值为0，可以不写单位
    demo：
margin：0px->margin：0
    ③、margin和padding的缩写
    描述规则，顺时针上右下左
    demo：
margin-left：15px；margin-right:20px;margin-top:30px;margin-buttom:10px;--> 
margin：30px 20px 10px 15px； 上=30px、右=20px、下=10px、左=15px；
margin：30px；上=右=下=左=30px；
margin：30px 20px； 上=下=30px；左=右=20px；
margin：30px 10px 15px； 上=30px； 下=10px；左=右=15px；
注：上右下左顺时针不止适用于这里哦
    ④、border的缩写
    规则：border：border-width border-style border-color
    demo：
div {border-width：1px；border-style：solid；border-color：#f00；}/*边框宽度 边框样式 边框颜色*/
->div {border：1px solid #f00；}
    border-top、border-right、border-buttom、border-left不可以缩写，但是可以：
div{    border-width：1px；/*边框四个方向的border宽度都为1px*/
          border-style：solid dashed double；/*上方向边框：solid；下方向边框：dashed；左右方向边框：double；*/
          border-color：#f00 #000； /*上下边框颜色为：#f00； 左右边框颜色：#00*/
}