CSS/CSS3常用Style
（1）实现以下功能：
代码附上：
width: 5px;
height: 35px;
border: 84px solid;
border-color: #ffa002 transparent transparent transparent;（2）如何实现“颜色渐变”这种功能效果图，如下图：
代码附上：
background: -webkit-linear-gradient(left, #67d41f 24%, #FFFFFF 1%,#FFFFFF 24.5%, #d2d2d2 1% ,#d2d2d2 50%,#FFFFFF 1%,#FFFFFF 50.8%,#D2D2D1 1%,#D2D2D1 75%,#ffffff 1%,#ffffff 75.6%,#d2d2d2 1%,#d2d2d2 99%);
（3）在标题文字后面加图片
如图所示：
在ul li 的末尾处加入向右的箭头
只需在li标签上加入一个css即可：
background: #FFFFFF url(../../img/right-jia.png) center right 18px no-repeat;
（4）改变背景颜色上下分开
background: linear-gradient(to bottom, #ffea78 0px, #FFFFFF 100%)repeat-x scroll 0 0 rgba(0, 0, 0, 0);
（5）文本过长，不换行用省略号显示
.ellipsis {/**文本过长，不换行用省略号显示*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }
（6）两端对齐
text-align:justity;
text-justify:inter-ideogra;（7）文字换行
white-space:nowrap;/*强制不换行*/
word-wrap：normal;/*只在允许的断字点换行（浏览器保持默认处理）*/
word-wrap: break-word;/*在长单词或URL地址内部进行换行。*/
word-break: normal;/*强制英文单词断行*/
word-break:break-all;/*允许在单词内换行*/
（8）禁用鼠标Style
cursor:not-allowed;
（9）CSS3布局
1、效果1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=0">
<title>布局</title>
<style> body {margin: 0 auto;} .list { display: -webkit-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; align-items: stretch; -webkit-align-items: stretch; justify-content:center; -webkit-justify-content: center; /* * flex-flow的参数介绍 row ---横向（左向右） column ---竖向（上向下） wrap ---一行显示不完的时候换行 */ } .list div { margin: 5px 0px 0px 0px; width: 40%; height: 100px; line-height: 100px; text-align: center; border: 1px solid red; } </style>
</head>
<body>
<div class="list">
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<div>DDD</div>
</div>
</body>
</html>
2、效果2
//css中设置
.list {
display: -webkit-flex;
flex-flow: row;
-webkit-flex-flow: row;
align-items: stretch;
-webkit-align-items: stretch;
justify-content:center;
-webkit-justify-content: center;
}
3、效果3
CSS flex 属性
让所有灵活的项目都带有相同的长度，忽略它们的内容。
浏览器支持
除了 Safari，其他所有主流浏览器都支持 flex 属性。
IE 9 及其之前的版本不支持 flex 属性。IE 10 需要前缀 -ms- 才支持该属性。
详情请查阅W3C规范：http://www.runoob.com/cssref/css3-pr-flex.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>布局</title>
<style> body{margin: 0 auto;} /* flex-flow: row wrap; row横向（左向右）显示 column竖向（上向下）显示 wrap一行显示不完的时候换行 */ div{ border: 1px solid red; height: 200px; } footer { display: -webkit-flex; -webkit-flex-flow: row; -webkit-align-items: stretch; -webkit-justify-content:space-between; /*IE10还不支持*/ display: -ms-flex; -ms-flex-flow: row wrap; -ms-align-items: stretch; -ms-justify-content:space-between; display: flex; flex-flow: row; align-items: stretch; justify-content:space-between; } .col2{-webkit-flex:1;-moz-flex:1;flex:1} </style>
</head>
<body>
<footer>
<div style="width:80px;">AAA</div>
<div class="col2">BBB</div>
<div style="width:40px;">CCC</div>
</footer>
</body>
</html>
（10）align-items（竖轴上的排列基准）
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
详情请查阅：http://www.webkkl.com/style/align-items.php
http://www.css88.com/book/css/properties/flex/align-items.htm
示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=0">
<title>布局</title>
<style> body { margin: 0 auto; background: #E1EDF7; } .list div{ width: 40%; height: 100px; border: 1px solid red; /*关键代码*/ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center;/*IOS专用*/ } </style>
</head>
<body>
<div class="list">
<div><span>AAA</span></div>
<div><span>BBB</span></div>
<div><span>CCC</span></div>
<div class="c5"><span>DDD</span></div>
</div>
</body>
</html>
示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=0">
<title></title>
<style> .box{ display:-webkit-flex; display:flex; width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;} .box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;} .box li:nth-child(1){padding:10px;} .box li:nth-child(2){padding:15px 10px;} .box li:nth-child(3){padding:20px 10px;} #box{ -webkit-align-items:flex-start; align-items:flex-start; } #box2{ -webkit-align-items:flex-end; align-items:flex-end; } #box3{ -webkit-align-items:center; align-items:center; } #box4{ -webkit-align-items:baseline; align-items:baseline; } #box5{ -webkit-align-items:strecth; align-items:strecth; } </style>
</head>
<body>
<h2>align-items:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:baseline</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:strecth</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>