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

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*/
}

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com