css中常用的易忘标签

CSS中有很多标签写法，不常用的话，就容易忘记，手写写不出来，还要再查资料什么的，现在对我工作中容易忘记的标签写法整理一下：

1、谷歌闭合机制

.clear{height:1px;overflow:hidden;clear:both;}

.clearfix{*zoom:1}

.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}

2、字体

.SimSun { font-family:'SimSun'; } //宋体

.yahei {font-family:'Microsoft YaHei'; }//微软雅黑

其他字体英文写法请看：http://hi.baidu.com/confidence68/item/b2ceac5c452e971baaf6d73e

3、透明度

opacity: .9;filter:alpha(opacity=90)

IE7和IE6中opacity是没有用的，在IE6中DIV透明的方法一般用filter；

.otherpay{opacity: 0; cursor:pointer;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}

4、超出长度显示省略号

需要制定宽度。

display:bolck;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

5、阴影效果

-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);

-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);

box-shadow: 0 1px 1px rgba(0,0,0,.2);

6、css3图片自适应宽度

-webkit-background-size: contain;

background-size: contain;

7、CSS强制换行：

自动换行

div{ 

word-wrap: break-word; 

word-break: normal; 

}

强制英文单词断行

div{

word-break:break-all;

}

强制不换行 

div{

white-space:nowrap;

}

8、常见css3效果，

参考：http://hi.baidu.com/confidence68/item/9d8224e42c0236275b7cfb05

http://hi.baidu.com/confidence68/item/823d35ab9d1b6c2d8919d337

9、网站哀悼，整体变灰的写法：

http://hi.baidu.com/confidence68/item/3fbdd14c59d2effcdc0f6cad

10、IE6背景透明最好的办法：

http://hi.baidu.com/confidence68/item/ca53431f48ca5907b98a1a09

11、谷歌浏览器滚动条美化和css选中状态颜色修改

http://hi.baidu.com/confidence68/item/76c8175149fb7e4c4eff201e

12、DIV可编辑

要使div可编辑 必须 加入 contentEditable="true" 这个属性。

<div id="div1" contentEditable="true"  ></div>  

<div id="div2" contentEditable="true" ></div>  

 <div contentEditable="true"  id="div3"></div>  
 <input type="button" id="cmdInsert" onclick="执行向div3插入html方法"/>

13、DIV禁止选择
加上属性：unselectable="on" onselectstart="return false;"

<div unselectable="on" onselectstart="return false;">
sdfsdfswerwer324234234234
</div>
这样，DIV里面的东西就不能选择复制了！

14、CSS 中form表单两端对齐
 .test1 {
            text-align:justify;
            text-justify:distribute-all-lines;/*ie6-8*/
            text-align-last:justify;/* ie9*/
            -moz-text-align-last:justify;/*ff*/
            -webkit-text-align-last:justify;/*chrome 20+*/
        }
        @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
            .test1:after{
                content:".";
                display: inline-block;
                width:100%;
                overflow:hidden;
                height:0;
            }
        }


html:
        <div class="box1">
            <div class="test1">姓 名</div>
            <div class="test1">姓 名 姓 名</div>
            <div class="test1">姓 名 名</div>
            <div class="test1">所 在 地</div>
            <div class="test1">工 作 单 位</div>
        </div>






15、CSS 圆角


IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都支持上述的border-radius属性。早期版本的Safari和Chrome，支持-webkit-border-radius属性，早期版本的Firefox支持-moz-border-radius属性。
目前来看，为了保证兼容性，只需同时设置-moz-border-radius和border-radius即可。
　　-moz-border-radius: 15px;
　　border-radius: 15px;
（注意：border-radius必须放在最后声明，否则可能会失效。）
另外，早期版本Firefox的单个圆角的语句，与标准语法略有不同。
　　* -moz-border-radius-topleft（标准语法：border-top-left-radius）
　　* -moz-border-radius-topright（标准语法：border-top-right-radius）
　　* -moz-border-radius-bottomleft（标准语法：border-bottom-left-radius）
　　* -moz-border-radius-bottomright（标准语法：border-bottom-right-radius）