Css和css3的一些属性方法

CSS权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

清除浮动

父级上增加属性overflow：hidden
在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
使用成熟的清浮动样式类，clearfix
.clearfix:after,.clearfix:before{ content: “”;display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
清除浮动的使用方法：
.con2{… overflow:hidden}
或者
div class=”con2 clearfix”

1.盒子绝对居中(第一种方法)
position: absolute;
top: 50%;
margin-top:-100px;
left: 50%;
margin-left: -100px;
2.盒子绝对居中(第二种方法)
position: absolute;
top: 0;bottom: 0;left:0 ;right:0 ;
margin: auto;
3.盒子绝对居中(第三种方法)
html,body{height: 100%;}
body{display: flex;}或者flex改为grid。
__{ width: 200px; height: 200px;margin: auto;}

4.定位布局
html,body{width:100% ;height:100%;position: relative;display:flex;justify-content:center;align-items:center;overflow:hidden;}

 display: flex;
    justify-content:space-around;/*左右均分*/
    align-items:center;/*上下均分*/

/css3动画名称 时间 速度【匀速：linear】 循环【持续：infinite】/
animation:move 8s linear infinite;
-webkit-animation:move 3s linear infinite;
@keyframes move{
0%{ left: 200px;}
100%{left: -200px;}
}
@keyframes fun{
0%{transform:rotate(0deg);}
25%{transform:rotate(90deg);}
50%{transform:rotate(180deg);}
75%{transform:rotate(270deg);}
100%{transform:rotate(360deg);}
}

同级元素选择
.love:nth-child(2){}
.love:nth-of-type(2){}

/线性渐变/
-webkit-linear-gradient(#ffff00 10%,#00ffff 40%,#ff00ff 10%);

3D空间
ransform-style:preserve-3d;

//随机颜色 至少有七种写法
function randomColor(){
var r=Math.floor(Math.random()255);
var g=Math.floor(Math.random()255);
var b=Math.floor(Math.random()*255);
return “rgb(“+r+”,”+g+”,”+b+”)”;
}

CSS border-collapse 属性 ：http://www.w3school.com.cn/cssref/pr_tab_border-collapse.asp

CSS vertical-align 属性 ：http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

CSS letter-spacing 属性 ：字间距（in cm mm px em pt） http://www.w3school.com.cn/cssref/pr_text_letter-spacing.asp