css3 重要属性,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

body, html {

width: 100%;

height: 100%;

margin: 0;

}

#parentEle {

position: relative;

width: 100%;

height: 100%;

}

#childEle {

position: absolute;

top: 50%;

left: 50%;

width: 150px;

height: 40px;

line-height: 40px;

padding: 0 10px;

margin: -20px 0 0 -75px;

border: 1px solid #cdcdcd;

}

需要垂直居中的元素

效果如下：

1532768896(1).png

2、布局(Layout)

(1).display

语法：display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex

这一看一大堆的，我的理解是凡是前面标了'inline-'的就是将元素定义为内联元素了，display:flex在我的日常开发中也是首选，它是CSS3的属性，手册上讲了个table的案例，还是一样，想用可用，稍微加了个自适应，代码如下：

table系列

html, body {

margin: 0 8px;

}

h1{

margin: 10px 0;

font-size: 20px;

}

ul{

margin: 0;

padding: 0;

list-style: none;

}

.table{

display: table;

width: 100%;

border-collapse: collapse;

border: 1px solid #ccc;

}

.table-caption{

display: table-caption;

margin: 0;

padding: 5px;

font-size: 16px;

text-align: center;

}

.table-row-group{

display: table-row-group;

}

.table-row{

display: table-row;

}

.table-row-group .table-row:hover,.table-footer-group .table-row:hover{

background: #f6f6f6;

}

.table-cell{

display: table-cell;

padding: 5px;

border: 1px solid #ccc;

}

.table-header-group{

display: table-header-group;

background: #eee;

font-weight: bold;

}

.table-footer-group{

display: table-footer-group;

}

表格名称

• 序号
• 姓名
• 年龄

• footer
• footer
• footer

• 1
• John
• 19

• 2
• Mark
• 21

• 3
• Kate
• 26

table系.png

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

先上图：

tableCell.png

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

display小案例

.parentEle {

display: table;

width: 100%;

border-collapse: collapse;

}

.childEle {

display: table-cell;

text-align: center;

border: 1px solid #cdcdcd;

border-collapse: collapse;

padding: 7px;

}

.childEle img {

width: 50px;

}

内容一

内容二

内容三

内容四

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

tableCellInline.png

只需稍稍改动代码即可：

display小案例

.parentEle {

display: table;

width: 100%;

border-collapse: collapse;

}

.childEle {

display: table-cell;

text-align: center;

border: 1px solid #cdcdcd;

border-collapse: collapse;

padding: 7px;

}

.childEle .img-content {

display: inline-block;

vertical-align: middle;

}

.childEle img {

width: 50px;

}

内容一

内容二

内容三

内容四

再来做一个flex弹性布局的小案例：

里面的内容垂直居中，具体列表是Inline的布局

flexInline.png

display小案例

.parent-element {

display: flex;

justify-content: center;

align-items: center;

margin: auto;

width: 500px;

height: 300px;

background: #ff8763;

}

.child-element {

padding: 7px;

background: yellow;

color: #2260d0;

border-right: 1px solid #cdcdcd;

}

内容一

内容二

内容三

内容四

(2).clear：清除浮动

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

清除浮动小案例

.float-item {

float: right;

background: #ff3e3e;

color: #fff;

padding: 7px;

}

.clear-item {

clear: right;

}

浮动对象

清除浮动的对象

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入门

#stage {

margin: 150px auto;

width: 600px;

height: 400px;

-webkit-perspective: 800;

}

#rotate {

margin: 0 auto;

}

.ring {

margin: 0 auto;

width: 200px;

-webkit-transform-style: preserve-3d;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

}

#ring-1 {

background: red;

-webkit-animation-name: y-spin;

-webkit-animation-duration: 5s;

}

img {

width: 200px;

}

@-webkit-keyframes y-spin {

0% {

-webkit-transform: rotateY(0deg);

}

50% {

-webkit-transform: rotateY(180deg);

}

100% {

-webkit-transform: rotateY(360deg);

}

}