CSS常用技巧代码
发布时间：2015-10-23 16:13 | 人气数：1488
公共样式重置.css
@charset "utf-8";/* CSS重置 reset.css */
/*全局字体1rem等于100px*/
html{font-size:625%}
body{background:#FFF;font-size:0.14rem;color:#000;word-wrap:break-word;word-break:break-all;font-family:'微软雅黑','Microsoft Yahei','Helvetica Neue',Tahoma,Helvetica,"\5B8B\4F53",Arial,sans-serif}
body,form,img{padding:0;margin:0;border:0}
dl,dd,dt,ul,ol,li,h1,h2,h3,h4,h5,h6{list-style-position:outside;list-style-type:none;margin:0;padding:0;border:0}
input[type=radio],input[type=checkbox]{cursor:pointer}
i,p{display:block;font-style:normal;font-weight:normal;text-decoration:none;margin:0;padding:0}
li,dt,dd{white-space:normal}
td,p,li,form,input,select,div,a,span{page-break-after:auto}
table,td,img,div,span,form,input{border:none;margin:0;padding:0}
select{margin:0;line-height:normal;padding:0.01rem}
img{vertical-align:bottom;display:block}
/*默认链接样式*/
a{text-decoration:none;cursor:pointer}
a:link{color:#259}
a:visited{color:#999}
a:hover{color:#C00;text-decoration:underline}
a:active{color:#C00}
/*清除继承浮动*/
.clear{clear:both;font-size:0rem;visibility:hidden;width:0;line-height:0}
/*清除内部浮动*/
.clearfix{*zoom:1}
.clearfix:after{visibility:hidden;display:block;font-size:0rem;content:"";clear:both;height:0}
* html .clearfix{height:1%}
/*垂直居中IE11+*/
.vmiddle{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}
/*通用字体*/
.fN{font-size:0.14rem;line-height:0.2rem}
h1{font-size:0.2rem}
h2{font-size:0.18rem}
h3{font-size:0.16rem}
h4,h5,h6{font-size:0.14rem}
small{font-size:0.12rem}
/*常用效果 Flex*/
.fShadow{text-shadow:0.01rem 0.01rem 0 #EEE}
.shadow{-webkit-box-shadow:0.05rem 0.04rem 0.05rem rgba(0,0,0,0.5);-moz-box-shadow:0.05rem 0.04rem 0.05rem rgba(0,0,0,0.5);box-shadow:0.05rem 0.04rem 0.05rem rgba(0,0,0,0.5)}
.alpha{opacity:0.7;filter:alpha(opacity=70)}
.radius{-moz-border-radius:0.1rem;border-radius:0.1rem}
.mT10{margin-top:0.1rem}
.flex{
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: box;
display: flexbox;
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
width: 100%;
height: 100%;
background-color: gray;
}
所有一切都垂直居中，在IE11中要小心FLEXBOX
html,body{
height:100%;
margin:0;
}
body{
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
display:-webkit-flex;
display:flex;
}
文字投影
text-shadow:1px 1px 0px #630阴影效果
-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);网站变成灰色
html {
filter: grayscale(100%);//IE浏览器
-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);//谷歌浏览器
}
div禁止选择
unselectable="on" onselectstart="return false;"CSS 中form表单两端对齐，做form表单的时候，前面经常有姓名，年龄，公司名称等等，有的是2个字，有的是4个字，如何让字对齐呢？有的人的做法是打几个空格，但是这样不是很准确，最好的办法是如下：
<div class="box1">
<div class="test1">姓 名</div>
<div class="test1">姓 名 姓 名</div>
<div class="test1">姓 名 名</div>
<div class="test1">所 在 地</div>
<div class="test1">工 作 单 位</div>
</div>
.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;
}
}
给input的placeholder设置颜色
::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}
CSS :after 和：before选择器
.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0em}
透明度
opacity: .9; filter:alpha(opacity=90)IE7和IE6中opacity是没有用的，在IE6中DIV透明的方法一般用filter；
.haorooms{opacity: 0; cursor:pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}
CSS强制换行和不换行 自动换行（word-wrap会判断下一行是否能放下单词，如果能放下此单词则不断行而是换行）
div{
word-wrap: break-word;
word-break: normal;
}
强制英文单词断行（不管单词在下一行是否能单独放下都断行）
div{
word-break:break-all;
}
强制不换行
div{
white-space:nowrap;
}
CSS 圆角(border-radius必须放在最后声明，否则可能会失效。)
-moz-border-radius: 15px; border-radius: 15px;textarea禁止拖动
resize: none; //禁止拖动CSS3的一些前缀总结
-webkit /*为Chrome/Safari*/ -moz /*为Firefox*/ -ms /*为IE*/ -o /*为Opera*以旋转为例
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ -moz-transform:rotate(-3deg); /*为Firefox*/ -ms-transform:rotate(-3deg); /*为IE*/ -o-transform:rotate(-3deg); /*为Opera*/ transform:rotate(-3deg); /*为nothing*/css3的box-sizing
给了两个并排带边框的div百分比宽度，假如不用box-sizing，边框的宽度会在行内显示。用box-sizing：border-box,可以去除边框的占位。浏览器支持IE9以上及火狐、谷歌、Opera等等。案例如下：
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
</div>
父DIV设置为相对定位，子DIV设置为绝对定位，可解决元素在页面上的随意布局。
<div style="background-color:red;height:400px;width:400px;position:relative"> <div style="background-color:green;height:200px;width:200px;position:absolute;top:10px;right:10px;z-index:10">层1</div> <div style="background-color:blue;height:350px;width:350px;position:absolute;top:10px">层2</div> </div>固定table单元格宽度
当仅在td中使用<td style="width:98px;">固定宽度在IE中无效，必须在table中加上table-layout:fixed，然后在表格第一行设置td宽度就可以了。CSS的箭头向右样式
<div class="arrow-right"></div>箭头向右
.arrow-right{
width: 0;
height: 0;
border-width: 5px;
border-color: transparent transparent transparent #666;
border-style: dashed dashed dashed solid;
display:inline-block;
*zoom: 1;
*float: left;
}
利用特殊符号◆
.f_jt{background:#FFE9C8}
.f_jt span{color:#FFE9C8;position:absolute;top:64px;left:25px}
/*要将三角的color设置成背景色相同。要有边框色彩可以绝对定位两个符号叠加*/
固定table单元格宽度
当仅在td中使用<td style="width:98px;">固定宽度在IE中无效，必须在table中加上table-layout:fixed，然后在表格第一行设置td宽度就可以了。html标准代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>网页标题</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> </body> </html>html5手机网页标准代码
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>网页标题</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="format-detection" content="telephone=no, email=no" /> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> </body> </html>垂直居中于浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test8</title>
<style type="text/css">
div.test{
width:100px;
height:100px;
background:#ccc;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
让IE浏览器支持HTML5
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->
<!–[if lte IE 9]> <script>if (!/update\.htm/.test(location.href)) window.location = ‘//abc.com/update.htm'; </script> <![endif]–>
关键词：CSS3,前端样式表,CSS常用代码
