css控制截断文字溢出:
.块{
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
}
自动换行
dd{white-space:normal; word-break:break-all;}
强制不换行
dd{white-space:nowrap;}
高效隐藏h1
h1{white-space:nowrap;text-indent:100%;overflow:hidden}
解决IE6margin双倍的问题
.fl{float:left;display:inline}
.fr{float:right;display:inline}
自适应高度
(1)在父div中加入一个子div
.clear{clear:both}
(2)在父div的css中加入属性
#wrapper{ overflow:hidden; zoom:1; margin:5px auto;}
CSS清除浮动 万能float闭合
.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix {display:block;}
字体简写
font:italic small-caps bold 1em/140%"Lucida Grande",sans-serif;
列表简写
list-style:square inside url(image.gif);
背景颜色半透明
/*半透明状态*/
background: #000;
opacity: 0.6;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
/*这种不用设置背景颜色,避免半透明*/
filter:'progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000)'
去掉链接(包括图片链接)的虚线边框
/* for IE */
a,area { blr:expression(this.onFocus=this.blur()) }
/* for Firefox */
:focus { outline: none; }
图标和文字对齐
<span style="vertical-align:middle;" ><img src="b-grade.png" ></span><a style="vertical-align:middle;" href="">链接链接链接链接</>
如何对齐文本与文本输入框
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
文字与文本域怎么顶部对齐
textarea{
vertical-align:top;
}
全站变灰
*{filter:gray; color:gray;}
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}
区别IE和非IE浏览器CSS HACK代码
#divcss5{
background:blue; /*非IE 背景藍色*/
background:red \9; /*IE6、IE7、IE8背景紅色*/
}
区别IE6,IE7,IE8,FF CSS HACK
【区别符号】:「\9」、「*」、「_」
【示例】:
#divcss5{
background:blue; /*Firefox 背景变蓝色*/
background:red \9; /*IE8 背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:因为IE系列浏览器可读「\9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就会让浏览器正确的读取到自己看得懂得CSS语法,所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。
区别IE6、IE7、Firefox (EXP 1)
【区别符号】:「*」、「_」
【示例】:
#divcss5{
background:blue; /*Firefox背景变蓝色*/
+background:black; /*IE6和IE7 背景变黑色*/
}
【说明】:IE7和IE6可读「*」(米字号),IE6又可以读「_」(底线),但是IE7却无法读取「_」,至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」,因此就可以透过这样的差异性来区分IE6、IE7、Firefox
区别IE6、IE7、Firefox (EXP 2)
【区别符号】:「*」、「!important」
【示例】:
#divcss5{
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
*background:orange; /*IE6 背景变橘色*/
}
【说明】:IE7可以辨识「*」和「!important」,但是IE6只可以辨识「*」,却无法辨识「!important」,至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。
如何让已知高度的容器在页面中水平垂直居中
#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}
如何让未知尺寸的图片在已知宽高的容器内水平垂直居中
#middle{display:table;table-layout:fixed;width:200px;height:200px;text-align:center;}
#middle > div{display:table-cell;vertical-align:middle;width:100%;height:100%;}
#middle > div > p{}
#test是img的祖父节点,p是img的父节点。Know More:未知尺寸的图片如何水平垂直居中
如何让某个元素充满整个页面
html,body{height:100%;margin:0;}#test{height:100%;}
禁用调整文本框大小
textarea {
resize: none;
}
广告图直角变圆角
外层div {
border-radius:6px;overflow:hidden
}
子层一个左浮动,一个右浮动,父层清浮动
使用css制作正三角和倒三角
.triangle_up {position:absolute; left:0; top:0;width:0;height:0;overflow:hidden;border-left:4px solid transparent; border-right:4px solid transparent;border-bottom:4px solid #ca0309;_border-left:4px solid #fff;_border-right:4px solid #fff; cursor: pointer;}
.triangle_down {position:absolute; left:0; top:0;width:0;height:0;overflow:hidden;border-left:4px solid transparent; border-right:4px solid transparent;border-top:4px solid #ca0309;_border-left:4px solid #fff;_border-right:4px solid #fff; cursor: pointer;}