最近在写项目的时候有时候用到了一些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栏不会随之滚动的效果。
来一个小例子实现垂直居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
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;
}
</style>
</head>
<body>
<div id="parentEle">
<div id="childEle">需要垂直居中的元素</div>
</div>
</body>
</html>
效果如下：
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的案例，还是一样，想用可用，稍微加了个自适应，代码如下：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>table系列</title>
<style>
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;
}
</style>
</head>
<body>
<div class="table">
<h2 class="table-caption">表格名称</h2>
<div class="table-header-group">
<ul class="table-row">
<li class="table-cell">序号</li>
<li class="table-cell">姓名</li>
<li class="table-cell">年龄</li>
</ul>
</div>
<div class="table-footer-group">
<ul class="table-row">
<li class="table-cell">footer</li>
<li class="table-cell">footer</li>
<li class="table-cell">footer</li>
</ul>
</div>
<div class="table-row-group">
<ul class="table-row">
<li class="table-cell">1</li>
<li class="table-cell">John</li>
<li class="table-cell">19</li>
</ul>
<ul class="table-row">
<li class="table-cell">2</li>
<li class="table-cell">Mark</li>
<li class="table-cell">21</li>
</ul>
<ul class="table-row">
<li class="table-cell">3</li>
<li class="table-cell">Kate</li>
<li class="table-cell">26</li>
</ul>
</div>
</div>
</body>
</html>
table系.png
这里，我还要使用一下display: table和display:flex分别做两个小案例
先上图：
tableCell.png
如果是为了实现这样的布局代码如下：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>display小案例</title>
<style>
.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;
}
</style>
</head>
<body>
<div id="display-container">
<div class="parentEle">
<div class="childEle">
<div><img src="../images/timg.jpg" alt="犬夜叉图片"></div>
<span>内容一</span>
</div>
<div class="childEle">
<div><img src="../images/timg.jpg" alt="犬夜叉图片"></div>
<span>内容二</span>
</div>
<div class="childEle">
<div><img src="../images/timg.jpg" alt="犬夜叉图片"></div>
<span>内容三</span>
</div>
<div class="childEle">
<div><img src="../images/timg.jpg" alt="犬夜叉图片"></div>
<span>内容四</span>
</div>
</div>
</div>
</body>
</html>
有时候我们希望图片和文字是横排布局的：
tableCellInline.png
只需稍稍改动代码即可：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>display小案例</title>
<style>
.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;
}
</style>
</head>
<body>
<div id="display-container">
<div class="parentEle">
<div class="childEle">
<div class="img-content"><img src="../images/timg.jpg" alt="犬夜叉图片"></div>
<span>内容一</span>
</div>
<div class="childEle">
<div class="img-content"><img src="../images/timg.jpg" alt="犬夜叉图片"></div>
<span>内容二</span>
</div>
<div class="childEle">
<div class="img-content"><img src="../images/timg.jpg" alt="犬夜叉图片"></div>
<span>内容三</span>
</div>
<div class="childEle">
<div class="img-content"><img src="../images/timg.jpg" alt="犬夜叉图片"></div>
<span>内容四</span>
</div>
</div>
</div>
</body>
</html>
再来做一个flex弹性布局的小案例：
里面的内容垂直居中，具体列表是Inline的布局
flexInline.png
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>display小案例</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="parent-element">
<div class="child-element">内容一</div>
<div class="child-element">内容二</div>
<div class="child-element">内容三</div>
<div class="child-element">内容四</div>
</div>
</div>
</body>
</html>
flex布局个人觉得还是非常强大的，具体可移步http://www.ruanyifeng.com/blog/2015/07/flex-examples.html查看阮一峰的网络日志，真的real全面了。
(2).clear：清除浮动
当使用float布局时，其元素不占常规流，若需要清除浮动，可在其他元素上设置clear属性
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>清除浮动小案例</title>
<style>
.float-item {
float: right;
background: #ff3e3e;
color: #fff;
padding: 7px;
}
.clear-item {
clear: right;
}
</style>
</head>
<body>
<div class="float-container">
<div class="float-item">浮动对象</div>
<div class="clear-item">清除浮动的对象</div>
</div>
</body>
</html>
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:检索或设置对象动画时间之外的状态
做了个简单的小案例，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation入门</title>
<style>
#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);
}
}
</style>
</head>
<body>
<div id="stage">
<div id="rotate">
<div id="ring-1" class="ring">
<img src="../images/timg.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
网友评论