transform变换
transform: translate(50px, 100px);
(X) (Y)
transform: rotate(90deg);
(顺时针旋转90°)
transform: scale(2, 4);
(宽x2) (高x4)
transform: skew(30deg, 20deg);
(水平线拉伸30deg) (垂直线拉伸20deg)
// 若两种变换方式,空格隔开即可
transition过渡
transition: width 5s ease 2s;
(名)(时)(速)(延)
animation动画
animation: myfirst 5s ease 2s ifinite alternate;
(名)(时)(速)(延)(次) (向)
css选择器
h1 span {
/*会选择h1里的所有后代span元素*/
}
h1 > span {
/*会选择h1里的所有子代span元素*/
}
h1.company > span {
/*会选择 它的class属性包含“company“的h1,里的所有span子元素*/
}
h1 + span {
/*会选择紧接h1的span*/
}
1)<div class="clear></div>
//css:
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
2)让子div在父div里居中:
- 先让父div:
//css
position:relative;
- 然后让子div:
//css
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
// 注意:因为使用了transform: translate(...),所以 子元素的子元素的fixed会失效哦,慎用!
效果图
position: absolute;
top: 50%;
left: 50%;
//效果如下:
position: absolute;
top: 50%;
left: 50%;
transform: translate(0%, -50%);
//第一个是水平移动量,第二个是垂直移动量(%是相对于自身左负右正,上负下正)
//效果如下:
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
//效果如下:
(出处:http://www.jb51.net/css/451409.html)
3)弹性盒模型FlexBox
flexbox分为两个部分:container、items
container:弹性容器
将父div设置:
display:flex
items:弹性孩子
- 【情况一】所有孩子都设置了flex:
结果:将孩子平分父div宽度
//其中,item1占1/4,item2占2/4,item3占1/4
.item1 {
flex:1
}
.item2 {
flex:2
}
.item3 {
flex:1
}
效果图:
- 【情况二】存在有孩子没设置flex,但是注明了宽度width:
结果:优先划分特意注明宽度width的孩子,剩下的再flex分配
- 【情况三】存在有孩子没设置flex,没有注明宽度:
结果:还是* 没有注明宽度的孩子 优先,但是由于没有注明宽度,根据他的文字撑开大小*,然后剩下的再按flex分配
总结:flex弹性留是最后分配的
出处:http://blog.csdn.net/lihongxun945/article/details/45458717