CSS3常用属性

最近在写项目的时候有时候用到了一些CSS3的属性，大部分时候都是为了赶项目直接拿过来用了，用完就忘了，防止对一些组件太依赖导致以后都不会写代码了，我觉得还是有必要来学习一波，想看就看。

CSS3属性手册

http://www.css88.com/book/css/为CSS3快速查找手册，可按需获取。
下面我来总结下个人认为常用的属性

1、定位(Positioning)

position

语法：position：relative | absolute | fixed
relative：
按照自身位置使用top,bottom,left,right偏移不会影响到其他元素；
absolute：
如果存在父元素，按照父元素的位置偏移，如果不存在父元素，则按照body元素偏移；
fixed：
定位按照body元素来偏移，当出现滚动条时，对象不会随着滚动。也就是我们在大众网页上见到的header栏下面的内容滚动，而header栏不会随之滚动的效果。

来一个小例子实现垂直居中：




  
  test
  


  
    需要垂直居中的元素

效果如下：

1532768896(1).png

2、布局(Layout)

(1).display

table系.png

这里，我还要使用一下display: table和display:flex分别做两个小案例
先上图：

tableCell.png

如果是为了实现这样的布局代码如下：

有时候我们希望图片和文字是横排布局的：

tableCellInline.png

只需稍稍改动代码即可：

再来做一个flex弹性布局的小案例：
里面的内容垂直居中，具体列表是Inline的布局

flexInline.png




  
  display小案例
  


  
    
      内容一
      内容二
      内容三
      内容四

flex布局个人觉得还是非常强大的，具体可移步http://www.ruanyifeng.com/blog/2015/07/flex-examples.html查看阮一峰的网络日志，真的real全面了。

(2).clear：清除浮动

当使用float布局时，其元素不占常规流，若需要清除浮动，可在其他元素上设置clear属性




  
  清除浮动小案例
  


  
    浮动对象
    清除浮动的对象

clear.png

3、动画(Animation)

animation:所有动画属性的简写属性
animation-name:规定@keyframes动画的名称
animation-duration:规定动画完成一个周期所花费的时间
animation-timing-function:规定动画的速度曲线，默认是ease(平滑过渡)
animation-delay:规定动画何时开始
animation-iteration-count:检索或设置对象动画的循环次数
animation-direction:检索或设置对象动画在循环中是否反向运动
animation-play-state:检索或设置对象动画的状态
animation-fill-mode:检索或设置对象动画时间之外的状态
做了个简单的小案例，代码如下：




  
  animation入门