@Secretmm
2016-06-12T06:19:25.000000Z
字数 97284
阅读 1487
web前端
相邻选择器，就是选中该元素的下一个兄弟元素，在这里注意一点，相邻选择器的操作对象是该元素的同级元素。
语法：
元素A+元素A的**下一个**兄弟元素{属性：属性值}
//选中的是这个兄弟元素
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lv+div{color:red;}
</style>
</head>
<body>
<div>绿叶学习网</div>
<div id="lv">
<p>绿叶学习网</p>
</div>
<div>绿叶学习网</div>//这个变为红色。
<div>绿叶学习网</div>
</body>
</html>
分析：
“#lv+div{…}”表示选择“id为lv的元素”的相邻的下一个兄弟元素div，也就是第3个div元素。
群组选择器，就是同时对几个选择器进行相同的操作。常常，我们的CSS 样式中会有好几个地方需要使用到相同的设定时，一个一个分开写会是一件满累人的工作，重覆性太高且显得冗长，更不好管理....在CSS 语法的基本设定中，就可以把这几个相同设定的选择器合并在一起，原本可能是写了7~8 行相同的语法，合在一起后就只要短短的一小行，怎么看都让人心旷神怡啊~
语法：
选择器1，选择器2，选择器3{属性：属性值}
说明：
对于群组选择器，两个选择器之间必须用“,”（英文逗号）隔开，不然群组选择器无法生效。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#mm,div,.pp,span{color:red;}
</style>
</head>
<body>
<h3 id="mm">绿叶学习网</h3>
<div>绿叶学习网</div>
<p class="pp">绿叶学习网</p>
<span>绿叶学习网</span>
</body>
</html>
其实上面这段代码等价于以下代码：
<style type="text/css">
#mm{color:red;}
div{color:red;}
.pp{color:red;}
span{color:red;}
</style>
CSS文字属性:
font-family:字体类型
font-size:字体大小
font-weight:字体粗细
font-style:字体斜体
color:颜色
font-family一、font-family属性
字体，我们经常见到，在word的使用中，我们往往会使用不同的字体，什么宋体、微软雅黑等。在CSS中，使用font-family属性来定义字体类型。
语法：
font-family：字体1,字体2,字体3;
说明：
font-family可指定多种字体，多个字体将按优先顺序排列，以逗号隔开，注意逗号一定要是英文逗号。
举例1：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>font-family属性</title>
<style type="text/css">
#p1{font-family:宋体;}
#p2{font-family:微软雅黑;}
</style>
</head>
<body>
<p id="p1">字体为宋体</p>
<p id="p2">字体为微软雅黑</p>
</body>
</html>
举例2：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>font-family属性</title>
<style type="text/css">
p{font-family:微软雅黑,Arial,Times New Roman;}
</style>
</head>
<body>
<p>绿叶学习网，让这里的一切成为衬托你成功的绿叶。</p>
</body>
</html>
分析：
对于“p{font-family:微软雅黑,宋体,Times New Roman;}”这句代码，初学者可能会觉得很疑惑。为什么要为元素同时定义多个字体呢？
其实原因是这样的：每个人的电脑装的字体都不一样，我们定义“p{font-family:微软雅黑,Arial,Times New Roman;}”这句的意思是，p元素优先用“微软雅黑”字体来显示，如果你的电脑没有装“微软雅黑”这个字体，那接着就用“Arial”字体来显示，如果也没有装“Arial”字体，接着就用“Times New Roman”字体来显示，以此类推。
否则，如果你只定义“p{font-family:微软雅黑;}”的话，如果你的电脑没有装“微软雅黑”字体，p元素就直接用浏览器默认的“宋体”字体来显示了，达不到你预期的效果。
默认情况下，浏览器的字体是宋体。中文字体常用的有宋体、微软雅黑，英文字体比较常用的是Times New Roman、Arial。
font-size语法：
font-size：关键字/像素值;
color语法：
color:颜色值;
font-weight语法：
font-weight:粗细值;
说明：
粗细值可以取关键字和100~900的数值。关键字如下:
font-weight属性:
normal: 默认值，正常体
lighter: 较细
bold: 较粗
bolder: 很粗（其实效果跟bold差不多）
字体粗细font-weight属性值可以取100、200、…、900这九个值。400相当于正常字体normal，700相当于bold。100~900分别表示字体的粗细，是对字体粗细的一种量化方式，值越大就表示越粗，值越小就表示越细。
对于中文网页来说，一般仅用到bold、normal这两个属性值完全就可以了，粗细值不建议使用数值（100~900）。
font-style语法：
font-style:取值;
说明：
font-style属性的取值如下表：
normal: 默认值，正常体
italic: 斜体，这是一个属性
oblique: 将字体倾斜，用于没有斜体变量（italic）属性的特殊字体
italic和oblique区别
font-style属性值为italic或oblique时，在浏览器预览的效果是一样的！那这两者究竟有什么区别呢？
从预览效果我们看不出有什么区别，其实从表1中的定义就可以看出了，italic是字体的一个属性，也就是说并非所有字体都有这个italic属性，对于没有italic属性的字体，可以使用oblique将该字体进行倾斜设置。
一般字体有粗体、斜体、下划线、删除线等诸多属性。但是并不是所有的字体都有这些属性。一些不常用的字体，或许就只有个正常体，如果你用italic发现字体没有斜体效果，这个时候你就要用oblique。
语法：
/*注释的内容*/
浏览器解释CSS是有一定顺序的，如果对某一个元素先后都定义了同一个属性，在浏览器中以“后定义的那个属性值”为准
CSS段落样式：
text-decoration： 下划线、删除线、顶划线
text-transform： 文本大小写
font-varient： 将英文文本转换为“小型”大写字母
text-indent： 段落首行缩进
text-align： 文本水平对齐方式
line-height： 行高
letter-spacing： 字距
word-spacing： 词距
text-decoration语法：
text-decoration:属性值;
说明：
text-decoration属性取值如下表：
none： 默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式
underline： 下划线
line-through： 删除线
overline： 顶划线
text-transform语法：
text-transform:属性值;
说明：
text-transform属性取值如下表：
none： 默认值，无转换发生
uppercase： 转换成大写
lowercase： 转换成小写
capitalize： 将每个英文单词的首字母转换成大写，其余无转换发生
font-variant属性使用font-variant属性只有一个作用：把文本设置成小型大写字母，这也是针对英文而言，因为中文不存在大小写之分。
语法：
font-variant：normal/small-caps;
说明：
font-variant属性取值如下表：
normal： 默认值，正常效果
small-caps： 小型大写字母的字体
text-indent语法：
text-indent:像素值;
我们都知道，段落首行缩进的是两个字的间距，如果要实现这个效果，text-indent的属性值应该是字体font-size属性值的两倍，大家琢磨一下（参考本例）就知道了。这是一个小技巧，大家以后应该会经常用得到。
text-align在CSS中，使用text-align属性控制文本的水平方向的对齐方式：左对齐、居中对齐、右对齐。
语法：
text-align:属性值;
说明：
text-align属性取值如下表：
left： 默认值，左对齐
center： 居中对齐
right： 右对齐
text-align属性只能针对文本文字和img标签，对其他标签无效。记住那，text-align属性不仅对文本文字有效，对img标签也有效！
line-height使用line-height属性来控制文本的行高
语法：
line-height:像素值;
letter-spacing和词间距word-spacing一、letter-spacing属性
语法：
letter-spacing:像素值;
二、word-spacing属性
语法：
word-spacing:像素值;
说明：
定义词间距，以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。
border边框的三个属性:
border-width: 边框的宽度
border-style: 边框的外观
border-color: 边框的颜色
1、border-width属性
语法：
border-width:像素值;
说明：
在CSS初学者阶段，我们都是建议采用像素做单位
2、border-style属性
border-style属性用于设置边框的外观，例如实线边框和虚线边框。
语法：
border-style:属性值;
说明：
border-style属性取值如下：
(常用)
none: 无样式
hidden: 与“none”相同。对于表，hidden用于解决边框冲突
solid: 实线
dashed: 虚线
dotted: 点线
double: 双线，双线的宽度等于border-width值
（3D）
inset： 内凹
outset： 外凸
ridge： 脊线
groove： 槽线
3、border-color属性
border-color属性用来定义边框的颜色。
语法：
border-color:颜色值
说明：
对于颜色的取值，请使用前端神器“在线调色板”来选取。http://www.lvyestudy.com/tools/color_picker.aspx
边框border属性简洁写法
设置一个元素的边框就要设置3个属性：border-width、border-style和border-color。如下：
border-width:1px;
border-style:solid;
border-color:Red;
这种写法费时费力，导致代码量多。因此我们边框CSS样式有一个简洁的写法：
border:1px solid Red;
CSS边框border局部样式边框border局部样式简介
我们都知道边框有上下左右四条边，在上一节我们学习的是四条边框的整体样式。那如果我们想要对上下左右这四条边进行单独设置，那该怎么办呢？
1、上边框border-top
border-top-width:1px;
border-top-style:solid;
border-top-color:red;
简洁写法：border-top:1px solid red;
2、下边框border-bottom
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:orange;
简洁写法：border-bottom:1px solid orange;
3、左边框border-left
border-left-width:1px;
border-left-style:solid;
border-left-color:blue;
简洁写法：border-left:1px solid blue;
4、右边框border-right
border-right-width:1px;
border-right-style:solid;
border-right-color:red;
简洁写法：border-right:1px solid green;
举例1：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#div1
{
width:100px; /*div元素宽为100px*/
height:60px; /*div元素高为60px*/
border-top:1px solid red; /*上边框样式*/
border-right:1px solid orange; /*右边框样式*/
border-bottom:1px solid blue; /*下边框样式*/
border-left:1px solid green; /*左边框样式*/
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
举例2：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#div1
{
width:100px; /*div元素宽为100px*/
height:60px; /*div元素高为100px*/
border:1px solid gray; /*边框整体样式*/
border-bottom:0px; /*去除下边框*/
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
分析：
去除边框可以使用“border-bottom:0px”和“border-bottom:none”两种方法。这两者效果是等价的。
在CSS中，使用background-color属性来控制元素的背景颜色。
语法：
background-color:颜色值;
在CSS中，为元素设置背景图像，往往涉及到以下属性：
background-image： 定义背景图像的路径，这样图片才能显示嘛
background-repeat 定义背景图像显示方式，例如纵向平铺、横向平铺
background-position： 定义背景图像在元素哪个位置
background-attachment： 定义背景图像是否随内容而滚动
background-image属性在CSS中，使用background-image属性来定义元素的背景图片。
语法：
background-image:url("图像地址");
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>background-image属性</title>
<style type="text/css">
#div1
{
width:143px;
height:220px;
background-image:url("../App_images/lesson/run_cj/one piece.jpg");
}
</style>
</head>
<body>
<div id="div1">这是一张海贼王图片</div>
</body>
</html>
分析：
给某个元素设置背景图像，元素要有一定的宽度和高度，背景图片才会显示出来。因此在这里设置了div元素的宽width和height，其中width值和height值跟图片实际的宽度和高度一样。
background-repeat属性在CSS中，使用background-repeat属性可以设置背景图像是否平铺，并且可以设置如何平铺。
语法：
background-repeat:取值;
说明：
background-repeat属性取值如下：
no-repeat： 表示不平铺
repeat： 默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺
repeat-x： 表示在水平方向（x轴）平铺
repeat-y： 表示在垂直方向（y轴）平铺
举例：
这里有一张25px×25px的图片，我们设置3个div元素为200px×100px，并且把div元素背景图像设置为该图片。
图1 25px×25px图像
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>background-repeat属性</title>
<style type="text/css">
/*设置div元素的共同样式*/
div
{
width:200px;
height:100px;
background-image:url("../App_images/lesson/run_cj/flower.jpg");
text-align:center;
border:1px dashed gray;
}
/*设置3个div元素的个别样式*/
/*#div1{background-repeat:repeat;}*/
#div2{background-repeat:repeat-x;}
#div3{background-repeat:repeat-y;}
#div4{background-repeat:no-repeat;}
hr{border-color:red;}
</style>
</head>
<body>
<div id="div1">
<h3>静夜思</h3>
<p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
</div>
<hr/>
<div id="div2">
<h3>静夜思</h3>
<p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
</div>
<hr/>
<div id="div3">
<h3>静夜思</h3>
<p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
</div>
<hr/>
<div id="div4">
<h3>静夜思</h3>
<p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
</div>
</body>
</html>
分析：
因为第一个div元素没有设置background-repeat属性值，因为浏览器会采用background-repeat默认值“repeat”，背景图片会在水平和垂直两个方向同时平铺。第二个div元素background-repeat属性值为“repeat-x”，因此背景图片会在水平方向（x轴）平铺。第三个div元素background-repeat属性值为“repeat-y”，因此背景图片会在垂直方向（y轴）平铺
注意：设置有背景图片的元素的宽或高大于背景图片本身的宽或高，才会有平铺效果。
background-position属性背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。
语法：
background-positon:像素值/关键字;
说明：
语法中的取值包括两种，一种是采用像素值，另一种是关键字描述。
1、background-position取值为“像素值”
background-position取值为像素值时，要设置水平方向数值（x轴）和垂直方向数值（y轴）。例如：“background-position：12px 24px;”表示背景图片距离该元素左上角的水平方向位置是12px，垂直方向位置是24px。注意，这两个取值之间要用空格隔开。
background-positon属性的长度设置值：
x（数值） 设置网页的横向位置，单位为px
y（数值） 设置网页的纵向位置，单位为px
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>background-position属性</title>
<style type="text/css">
#div1
{
width:400px;
height:300px;
border:1px solid gray;
background-image:url("../App_images/lesson/run_cj/one piece.jpg");
background-repeat:no-repeat;
background-position:80px 40px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
2、background-position取值为“关键字”
当background-position取值为关键字时，也需要设置水平方向和垂直方向的值，只不过值不是使用px为单位的数值，而是使用关键字代替。
background-position属性的关键字设置值
top left： 左上
top center： 靠上居中
top right： 右上
left center： 靠左居中
center center： 正中
right center： 靠右居中
bottom left： 左下
bottom center： 靠下居中
bottom right: 右下
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>background-position属性</title>
<style type="text/css">
#div1
{
width:240px;
height:160px;
border:1px solid gray;
background-image:url("../App_images/lesson/run_cj/cartoongirl.gif");
background-repeat:no-repeat;
background-position:right center;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
background-attachment属性在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。
语法：
background-attachment:scroll/fixed;
说明：
background-attachment属性只有2个属性值。scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面不动，只有其他的内容随滚动条滚动。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>background-attachment属性</title>
<style type="text/css">
#div1
{
width:160px;
height:1200px;
border:1px solid gray;
background-image:url("../App_images/lesson/run_cj/cartoongirl.gif");
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
分析：
大家在浏览器中拖动右边的滚动条会发现，背景图片在页面固定不动。
在IE或者360中设置background-attachment之后不能设置background-position属性，不然图片没办法在浏览器显示。大家可以测试一下google浏览器、Firefox浏览器。
一、超链接伪类简介
在所有浏览器中，超链接的样式如下：
（1）默认情况：字体为蓝色，带有下划线；
（2）鼠标点击时：字体为红色，带有下划线；
（3）鼠标点击后：字体为紫色，带有下划线；
注：点击时，指的是点击超链接的一瞬间，字体是红色的。这个样式变化是一瞬间的事情。
在CSS中，一般使用“text-decoration:none”来去除超链接下划线
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>去掉超链接默认样式</title>
<style type="text/css">
.a2{text-decoration:none;}
</style>
</head>
<body>
<a href="http://www.lvyestudy.com" class="a1">绿叶学习网</a><br/>
<a href="http://www.lvyestudy.com" class="a2">绿叶学习网</a>
</body>
</html>
分析：
由于第二个a标签应用了“text-decoration:none”，因此它的下划线被去掉了。
在CSS中，我们使用超链接伪类来定义超链接在不同时期的不同样式。
语法：
a:link{CSS样式}
a:visited{CSS样式}
a:hover{CSS样式}
a:actived{CSS样式}
说明：
a:link： 定义a元素未访问时的样式
a:visited： 定义a元素访问后的样式
a:hover： 定义鼠标经过显示的样式
a:active： 定义鼠标单击激活时的样式
定义这四个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定义顺序不能改变！
大家可能觉得比较难把这个样式顺序记忆。没关系，对于掌握俺有一个挺好的方法。“love hate”，看到了么，这样就记住了。我们把超链接伪类的顺序规则称为“爱恨原则”。大家以后写代码的时候想起“爱恨原则”，自然而然就写出来了。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超链接伪类</title>
<style type="text/css">
#div1
{
width:100px;
height:30px;
line-height:30px;
border:1px solid #CCCCCC;
text-align:center;
background-color: #40B20F;
}
a{text-decoration:none;font-size:18px;}
a:link{color:white}
a:visited{color: purple; }
a:hover{color:yellow;text-decoration:underline;}
a:active{color:red;}
</style>
</head>
<body>
<div id="div1">
<a href="http://www.lvyestudy.com">绿叶学习网</a>
</div>
</body>
</html>
注：点击链接是一瞬间的事情，大家请留意一下超链接的样式变化。
在此学习了CSS超链接伪类，我们可以使用CSS伪类向文本链接添加复杂而多样的样式。
未访问状态，我们直接在a标签定义就行了，没必要使用“a:link”。
语法：
a{CSS样式}
a:hover{CSS样式}
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超链接伪类</title>
<style type="text/css">
#div1
{
width:100px;
height:30px;
line-height:30px;
border:1px solid #CCCCCC;
text-align:center;
background-color: #40B20F;
}
a{text-decoration:none;color:purple}
a:hover{color:white}
</style>
</head>
<body>
<div id="div1">
<a href="http://www.lvyestudy.com">绿叶学习网</a>
</div>
</body>
</html>
hover伪类语法：
元素:hover{}
说明：
“元素”可以是任意的块元素和行内元素。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>:hover伪类</title>
<style type="text/css">
#div1
{
width:100px;
height:30px;
line-height:30px;
border:1px solid #CCCCCC;
text-align:center;
color:white;
background-color: #40B20F;
}
#div1:hover{background-color: #286E0A;}
img:hover{border:1px solid red;}
</style>
</head>
<body>
<div id="div1">绿叶学习网</div>
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</body>
</html>
cursor属性cursor属性
在CSS中，使用cursor属性来定义鼠标的样式。
语法：
cursor:属性值;
（default”和“pointer）
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cursor属性</title>
<style type="text/css">
div
{
width:100px;
height:30px;
line-height:30px;
text-align:center;
border:1px solid #CCCCCC;
background-color: #40B20F;
color:white;
font-size:14px;
font-weight:bold;
}
#div_default{cursor:default;}
#div_pointer{cursor:pointer;}
</style>
</head>
<body>
<div id="div_default">鼠标默认样式</div>
<div id="div_pointer">鼠标手状样式</div>
</body>
</html>
语法：
width:像素值;
height:像素值;
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
img{width:60px;height:60px;}
</style>
</head>
<body>
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</body>
</html>
border在“CSS边框border”这一节我们详细讲解了边框border属性。在CSS中，对于图片的边框，我们也是使用border属性来定义。
语法：
border-width:像素值;
border-style:属性值;
border-color:颜色值;
注：或者使用border简洁写法，如“border:1px solid gray;”。
属性，请自行回去复习一下。
举例1：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片边框border</title>
<style type="text/css">
img
{
width:60px;
height:60px;
border:1px solid red;
}
</style>
</head>
<body>
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</body>
</html>
举例2：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片边框border</title>
<style type="text/css">
img{width:60px;height:60px;}
img:hover{border:1px solid gray;}
</style>
</head>
<body>
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</body>
</html>
分析：
在这个例子中，我们使用了“:hover伪类”，来定义鼠标经过图片时会出现灰色边框。
图片水平对齐text-align
在“文本水平对齐text-align”这一节我们详细讲解了text-align属性。大家请记住，text-align一般只用在两个地方：文本水平对齐和图片水平对齐。也就是说，text-align只对文本和img标签有效，对其他标签无效。
语法：
text-align:属性值;
说明：
text-align属性取值如下表：
left: 默认值，左对齐
center: 居中对齐
right: 右对齐
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片水平对齐</title>
<style type="text/css">
div
{
width:300px;
height:80px;
border:1px solid gray;
}
.div_img1{text-align:left;}
.div_img2{text-align:center;}
.div_img3{text-align:right;}
img{width:60px;height:60px;}
</style>
</head>
<body>
<div class="div_img1">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</div>
<div class="div_img2">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</div>
<div class="div_img3">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</div>
</body>
</html>
分析：
很多人都以为设置图片水平对齐是在img标签设置，其实这是错误的。大家记住，图片是要在父元素中进行水平对齐的。在这个例子中，img元素的父元素是div，img元素是相对于div元素进行水平对齐的。因此要想对图片进行水平对齐，就要在父元素（div元素）中设置text-align属性。
vertical-align属性
在CSS中，我们可以使用vertical-align属性来定义图片的垂直对齐方式。
语法：
vertical-align:属性值;
说明：
vertical-align属性取值如下表：
top:顶部对齐
middle: 中部对齐
baseline: 基线对齐
bottom: 底部对齐
float在网页布局的过程中，常常遇到图文混排的效果。图文混排，也就是文字环绕着图片进行布局。文字环绕图片的方式在实际页面中的应用非常广泛，如果再配合内容、背景等多种手段便可以实现各种绚丽的效果。
在CSS中，使用浮动属性float可以设置文字在某个元素的周围，它能应用于所有的元素。
语法：
float:取值;
说明：
float属性的取值很简单也很容易记忆，就2个属性值：
left: 元素向左浮动
right: 元素向右浮动
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS浮动float属性</title>
<style type="text/css">
img{float:left;}
p{font-size:16px;text-indent:28px;}
</style>
</head>
<body>
<img src="images/ailianshuo.jpg" alt=""/>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>
二、设置图片与文字的间距
文字紧紧环绕在图片周围，如果希望图片本身与文字有一定的距离，只需要给<img>标签添加margin属性即可。margin指的是“外边距”，我们在接下来的“CSS盒子模型”会详细讲解到。
语法：
margin-top:像素值;
margin-bottom:像素值;
margin-left:像素值;
margin-right:像素值;
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS浮动float属性</title>
<style type="text/css">
img{margin-right:20px;margin-bottom:20px;float:left;}
</style>
</head>
<body>
<img src="../App_images/lesson/run_cj/ailianshuo.jpg" alt=""/>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>
list-style-type在HTML入门教程中，有序列表和无序列表的列表项符号都是使用type属性来定义的。我们先来回顾一下。
1、有序列表
语法：
<ol type="属性值">
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>
有序列表type属性：
type属性值 列表项的序号类型
1 数字1、2、3……
a 小写英文字母a、b、c……
A 大写英文字母A、B、C……
i 小写罗马数字i、ii、iii……
I 大写罗马数字I、II、III……
2、无序列表
语法：
<ul type="属性值">
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ul>
无序列表type属性：
type属性值 列表项的序号类型
disc 默认值，实心圆“●”
circle 空心圆“○”
square 实心正方形“■”
type属性来定义列表项符号，那是在元素属性中定义的。但是我们之前说过，标签和样式是应该分离的，那在CSS中怎么定义列表项符号呢？
在CSS中，不管是有序列表还是无序列表，都统一使用list-style-type属性来定义列表项符号。
语法：
list-style-type:属性值;
说明：
有序列表list-style-type属性取值：
list-style-type属性值 说明
decimal 默认值，数字1、2、3……
lower-roman 小写罗马数字i、ii、iii……
upper-roman 大写罗马数字I、II、III……
lower-alpha 小写英文字母a、b、c……
upper-alpha 大写英文字母A、B、C……
无序列表list-style-type取值：
list-style-type属性值 说明
disc 默认值，实心圆“●”
circle 空心圆“○”
square 实心正方形“■”
去除列表项符号：
list-style-type取值 说明
none 去除列表项符号
举例1：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>list-style-type属性</title>
<style type="text/css">
ol{list-style-type: lower-roman ;}
ul{list-style-type: circle ;}
</style>
</head>
<body>
<p>有序列表</p>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<p>无序列表</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
举例2：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>list-style-type属性</title>
<style type="text/css">
ol,ul{list-style-type:none;}
</style>
</head>
<body>
<p>有序列表</p>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<p>无序列表</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
分析：
“ol,ul{list-style-type:none;}”使用的是CSS选择器中的群组选择器。多个不同元素定义了相同的CSS样式，就可以使用群组选择器。在群组选择器中，元素之间是用逗号隔开，记住是英文的逗号，中文逗号无效。
使用“list-style-type:none”这个小技巧可以去除列表项默认的符号，在实际开发中，我们经常要用到。
list-style-imagelist-style-image属性
不管是有序列表，还是无序列表，都有它们自身的列表项符号。但是默认的列表项符号都比较丑，那如果我们想自定义列表项符号，那该怎么实现呢？
在CSS中，我们可以使用list-style-image属性来自定义列表项符号。
语法：
list-style-image:url(图像地址);
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>list-style-image属性</title>
<style type="text/css">
ul{list-style-image:url("../App_images/lesson/run_cj/list.png");}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
border-collapse在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙。
语法：
border-collapse:属性值;
说明：
border-collapse是表格独有的属性。除了表格，在其他地方是用不上的。
border-collapse属性取值如下：
border-collapse属性值 说明
separate 默认值，边框分开，不合并
collapse 边框合并，如果相邻，则共用一个边框
separate意思是“分离”，而collapse意思是“折叠，瓦解”。
border-spacing在CSS中，我们使用border-spacing属性来定义表格边框间距。
语法：
border-spacing:像素值;
分析：
"border-spacing:5px 10px"定义了单元格之间水平方向的间距为5px，垂直方向的间距为10px。
caption-side在CSS中，我们使用caption-side属性来定义表格标题的位置。
语法：
caption-side:属性值;
说明：
caption-side属性取值如下：
caption-side属性值 说明
top 默认值，标题在顶部
bottom 标题在底部
border-collapse一、border-collapse属性
在了解什么叫“表格边框合并”之前，我们先来看一下在默认情况下表格加入边框是怎样的一个效果。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table,th,td{border:1px solid gray;}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
</body>
</html>
在浏览器预览效果如下：
border-collapse属性
<thead>、<tbody>和<tfoot>都是表格中语义化结构标签，这三个标签也是HTML代码语义化中非常重要的标签。详细内容请看“表格语义化标签”。
大家可以看到了，表格加入边框的默认情况下，单元格与单元格之间有一定的空隙。那如果我们要去除单元格之间的空隙，那该怎么办呢？
在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙。
语法：
border-collapse:属性值;
说明：
border-collapse是表格独有的属性。除了表格，在其他地方是用不上的。
border-collapse属性取值如下：
border-collapse属性值 说明
separate 默认值，边框分开，不合并
collapse 边框合并，如果相邻，则共用一个边框
separate意思是“分离”，而collapse意思是“折叠，瓦解”。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>border-collapse属性</title>
<style type="text/css">
table,th,td{border:1px solid gray;}
table{border-collapse:collapse;}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
</body>
</html>
分析：
只需要在table元素中设置border-collapse属性值就行，没必要在th、td这些元素也设置，造成代码冗余。
border-spacing在CSS中，我们使用border-spacing属性来定义表格边框间距。
语法：
border-spacing:像素值;
说明：
该属性指定单元格边界之间的距离。当只指定了1个像素值时，这个值将作用于横向和纵向上的间距；当指定了2个length值时，第1个作用于横向间距，第2个作用于纵向间距。
在CSS初学阶段，全部都是使用像素作单位，在CSS进阶中我们会深入讲解其他CSS单位。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>border-spacing属性</title>
<style type="text/css">
table,th,td{border:1px solid gray;}
table{border-spacing:5px 10px }
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
</body>
</html>
分析：
"border-spacing:5px 10px"定义了单元格之间水平方向的间距为5px，垂直方向的间距为10px。
border-spacing属性跟上节课学到的border-collapse属性一样，只需要在table元素设置就可以生效，没必要在th、td这些元素中设置，造成代码冗余。
caption-side一、caption-side属性
在CSS中，我们使用caption-side属性来定义表格标题的位置。
语法：
caption-side:属性值;
说明：
caption-side属性取值如下：
caption-side属性值 说明
top 默认值，标题在顶部
bottom 标题在底部
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>caption-side属性</title>
<style type="text/css">
table,th,td{border:1px solid gray;}
caption{caption-side:bottom}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
</body>
</html>
分析：
表格标题是caption元素，设置表格标题位置，我们可以在caption元素或者table元素中设置，效果是一样的。但是一般情况下我们都在caption元素中设置。
http://www.lvyestudy.com/les_cj/cj_11.1.aspx
盒子模型4个属性
属性 说明
border （边框）元素边框
margin （外边距）用于定义页面中元素与元素之间的距离
padding （内边距）用于定义内容与边框之间的距离
content （内容）可以是文字或图片
1、内容区
内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的3部分都是可选的。
内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区而言，并不包括padding部分。
当内容信息太多时，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。对于overflow这个属性，我们在后面会详细讲解到。
2、内边距
内边距，指的是内容区和边框之间的空间，可以被看做是内容区的背景区域。
关于内边距的属性有5种，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding。使用这5种属性可以指定内容区域各方向边框之间的距离
3、边框
在CSS盒子模型中，边框跟我们之前学过的边框是一样的。
边框属性有border-width、border-style、border-color以及综合了3类属性的快捷边框属性border。
其中border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。
4、外边距
外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。
外边距的属性也有5种，即margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简洁内边距属性margin。
padding内边距padding，又常常称为“补白”，它指的是内容区到边框之间的那一部分。
一、padding 局部样式
从CSS盒子模型中，我们可以看出，内边距padding分为四个方向的内边距：padding-top、padding-right、padding-bottom、padding-left。
语法：
padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS内边距padding属性</title>
<style type="text/css">
#main
{
display:inline-block;/*将块元素转换为inline-block元素*/
border:1px solid #CCCCCC;
}
.lvye
{
display:inline-block; /*将块元素转换为inline-block元素*/
padding-top:20px;
padding-right:40px;
padding-bottom:60px;
padding-left:80px;
margin:40px;
border:1px solid red;
background-color:#FCE9B8;
}
span{border:1px solid blue;background-color:#C5FCDF;}
</style>
</head>
<body>
<div id="main">
<div class="lvye"><span>绿叶学习网</span></div>
</div>
</body>
</html>
在浏览器预览效果如下：
CSS内边距
二、padding简洁写法
我们可以使用padding属性来设置四个方向的内边距。在实际编程中，我们往往使用的是padding的这种高效简洁写法来编程。
padding写法有3种，分别如下：
语法：
padding:像素值;
padding:像素值1 像素值2;
padding:像素值1 像素值2 像素值3 像素值4;
例如：
“padding:20px;”表示四个方向的内边距都是20px；
“padding:20px 40px;”表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。
“padding:20px 40px 60px 80px;”表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。大家按照顺时针方向记忆就可以了。
padding属性
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS内边距padding属性</title>
<style type="text/css">
#main
{
display:inline-block;/*将块元素转换为inline-block元素*/
border:1px solid #CCCCCC;
}
.lvye
{
display:inline-block; /*将块元素转换为inline-block元素*/
padding:40px 80px;
margin:40px;
border:1px solid red;
background-color:#FCE9B8;
}
span{border:1px solid blue;background-color:#C5FCDF;}
</style>
</head>
<body>
<div id="main">
<div class="lvye"><span>绿叶学习网</span></div>
</div>
</body>
</html>
margin外边距margin，指的是边框到父元素或者同级元素之间的那一部分。
一、margin局部样式
从CSS盒子模型中，我们可以看出，内边距分为四个方向的内边距：margin-top、margin -right、margin -bottom、margin -left。这一点跟内边距padding非常相似。
语法：
margin-top:像素值;
margin-right:像素值;
margin-bottom:像素值;
margin-left:像素值;
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS外边距margin属性</title>
<style type="text/css">
#main
{
display:inline-block;/*将块元素转换为inline-block元素*/
border:1px solid #CCCCCC;
}
.lvye
{
display:inline-block; /*将块元素转换为inline-block元素*/
padding:20px;
margin-top:20px;
margin-right:40px;
margin-bottom:60px;
margin-left:80px;
border:1px solid red;
background-color:#FCE9B8;
}
span{border:1px solid blue;background-color:#C5FCDF;}
</style>
</head>
<body>
<div id="main">
<div class="lvye"><span>绿叶学习网</span></div>
</div>
</body>
</html>
二、margin简洁写法
margin跟padding一样，也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。在实际编程中，我们往往使用的是margin的这种高效简洁写法来编程。
margin写法有3种，分别如下：
语法：
margin:像素值;
margin:像素值1 像素值2;
margin:像素值1 像素值2 像素值3 像素值4;
例如：
“margin:20px;”表示四个方向的外边距都是20px；
“margin:20px 40px;”表示margin-top和margin-bottom为20px，margin-right和margin-left为40px。
“margin:20px 40px 60px 80px;”表示margin-top为20px，margin-right为40px，margin-bottom为60px，margin-left为80px。大家按照顺时针方向记忆就可以了。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS外边距margin属性</title>
<style type="text/css">
#main
{
display:inline-block;/*将块元素转换为inline-block元素*/
border:1px solid #CCCCCC;
}
.lvye
{
display:inline-block; /*将块元素转换为inline-block元素*/
padding:20px;
margin:40px 80px;
border:1px solid red;
background-color:#FCE9B8;
}
span{border:1px solid blue;background-color:#C5FCDF;}
</style>
</head>
<body>
<div id="main">
<div class="lvye"><span>绿叶学习网</span></div>
</div>
</body>
</html>
http://www.lvyestudy.com/les_cj/cj_12.1.aspx
http://www.lvyestudy.com/les_cj/cj_12.2.aspx
一、浮动float简介
浮动属性float是CSS布局的最佳利器，我们可以通过不同的浮动属性值灵活地定位div元素，以达到布局网页的目的。我们可以通过CSS的属性float使元素向左或向右浮动。也就是说，让盒子及其中的内容浮动到文档的右边或者左边。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
语法：
float:取值;
说明：
float属性的取值很简单也很容易记忆，就2个属性值：
float属性值 说明
left 元素向左浮动
right 元素向右浮动
浮动的性质比较复杂，下面通过一个简单的实例讲解float属性的使用。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS浮动float属性</title>
<style type="text/css">
/*定义父元素样式*/
#father
{
width:400px;
background-color:#0C6A9D;
border:1px solid silver;
}
/*定义子元素样式*/
#father div
{
padding:10px;
margin:15px;
border:2px dashed red;
background-color:#FCD568;
}
/*定义文本样式*/
#father p
{
margin:15px;
border:2px dashed red;
background-color:#FCD568;
}
#son1
{
/*这里设置son1的浮动方式*/
}
#son2
{
/*这里设置son2的浮动方式*/
}
#son3
{
/*这里设置son3的浮动方式*/
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div id="son3">box3</div>
<p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，</p>
</div>
</body>
</html>
上面代码定义了4个div块，一个是父块，另外3个是它的子块。为了便于观察，将各个块都加上了边框以及背景颜色，并且让body以及各个div有一定的margin（外边距）。
如果3个子块都没有设置浮动方式，在父盒子中，由于div元素是块元素，因此4个盒子各自向右伸展，并且自上而下排列，如下图：
1、设置第1个div浮动
#son1
{
/*这里设置son1的浮动方式*/
float:left;
}
分析：
由于box1设置为左浮动，box1变成了浮动元素，因此此时box1的宽度不再延伸，其宽度为容纳内容的最小宽度，而相邻的下一个div元素（box2）就会紧贴着box1，这是由于浮动引起的效果。
2、设置第2个div浮动
#son2
{
/*这里设置son2的浮动方式*/
float:left;
}
分析：
由于box2变成了浮动元素，因此box2也跟box1一样，宽度不再延伸，而是由内容确定宽度。并且相邻的下一个div元素（box3）变成紧贴着浮动的box2。
大家会觉得很奇怪，为什么这个时候box1和box2之间有一定的距离呢？其实原因是这样的：我们在CSS中设置了box1、box2和box3都有一定的外边距（margin:15px;），如果box1为浮动元素，而相邻的box2不是浮动元素，则box2就会紧贴着box1；但是如果box1和box2同时为浮动元素，外边距就会生效。这是由于浮动元素的特性决定的。大家不需要深究这个问题。“浮动”这个复杂的性质，我们只需要多加练习，慢慢就会感性认知它的各种性质。
3、设置第3个div浮动
#son3
{
/*这里设置son3的浮动方式*/
float:left;
}
分析：
由于box3变成了浮动元素，因此box3跟box2和box1一样，宽度不再延伸，而是由内容确定宽度，并且相邻的下一个p元素（box3）变成紧贴着浮动的box3。
由于box1、box2和box3都是浮动元素，box1、box2和box3之间的margin属性生效。
clear一、清除浮动简介
在CSS中，清除浮动都是在设置左浮动或者右浮动之后的元素内设置。
语法：
clear:取值;
说明：
clear属性取值如下：
clear属性值 说明
left 清除左浮动
right 清除右浮动
both 左右浮动一起清除
使用clear属性清除浮动，我们比较少使用“clear:left;”或者“clear:right;”来判断是清除左浮动，还是清除右浮动。我们往往直截了当地使用“clear:both;”来把所有浮动清除，还省事。也就是说，我们在这一节只要学会“clear:both;”这一个属性就足够啦。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS清除浮动</title>
<style type="text/css">
/*定义父元素样式*/
#father
{
width:400px;
background-color:#0C6A9D;
border:1px solid silver;
}
/*定义子元素样式*/
#father div
{
padding:10px;
margin:15px;
border:2px dashed red;
background-color:#FCD568;
}
/*定义文本样式*/
#father p
{
margin:15px;
border:2px dashed red;
background-color:#FCD568;
}
#son1
{
/*这里设置son1的浮动方式*/
float:left;
}
#son2
{
/*这里设置son2的浮动方式*/
float:left;
}
#son3
{
/*这里设置son3的浮动方式*/
float:right;
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div id="son3">box3</div>
<p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，</p>
</div>
</body>
</html>
CSS清除浮动
我们添加如下CSS样式：
p{clear:both;}
分析：
由于p元素清除了浮动，所以p元素的前一个元素产生的浮动就不会对后续元素产生影响，因此p元素的文本不会环绕在浮动元素的周围。
固定定位于绝对定位最根本的区别还是偏移基准的不同，固定定位是相对于屏幕，而绝对定位的基准则是父级元素
CSS固定定位fixedhttp://www.lvyestudy.com/les_cj/cj_13.2.aspx
一、CSS固定定位
固定定位是最直观而最容易理解的定位方式，先给大家介绍固定定位，来接触一下CSS定位布局是怎样一回事。
当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。
语法：
position:fixed;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;
说明：
“position:fixed;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:fixed;”使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。
top、bottom、left和right这4个属性不一定全部都用到。注意，这4个值的参考对象是浏览器的4条边。
在初学者阶段，都是使用“像素”作为单位。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS固定定位</title>
<style type="text/css">
#first
{
width:120px;
height:600px;
border:1px solid gray;
line-height:600px;
background-color:#B7F1FF;
}
#second
{
position:fixed;/*设置元素为固定定位*/
top:30px;/*距离浏览器顶部30px*/
left:160px;/*举例浏览器左部160px*/
width:60px;
height:60px;
border:1px solid silver;
background-color:#FA16C9;
}
</style>
</head>
<body>
<div id="first">无定位的div元素</div>
<div id="second">固定定位的div元素</div>
</body>
</html>
分析：
我们尝试拖动浏览器的滚动条，固定定位的div元素不会有任何位置改变，但是无定位的div元素会改变。
这里注意一下，我们在这里只使用了top和left属性来设置元素相对于浏览器顶边和左边的距离就可以设置该元素的位置了，top、bottom、left和right这4个属性不必全部用到，大家稍微想一下就懂了。
position:fixed
固定定位其实很简单，就是使用“position:fixed”设置某一个元素为固定定位，接着使用top、bottom、left和right这4个属性来设置一下元素相对浏览器的位置就可以了。固定定位用途也很多，一般用于“回顶部”特效和固定栏目的设置。
CSS相对定位relativehttp://www.lvyestudy.com/les_cj/cj_13.3.aspx
采用相对定位的元素，其位置是相对于它的原始位置计算而来的。相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。采用相对定位的元素会获得相应的空间。
语法：
position:relative;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
说明：
“position:relative;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:relative;”使得元素成为相对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对原始位置。相对定位的容器浮上来后，其所占的位置仍然留有空位，后面的无定位元素仍然不会“挤上来”。
在这里要非常清楚这一点：默认情况下，CSS相对定位元素的位置是相对于原始位置而言，而CSS固定定位元素的位置是相对浏览器而言！
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS相对定位</title>
<style type="text/css">
#father
{
margin-top:30px;
margin-left:30px;
border:1px solid silver;
background-color: #B7F1FF;
}
#father div
{
width:100px;
height:60px;
margin:10px;
border:1px solid silver;
background-color:#FA16C9;
}
#son2
{
/*这里设置son2的定位方式*/
}
</style>
</head>
<body>
<div id="father">
<div id="son1">第1个无定位的div元素</div>
<div id="son2">相对定位的div元素</div>
<div id="son3">第2个无定位的div元素</div>
</div>
</body>
</html>
我们为将第2个div元素 改变为相对定位元素：
#son2
{
/*这里设置son2的定位方式*/
position:relative;
top:20px;
left:40px;
}
分析：
在这里，可以清楚地看到，相对定位的元素的top和left属性是相对于该元素原始位置而言的，这一点跟固定定位的元素完全不一样的。
CSS绝对定位简介http://www.lvyestudy.com/les_cj/cj_13.4.aspx
一、CSS绝对定位
实现子元素在父元素中的绝对定位必须满足以下两个条件：
1、父元素要有相对定位属性（position：relative），
2、子元素在设置绝对定位（position：absolute），并且同时加四个方向（top，bottom，left，right）的任意方向的属性值。
当元素的position属性值为absolute时，这个元素就变成了绝对定位元素。绝对定位在几种定位方法中使用最广泛，这种方法能够很精确地把元素移动到任意你想要的位置。
一个元素变成了绝对定位元素，这个元素就完全脱离正常文档流了，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素浮于其他元素上面，它是独立出来的。
什么叫“脱离正常文档流”，请参考“正常文档流”这一节。
语法：
position:absolute;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
说明：
“position:absolute;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:absolute;”使得元素成为绝对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。
言。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS绝对定位</title>
<style type="text/css">
#father
{
padding:15px;
background-color:#0C6A9D;
border:1px solid silver;
}
#father div
{
padding:10px;
background-color:#FCD568;
border:1px dashed red;
}
#son2
{
/*在这里添加son2的定位方式*/
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box1</div>
<div id="son2">box2</div>
<div id="son3">box3</div>
</div>
</body>
</html>
我们为第2个div元素son2添加如下代码：
#son2
{
/*在这里添加son2的定位方式*/
position:absolute;
top:0;
right:0;
}
CSS静态定位由于CSS3很多属性尚未成为W3C标准的一部分，因此每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性。我们在书写CSS3代码时，需要在属性前加上浏览器的私有前缀，然后该种内核的浏览器才能识别相应的CSS3属性。
CSS3浏览器私有前缀
私有前缀 对应的浏览器
-webkit-： chrome和safari
-moz-：Firefox
-ms-： IE
-o-： opera
举个例子，假如我们想要使用CSS3实现半径为10px的圆角效果的话，可能会这样写：
border-radius:10px;
但是并非所有浏览器都能识别border-radius这个属性，例如chrome浏览器只能识别-webkit-border-radius（前缀为-webkit-），而firefox浏览器只能识别-moz-border-radius（前缀为-moz-）。因为为了让主流浏览器都能实现圆角效果，我们需要这样写：
border-radius:10px;
-webkit-border-radius:10px; /*兼容chrome和Safari*/
-moz-border-radius:10px; /*兼容Firefox*/
-ms-border-radius:10px; /*兼容IE*/
-o-border-radius:10px; /*兼容opera*/
1.属性选择器:E[att^=”val”]
功能描述: 选择匹配元素E，且E元素定义了属性attr，其属性值以val开头的任何字符串。
示例描述: a[class^=icon]选择器表示选择类名以”icon”开头的所有a元素。
2.属性选择器:E[att$=”val”]
功能描述: 选择匹配元素E，且E元素定义了属性attr,其属性值以val结尾的任何字符串。刚好与E[attr^=val]相反。
示例描述: a[href$=pdf]选择器表示选择以”pdf”结尾的href属性的所有a元素。
3.属性选择器: E[attr*=”val”]
功能描述: 选择匹配元素E，且元素定义了属性attr,其属性值任意位置包含了“val”。换句话说，这符串与属值中的任意位置相匹配。
示例描述: a[title*=”more”]选择器匹配了a元素，而且a元素的title属性值中任意位置有”more”字符的任何字符串。
举例1：
html代码：
<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="more">我的title是more</a>
css代码
a[class^=icon]{
background: green;
color:#fff;
}
a[href$=pdf]{
background: orange;
color: #fff;
}
a[title*=more]{
background: blue;
color: #fff;
}
举例2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CSS3 属性选择器</title>
<style type="text/css">
/*清除所有元素默认的padding和margin*/
*{padding:0;margin:0;}
/*清除列表项符号*/
ul{list-style-type:none;}
a
{
display:inline-block;
font-size:12px;
height:20px;
line-height:20px;
}
/*匹配jpg文件*/
a[href^="jpg"]:before
{
content:url("../App_images/lesson/run_css3/1.png");
}
/*匹配PDF文件*/
a[href$="pdf"]:before
{
content:url("../App_images/lesson/run_css3/2.png");
}
/*匹配PDF文件*/
a[href*="ppt"]:before
{
content:url("../App_images/lesson/run_css3/3.png");
}
</style>
</head>
<body>
<ul>
<li><a href="jpgmm">这是jpg图片</a></li>
<li><a href="mmpdf">这是pdf文件</a></li>
<li><a href="mmpptmm">这是ppt文档</a></li>
</ul>
</body>
</html>
选择器 说明
E:first-child: 选择父元素的第一个子元素
E:last-child: 选择父元素的最后一个子元素
E:nth-child(n): 选择父元素下的第n个元素或奇偶元素，n的值为“数字 | odd | even”(odd:奇数；even：偶数)
E:only-child: 选择父元素中唯一的子元素（该父元素只有一个子元素）
[E代表的是子元素]！！！
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3结构伪类选择器</title>
<style type="text/css">
*{padding:0;margin:0;}
ul
{
display:inline-block;
width:200px;
list-style-type:none;
}
ul li
{
height:20px;
}
ul li:first-child{background-color:red;}
//ul 可以去掉
ul li:nth-child(2){background-color:orange;}
ul li:nth-child(3){background-color:yellow;}
ul li:nth-child(4){background-color:green;}
ul li:last-child{background-color:blue;}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
举例2：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3结构伪类选择器</title>
<style type="text/css">
*{padding:0;margin:0;}
ul
{
display:inline-block;
width:200px;
border:1px solid gray;
list-style-type:none;
}
ul li
{
height:20px;
background-color:green;
}
/*设置偶数列颜色*/
ul li:nth-child(even)
{
background-color:red;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
分析：
隔行换色这种效果也很常见，例如表格隔行换色、列表隔行换色等，这些也是用户体验非常好的设计细节。其中绿叶学习网就用到了:nth-child()这个结构伪类选择器对列表进行隔行换色设置。
深入理解：
<div>
<h1></h1>
<p></p>
<span></span>
<span></span>
</div>
（1）E:first-child
h1:first-child：选择的是h1元素，因为h1元素是div的第1个子元素。
p:first-child：选择不到任何元素，因为p并不是div的第1个子元素，而是div的第2个子元素。
span:first-child:选择不到任何元素，因为span并不是div的第1个子元素，而是div的第3个子元素；
选择器 说明
E:first-of-type: 选择同元素类型的第1个同级兄弟元素
E:last-of-type: 选择同元素类型的最后1个同级兄弟元素
E:nth-of-type（n）: 匹配同元素类型的第n个同级兄弟元素，n的值为“数字 | odd | even”
E:only-of-type: 匹配父元素中特定类型的唯一子元素（该父元素可以有多个子元素）
以上解释，大家看着比较难懂，需要结合一下实例才能真正理解。
<div>
<h1></h1>
<p></p>
<span></span>
<span></span>
</div>
（2）E:first-of-type
h1: first-of-type:选择的是h1元素，因为h1元素是div中所有h1元素中的第1个h1元素，事实上也只有一个为h1的子元素；
p: first-of-type:选择的是p元素，因为p元素是div中所有p元素中的第1个p元素，事实上也只有一个为p的子元素；
span: first-of-type:选择的是id="first"的span元素，因为在div元素中有2个span元素，我们选择的是两个之中的第1个。
总结：
“:first-child”是选择父元素下的第1个子元素（不区分元素类型），而“:first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型）。
大家好好根据上面例子去理解与区分第1类结构伪类选择器与第2类结构伪类选择器。
选择器 说明
:root 选择文档的根元素。在HTML中，根元素永远是HTML
E:not() 选择某个元素之外的所有元素
E:empty 选择一个不包含任何子元素或内容的元素
E:target 选取页面中的某个target元素
：root选择器:root选择器简介
在CSS3中，:root选择器用于选择文档的根元素。根元素指的是位于文档树中最顶层结构的元素。在HTML中，根元素永远是HTML。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 :root选择器</title>
<style type="text/css">
:root
{
background-color:silver;
}
body
{
background-color:red;
}
</style>
</head>
<body>
<h1>绿叶学习网</h1>
</body>
</html>
分析：
这里使用:root选择器指定整个网页的背景色为灰色，将网页中body元素的背景色设为红色。
:root{background-color:silver;}
上述代码等价于：
html{background-color:silver;}
E:not()选择器在CSS3中，:not()选择器中主要用于选取某个元素之外的所有元素。这是very very实用的一个选择器，大家要重点记忆一下。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 :not()选择器</title>
<style type="text/css">
*{padding:0;margin:0;}
ul{list-style-type:none;}
ul li:not(.first)
{
color:red;
}
</style>
</head>
<body>
<ul>
<li class="first">绿叶学习网</li>
<li>绿叶学习网</li>
<li>绿叶学习网</li>
<li>绿叶学习网</li>
</ul>
</body>
</html>
分析：
对于 “ul li:not(.first)”这个选择器，我们分2步来看，其中括号内的“.first”表示选择class值为first的元素（即第1个li元素），因此“ul li:not(.first)”表示选择ul元素下除了第1个li元素的其他所有li元素。
E:empty选择器在CSS3中，:empty选择器用于选择一个不包含任何子元素或内容的元素。也就是选择一个内容为空白的元素。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 :empty选择器</title>
<style type="text/css">
table,tr,td
{
border:1px solid silver;
}
td
{
width:60px;
height:60px;
line-height:60px;
text-align:center;
background-color: #FFA722;
}
td:empty
{
background-color:red;
}
</style>
</head>
<body>
<table>
<tr>
<td>2</td>
<td>4</td>
<td>8</td>
</tr>
<tr>
<td>16</td>
<td>32</td>
<td>64</td>
</tr>
<tr>
<td>128</td>
<td>256</td>
<td></td>
</tr>
</table>
</body>
</html>
:target选择器:target选择器用于选取页面中的某个target元素。那什么是target元素呢？target元素，说白了就是该元素的id被当做页面的超链接来使用。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 :target选择器</title>
<style type="text/css">
:target h3
{
color:red;
}
</style>
</head>
<body>
<div>
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
<a href="#article">推荐文章</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>林俊杰-被风吹过的下图</li>
<li>曲婉婷-在我的歌声里</li>
<li>许嵩-灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>朱自清-荷塘月色</li>
<li>余光中-乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
</body>
</html>
分析：
当点击锚点链接时，相应的target元素下的h3标签字体颜色就会变为红色。
:target选择器一般都是结合锚点链接来使用，更好地给读者进行导航效果，这也是对用户体验非常好的一个做法。
UI元素状态伪类选择器，额，这个术语真专业……
UI元素状态包括：可用、不可用、选中、未选中、获取焦点、失去焦点等。
这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。UI元素状态伪类选择器大多数都是针对表单元素来使用的。
这里，我们仅仅是讲解CSS3新增的UI元素状态伪类选择器。
CSS3 UI元素状态伪类选择器
选择器 说明
E:focus 指定元素获得光标焦点时使用的样式
E:checked 选择E元素中所有被选中的元素
E::selection 改变E元素中被选择的网页文本的显示效果
E:enabled 选择E元素中所有“可用”元素
E:disabled 选择E元素中所有“不可用”元素
E:read-write 选择E元素中所有“可读写”元素
E:read-only 选择E元素中所有“只读”元素
E::before 在E元素之前插入内容
E::after 在E元素之后插入内容
E:focus选择器:focus选择器
:focus选择器被用来指定“表单元素”获得光标焦点时使用的样式，主要在单行文本框text、多行文本框textarea等表单元素获得焦点并输入文本时使用。
一般情况下，获取焦点和失去焦点是针对单行文本框text、多行文本框textarea这2个表单元素而言。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 :focus选择器</title>
<style type="text/css">
input:focus
{
outline:1px solid red;
}
</style>
</head>
<body>
<p><label for="name">姓名：</label><input type="text" name="name"/></p>
<p><label for="email">邮箱：</label><input type="text" name="email"/></p>
</body>
</html>
分析：
在这里当文本框获取焦点时，使用outline属性为文本框添加一个红色的外轮廓线
E:checked选择器:checked选择器
在表单元素中，单选按钮radio和复选框checkbox都具有“选中”和“未选中”状态。在CSS3中，我们可以通过使用:checked选择器来定义选中时的CSS样式。
暂时只有Opera浏览器支持:checked选择器。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 :checked选择器</title>
<style type="text/css">
input:checked
{
background-color:red;
}
</style>
</head>
<body>
<form name="form1" method="post" action="index.html">
性别：
<input type="radio" name="Question1" value="boy" checked="checked"/>男
<input type="radio" name="Question1" value="girl"/>女<br/>
你喜欢的水果：<br />
<input id="checkbox1" type="checkbox" checked="checked"/><label for="checkbox1">苹果</label><br/>
<input id="checkbox2" type="checkbox" /><label for="checkbox2">香蕉</label><br/>
<input id="checkbox3" type="checkbox" /><label for="checkbox3">西瓜</label><br/>
<input id="checkbox4" type="checkbox" /><label for="checkbox4">凤梨</label>
</form>
</body>
</html>
E::selection选择器默认情况下，浏览器中用鼠标选择的网页文本都是“深蓝的背景，白色的字体”显示的。但是有些时候我们并不想要“深蓝的背景，白色的字体”这种显示效果。
E::selection选择器
浏览器选取文本时默认样式
在CSS3中，我们可以使用“E::selection选择器”来改变被选择的网页文本的显示效果。
注意，“E::selection选择器”是双冒号。其实双冒号往往都是“伪元素”，而单冒号往往都是“伪类”。关于伪元素和伪类这两者的区别，我们在CSS3进阶再详细给大家讲解。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 ::selection选择器</title>
<style type="text/css">
div::selection
{
background-color:red;
color:white;
}
p::selection
{
background-color:orange;
color:white;
}
</style>
</head>
<body>
<div>绿叶学习网，让这里的一切成为衬托你成功的绿叶。</div>
<p>绿叶学习网，让这里的一切成为衬托你成功的绿叶。</p>
</body>
</html>
分析：
用鼠标选择div标签中“绿叶学习网”时，会发现背景颜色变为红色，字体颜色为白色，效果如下：
用鼠标选择p标签中“绿叶学习网”时，会发现背景颜色变为橘黄色，字体颜色为白色，效果如下：
E:enabled与E:disabled选择器一、E:enabled与E:disabled选择器
在Web表单中，有些表单元素（如输入框、密码框、复选框等）有“可用”和“不可用”这2种状态。默认情况下，这些表单元素都处在可用状态。
在CSS3中，我们可以使用:enabled选择器和:disabled选择器来分别设置表单元素的可用与不可用这两种状态的CSS样式。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 :enabled选择器与:disabled选择器</title>
<style type="text/css">
input[type="text"]:enabled
{
outline:1px solid #63E3FF;
}
input[type="text"]:disabled
{
background-color:#FFD572;
}
</style>
</head>
<body>
<form>
<p><label for="enabled">可用:</label><input type="text" name="enabled"/></p>
<p><label for="disabled">禁用:</label><input type="text" name="disabled" disabled="disabled"/></p>
</form>
</body>
</html>
在浏览器预览效果如下：
分析：
这里我们为“可用”状态的文本框添加一个外轮廓线outline，然后为“禁用”状态的文本框改变背景颜色。
E:read-write与E:read-only选择器在Web表单中，有些表单元素（如输入框、文本域等）有“可读写”和“只读”这2种状态。默认情况下，这些表单元素都处在“可读写”状态。
在CSS3中，我们可以使用:read-write选择器和:read-only选择器来分别设置表单元素的“可读写”与“只读”这两种状态的CSS样式。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 :read-write与:read-only选择器</title>
<style type="text/css">
input[type="text"]:read-write
{
outline:1px solid #63E3FF;
}
input[type="text"]:read-only
{
background-color:#EEEEEE;
}
</style>
</head>
<body>
<form>
<p><label for="text1">读写:</label><input type="text" name="text1"/></p>
<p><label for="text2">只读:</label><input type="text" name="text2" readonly="readonly"/></p>
</form>
</body>
</html>
分析：
这里使用“:：read-write选择器”为“可读写”状态的文本框使用outline属性添加一个外轮廓线，然后使用“:read-only选择器”为“只读”状态的文本框改变背景颜色为灰色。
:read-only 选择器支持 Chrome, Safari 和 Opera。Firefox 和 Internet Explorer 不支持 :read-only 选择器。Firefox 支持 :-moz-read-only 选择器作为替代方案。
E::before和E::after选择器在CSS3中，我们可以使用::before和::after这两个选择器在元素前面或后面添加内容。这两个选择器常和"content属性"配合使用，使用的场景最多的就是清除浮动和创建小图标。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 ::before和::after选择器</title>
<style type="text/css">
div::before
{
content:"绿叶学习网";
}
</style>
</head>
<body>
<div>CSS3教程</div>
</body>
</html>
分析：
::before和::after这两个选择器都是配合content属性在元素之前或之后插入内容、图片、多媒体等。这2个选择器非常有用，甚至可以用来设计各种小图标
在CSS3中，增加了丰富的文本修饰效果，使得网页更加美观舒服。下面列出了常用的CSS3文本属性：
属性 说明
text-shadow 文字阴影
text-stroke 文字描边
text-overflow 文本溢出处理
word-wrap 长单词或URL强制换行
@font-face 嵌入服务器字体
font-size-adjust 调整字体尺寸
text-shadow属性语法：
text-shadow:x-offset y-offset blur color;
说明：
x-offset：（水平阴影）表示阴影的水平偏移距离，单位可以是px、em或者百分比等。如果值为正，则阴影向右偏移；如果值为负，则阴影向左偏移；
y-offset：（垂直阴影）表示阴影的垂直偏移距离，单位可以是px、em或者百分比等。如果值为正，则阴影向下偏移；如果值为负，则阴影向上偏移；
blur：（模糊距离）表示阴影的模糊程度，单位可以是px、em或者百分比等。blur值不能为负。如果值越大，则阴影越模糊；如果值越小，则阴影越清晰。当然，如果不需要阴影模糊效果，可以吧blur值设置为0；
color：（阴影的颜色）表示阴影的颜色
1、一般文字阴影效果
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-shadow属性</title>
<style type="text/css">
#lvye
{
font-size:40px;
text-shadow:4px 4px 2px gray;
-webkit-text-shadow: 4px 4px 2px gray;
-moz-text-shadow: 4px 4px 2px gray;
}
</style>
</head>
<body>
<div id="lvye">绿叶学习网</div>
</body>
</html>
分析：
从上面的在线测试，我们可以得出以下结论：
（1）阴影偏移分为水平方向和垂直方向这2个方向，x-offset值指的是阴影到原文本的水平距离，y-offset值指的是阴影到原文本的垂直距离；
（2）x-offset与y-offset允许为负值；
（3）添加阴影偏移距离之后，可以指定一个模糊半径blur。模糊半径是一个长度值，表示阴影模糊效果的范围；
2、文字凸起效果与凸起效果
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-shadow属性</title>
<style type="text/css">
div
{
display:inline-block;
padding:20px;
font-size:40px;
font-family:Verdana;
font-weight:bold;
background-color:#CCC;
color:#ddd;
text-shadow:-1px 0 #333, /*向左阴影*/
0 -1px #333,/*向上阴影*/
1px 0 #333, /*向右阴影*/
0 1px #333 ;/*向下阴影*/
}
</style>
</head>
<body>
<div>helicopter</div>
</body>
</html>
当然，为了表现更加丰富，每个方向上得阴影的颜色可以有不同的设置。如果将向左和向上的阴影颜色设置为白色，文字就会有凸起的效果。修改text-shadow属性如下：
text-shadow:-1px 0 #FFF, /*向左阴影*/
0 -1px #FFF, /*向上阴影*/
1px 0 #333, /*向右阴影*/
0 1px #333; /*向下阴影*/
如果将向右和向下的阴影颜色设置为白色，文字就会有凹陷的效果。修改text-shadow属性如下：
text-shadow:-1px 0 #333, /*向左阴影*/
0 -1px #333, /*向上阴影*/
1px 0 #FFF, /*向右阴影*/
0 1px #FFF; /*向下阴影*/
二、text-shadow属性指定多个阴影
在CSS3中，可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同的颜色。也就是说，text-shadow属性可以为一个以英文逗号隔开的“值列表”，如：text-shadow:0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3;
当text-shadow属性值为“值列表”时，阴影效果会按照给定的值顺序应用到该元素的文本上，因此有可能出现互相覆盖的现象。但是text-shadow属性永远不会覆盖文本本身，阴影效果也不会改变边框的尺寸。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-shadow属性</title>
<style type="text/css">
#lvye
{
font-size:40px;
text-shadow:4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray;
-webkit-text-shadow: 4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray;
-moz-text-shadow: 4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray;
}
</style>
</head>
<body>
<div id="lvye">绿叶学习网</div>
</body>
</html>
下面，我们使用text-shadow属性制作更为复杂的文本特效——火焰字。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-shadow属性</title>
<style type="text/css">
p
{
text-align:center;
color:#45B823;
padding:20px 0 0 20px;
background-color:#FFF;
font-size:60px;
font-weight:bold;
text-shadow:0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;
}
</style>
</head>
<body>
<p>绿叶学习网</p>
</body>
</html>
分析：
上面是使用：text-shadow属性制作的火焰字效果，相信小伙伴们又一次被CSS3效果给折服了吧。实现火焰字效果原理很简单：text-shadow属性取值使用“值列表”。但是呢，这些颜色和模糊半径等的取值需要我们细心地一点点做测试才能最终做出这样的效果，会比较费时间，但是这种炫丽的特性确实也是拿来装逼的资本。
text-stroke属性text-stroke属性
在CSS3中，我们可以使用text-stroke属性为文字添加描边效果。这个描边效果，说白了就是给文字添加边框。注意喔，由于CSS3的出现，“文字”也能添加边框了呢。
语法：
text-stroke:宽度值 颜色值;
说明：
text-stroke是一个复合属性，由text-stroke-width和text-stroke-color两个子属性组成。
（1）text-stroke-width属性：设置描边的宽度，可以为一般的长度值。
（2）text-stroke-color属性：设置描边的颜色。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-stroke属性</title>
<style type="text/css">
div
{
font-size:30px;
font-weight:bold;
}
#div2
{
text-stroke:1px red;
-webkit-text-stroke:1px red;
-moz-text-stroke:1px red;
-o-text-stroke:1px red;
}
</style>
</head>
<body>
<div id="div1">文字没有被描边</div>
<div id="div2">文字被描了1像素的红边</div>
</body>
</html>
分析：
文字描边的效果在实际开发中并不常用，因为效果不是很理想。我们只是了解一下text-stroke属性即可。当然如果你有创意的话，可以结合其他技术使用text-stroke属性看看。
不过当你用text-stroke属性配合“color:transparent;”，你还可以创建镂空的文字！具体例子如下。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-stroke属性</title>
<style type="text/css">
div
{
font-family:Verdana;
font-size:50px;
font-weight:bold;
color:transparent; /*设置文字颜色为透明*/
text-stroke:2px red;
-webkit-text-stroke:2px #45B823;
-moz-text-stroke:2px #45B823;
}
</style>
</head>
<body>
<div>helicopter</div>
</body>
</html>
text-overflow**文本我们在浏览网页的时候，经常能看到这样的效果：当文字超出一定范围时会以省略号显示，并隐藏多余的文字
在CSS3中，文本溢出text-overflow用于设置是否使用一个省略标记（…）标示对象内文本的溢出。
语法：
text-overflow:取值;
说明：
text-overflow属性取值只有2个：
text-overflow属性取值
属性值 说明
ellipsis 当对象内文本溢出时显示省略标记（…）
clip 当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉
单独使用text-overflow属性是无法得到上面图1效果的。因为text-overflow属性只是说明文字溢出时用什么方式显示，要实现溢出时产生省略号效果，还须定义2个内容：
（1）white-space:nowrap;（强制文本在一行内显示）；
（2）overflow:hidden;（溢出内容为隐藏）；
下面是完整语法：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
这3个属性是必须一起使用才会有效果。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-overflow属性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid gray;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
</style>
</head>
<body>
<div id="div1">绿叶学习网成立于2015年4月1日，是一个富有活力的技术学习网站。绿叶学习网为广大网络工作者（网页开发人员、站长等）提供各种精品教程以及最精华资料。绿叶学习网跟其他垃圾采集站不一样，绿叶学习网中的每一个课程、每一篇文章，甚至每一个知识点，都凝聚了本人的最辛勤的汗水。</div>
</body>
</html>
分析：
由于使用了“white-space:nowrap;”，所有文字都放在了同一行（不换行），然后再使用“text-overflow:ellipsis;”使得溢出该行的部分以省略号形式显示。
word-wrap属性语法：
word-wrap:取值;
说明：
word-wrap属性只有2个取值：normal和break-word。
word-wrap属性取值
选择器 说明
normal 默认值，文本自动换行
break-word “长单词”或“URL地址”强制换行
@font-face语法：
@font-face
{
font-family : 字体名称;
src :url("字体文件路径");
}
说明：
src可以是相对地址，也可以是绝对地址。如果你引用第三方网站的字体文件，那就用绝对路径；如果使用的是你网站目录下的字体，那就使用相对路径。这个跟引用图片是类似的。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>嵌入字体@font-face</title>
<style type="text/css">
/*定义字体*/
@font-face
{
font-family: myfont; /*定义字体名称为myfont*/
src: url("../font/Horst-Blackletter.ttf");
}
div
{
font-family:myfont; /*使用自定义的myfont字体作为p元素的字体类型*/
font-size:60px;
background-color:#ECE2D6;
color:#626C3D;
padding:20px;
}
</style>
</head>
<body>
<div>lvyestudy</div>
</body>
</html>
分析：
这里使用@font-face方法，定义了名为myfont的字体（名字可以随便取），然后在div元素中使用font-family属性来使用这个字体。从上面我们可以知道，如果想要定义字体，需要以下2步：
（1）使用@font-face方法定义字体名称；
（2）使用font-family属性引用该字体；
通过@font-face这种方式就很好地使得所有用户都能展示相同字体效果。
注意：@font-face规则使用服务器字体这种方法，不建议应用于中文网站。因为中文的字体文件都是几MB到十几MB，这么大的字体文件，会严重影响网页的加载速度。如果是少量的特殊字体，还是建议使用图片来代替。而英文的字体文件只有几十KB，非常适合使用@font-face规则。之所以中文字体文件大而英文的小，原因很简单：中文汉字多，而英文只有26个英文字母。
font-size-adjust属性font-size-adjust属性
有一定实践经验的前端开发者都了解：在网页中，如果改变了字体类型，则页面中使用该字体类型的文字大小都有可能发生变化，从而可能导致原来设定好的页面布局产生混乱。我们还是给个例子来得直观：
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 font-size-adjust属性</title>
<style type="text/css">
/*定义整体样式*/
div{font-size:16px;}
#div1{font-family:Times New Roman;}
#div2{font-family:Arial}
#div3{font-family:Comic Sans MS}
#div4{font-family:Calibri}
#div5{font-family:Verdana}
</style>
</head>
<body>
<div id="div1">welcome to lvyestudy !</div>
<div id="div2">welcome to lvyestudy !</div>
<div id="div3">welcome to lvyestudy !</div>
<div id="div4">welcome to lvyestudy !</div>
<div id="div5">welcome to lvyestudy !</div>
</body>
</html>
分析：
从上面预览效果，我们可以看出，即使是设置了相同的font-size属性值，但是由于字体类型font-family属性的不同，字体的在浏览器显示的“实际大小”同样会不一样。这样在实际开发中，就很可能会因为文字大小的变换而导致原来的页面布局发生混乱。
在CSS3中，我们可以使用font-size-adjust属性来在字体类型（font-family）改变的情况下而保持字体大小（实际大小）不变。
语法：
font-size-adjust:属性值;
说明：
font-size-adjust属性取值为一个“aspect值”。下面给大家讲解一下什么叫aspect值？
字体的小写字母“x”的高度（即x-height）与该字体“font-size”高度之间的比率被称为一个字体的aspect值。
aspect =（x-height）/（font-size）
从上面的公式我们可以知道，如果某一个字体类型的aspect值比较大的话，那么当font-size属性值相同的情况下， x-height比较大，因此该字体类型在浏览器效果会显得比较大。
例如，Times New Roman字体类型的aspect值为0.46，则意味着当字体大小为100px时，它的x-height为46px。而Verdana字体类型的aspect值为0.58，则意味着当字体大小为100px时，它的x-height为58px。因此，我们得出在font-size属性值相同情况下，Verdana字体类型在浏览器效果会比New Times Roman字体类型的大。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 font-size-adjust属性</title>
<style type="text/css">
/*定义整体样式*/
div{font-size:16px;}
#div1{font-family:Times New Roman;}
#div2{font-family:Verdana}
</style>
</head>
<body>
<div id="div1">welcome to lvyestudy !</div>
<div id="div2">welcome to lvyestudy !</div>
</body>
</html>
分析：
不比不知道，一比吓一跳！相同的font-size值，由于字体类型font-family不同，在浏览器显示效果居然差别这么大！如果网站换字体类型的话，布局想不乱都不行。
下表为一些常用的西方字体的aspect值：
常用西方字体的参考值
字体类型 aspect值
Fjemish Script 0.28
Caflisch Script Web 0.37
Bernhard Modern 0.4
Gill Sans 0.46
Times New Roman 0.46
Minion Web 0.47
Myriad Web 0.48
Georgia 0.5
Trebuchet MS 0.53
Comic Sans MS 0.54
Verdana 0.58
二、如何使用aspect值
c = (a/b)s
说明：
a：表示原来字体类型的aspect值；
b：表示现在字体类型的aspect值；
s：表示原来字体类型的font-size值；
c：表示现在字体类型的font-size值；
上面公式其实很好理解，我们知道aspect值的计算公式是：
aspect =（x-height）/（font-size）
由于想要前后字体类型在浏览器的实际大小都相同，也就是x-height相同。我们用aspect1和font-size1表示“原来字体类型”的aspect值和font-size属性值，用aspect2和font-size2表示“现在字体类型”的aspect值和font-size属性值，由此得到2条公式：
aspect1 =（x-height）/（font-size1）
aspect2 =（x-height）/（font-size2）
从上面两条公式，我们得到：
（aspect1）/（aspect2）=（font-size2）/（font-size1）
自此，公式已经生成，不用再说大家都理解“c = (a/b)s”这条最终公式了吧？
如果想将“fontsize:16px;”的Times New Roman字体修改为Verdana字体，并且浏览器显示的字体大小仍然保持“fontsize:16px;”的Times New Roman字体的大小，需要执行以下步骤：
（1）查询得到Times New Roman字体的aspect值为0.46，Verdana字体的aspect值为0.58；
（2）将0.58除以0.46得到近似值1.26；
（3）因为需要让浏览器实际显示的字体大小为16px，所以将16px除以1.26得到近似值13px。然后在样式中指定字体大小为13px。也就是说，13px的Verdana字体相当于16px的Times New Roman字体。
计算方法很简单，如果你的数学是体育老师教的，没办法理解的话，那我就没话说了。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 font-size-adjust属性</title>
<style type="text/css">
#div1
{
font-size:16px;
font-family:Times New Roman;
font-size-adjust:0.46;
}
#div2
{
font-size:13px;
font-family:Verdana;
font-size-adjust:0.58;
}
</style>
</head>
<body>
<div id="div1">welcome to lvyestudy !</div>
<div id="div2">welcome to lvyestudy !</div>
</body>
</html>
分析：
通过使用font-size属性与font-size-adjust属性，字体从Times New Roman修改为Verdana后，在浏览器中的字体大小都没有改变。那有人又有新的疑惑了，字体大小是没变了，但是上面的单词间距怎么不一样呢？其实每种字体的单词间距和字母间距都是不一样的，这个我们可以使用word-spacing属性和letter-spacing属性来设置。
font-size-adjust属性可能在国内网站中很少用到，但是在英文网站的开发中我们经常碰到！对于想要建立英文网站的前端工程师，font-size-adjust属性是绝对必要知识之一。
参考：本文部分参考来自《HTML5和CSS3权威指南（第2版）》陆凌牛著，机械工业出版社出版
疑问
1、CSS定义的字体在不同的浏览器中大小不一样，如何处理？
例如使用font-size:14px定义的宋体文字，在IE下实际高度为16px，下空白是3px，在Firefox浏览器下实际高是17px、上空1px、下空3px。其解决办法是在文字定义时设定line-height属性，并确保所有文字都有默认的line-height值。
opacity属性在CSS3中，我们可以使用opacity属性来控制元素的透明度。
语法：
opacity:数值;
说明：
opacity属性取值范围为0.0~1.0，0.0表示完全透明，1.0表示完全不透明（默认值）。
opacity属性取值不可以为负数。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 opacity属性</title>
<style type="text/css">
a
{
display:inline-block;
padding:5px 10px;
font-family:微软雅黑;
color:white;
background-color:#45B823;
border-radius:4px;
cursor:pointer;
}
a:hover
{
opacity:0.8;
}
</style>
</head>
<body>
<a>调试代码</a>
</body>
</html>
透明度opacity属性用得也比较广泛，很多时候都是配合:hover伪类来定义鼠标移动到某个按钮或图片上时，改变透明度来呈现动态的效果。
RGBA颜色RGBA颜色
RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA说白了，就是在RGB的基础上加了一个透明度通道Alpha。
语法：
rgba(R,G,B,A)
说明：
R：红色值（Red）；
G：绿色值（Green）；
B：蓝色值（Blue）；
A：透明度（Alpha）；
R、G、B三个参数可以为正整数，也可以为百分比。正整数值的取值范围为0～255，百分数值的取值范围为0.0%～100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。
参数A为透明度，类似opacity属性，取值范围在0.0~1.0之间，不可为负值。下面是RGBA颜色的正确用法：
rgba(255,255,0,0.5)
rgba(50%,80%,50%,0.5)
大家看到RGBA颜色，很容易让我们想起上一节中的不透明度opacity属性。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 RGBA颜色</title>
<style type="text/css">
*{padding:0;margin:0;}
ul
{
display:inline-block;
list-style-type:none;
width:200px;
}
li
{
height:30px;
line-height:30px;
font-size:20px;
font-weight:bold;
text-align:center;
}
/*第1个li*/
li:first-child
{
background-color:#FF00FF;
}
/*第2个li*/
li:nth-child(2)
{
background-color:rgba(255,0,255,0.5);//文字不会透明
}
/*第3个li*/
li:last-child
{
background-color:#FF00FF;//文字会透明
opacity:0.5;
}
</style>
</head>
<body>
<ul>
<li>绿叶学习网</li>
<li>绿叶学习网</li>
<li>绿叶学习网</li>
</ul>
</body>
</html>
分析：
十六进制颜色值#FF00FF等价于rgb(255,0,255)。第1个li元素没有使用RGBA颜色值，也没有使用透明度opacity属性；第2个li元素使用RGBA颜色值；第3个li元素使用透明度opacity属性。
假如我们对某个元素使用透明度opacity属性，则该元素的内容以及子元素都会受到影响。
从上面的例子我们知道，对于设置元素的透明度，RGBA比透明度opacity属性更好，因为RGBA不会影响元素中的内容以及子元素的不透明度。
CSS3渐变共有2种：（1）线性渐变（linear-gradient）；（2）径向渐变（radial-gradient）。
1、线性渐变
线性渐变，指的就是指在一条直线上进行渐变，在网页中大多数渐变效果都是线性渐变。
2、径向渐变
径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）
在CSS3中，线性渐变指的是一条直线上进行的渐变。在网页中，大多数渐变效果都是线性渐变。
语法：
background:linear-gradient(方向，开始颜色，结束颜色);
说明：
线性渐变的方向取值有2种，一种是使用角度（deg），另外一种是使用关键字：
线性渐变的方向取值
属性值 对应角度 说明
to top 0deg 从下到上
to right 90deg 从左到右
to bottom 180deg 从上到下（默认值）
to left 270deg 从右到左
to top left 右上角到左上角（斜对角）
to top right 左下角到右上角（斜对角）
第2个参数和第3个参数，表示开始颜色和结束颜色，取值可以为关键字、十六进制颜色值、RGBA颜色等。。线性渐变可以有多个颜色值。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3线性渐变</title>
<style type="text/css">
div
{
width:200px;
height:150px;
background:linear-gradient(to right,blue,yellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
分析：
“background:linear-gradient(to right,blue,yellow);”表示线性渐变方向为“从左到右”，开始颜色为蓝色（blue），结束颜色为黄色（yellow）。
这里要特别注意一下线性渐变的方向问题，颜色值相同，由于渐变方向不同，实际得到的效果也会不一样。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3线性渐变</title>
<style type="text/css">
div
{
width:200px;
height:150px;
background:linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
分析：
这里同时定义了多种颜色的线性渐变效果。
径向渐变
http://www.lvyestudy.com/css3/css3_6.5.aspx
径向渐变简介
CSS3径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）。CSS3径向渐变是圆形或椭圆形渐变，颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变。实际开发中，兼容代码大家还是得做到位。
语法：
background:radial-gradient(position ,shape size,start-color,stop-color)
说明：
position：定义圆心位置；
shape size：由2个参数组成，shape定义形状（圆形或椭圆），size定义大小；
start-color：定义开始颜色值；
stop-color：定义结束颜色值；
position、shape size都是可选参数，如果省略，则表示该项参数采用默认值。
start-color和stop-color为必选参数，并且径向渐变可以有多个颜色值。
1、定义圆心位置position
position用于定义径向渐变的圆心位置，属性值跟background-position属性值相似，也有2种情况：（1）长度值，如px、em或百分比等；（2）关键字。
圆心位置取值（关键字）
属性值 说明
center 中部（默认值）
top 顶部
right 右部
bottom 底部
left 左部
top left 左上
top center 靠上居中
top right 右上
left center 靠左居中
center center 正中
right center 靠右居中
bottom left 左下
bottom center 靠下居中
bottom right 右下
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3径向渐变</title>
<style type="text/css">
/*设置div公共样式*/
div
{
width:200px;
height:150px;
line-height:150px;
text-align:center;
color:white;
}
#div1
{
margin-bottom:10px;
background:-webkit-radial-gradient(orange,blue);
}
#div2
{
background:-webkit-radial-gradient(top,orange,blue);
}
</style>
</head>
<body>
<div id="div1">默认值（center）</div>
<div id="div2">top</div>
</body>
</html>
分析：
大家可以尝试改变圆心位置的属性值，看看实际效果是如何？
2、定义形状shape和定义大小size
（1）定义形状shape
shape参数取值
属性值 说明
circle 定义径向渐变为“圆形”
ellipse 定义径向渐变为“椭圆形”
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3径向渐变</title>
<style type="text/css">
/*设置div公共样式*/
div
{
width:200px;
height:150px;
line-height:150px;
text-align:center;
color:white;
}
#div1
{
margin-bottom:10px;
background:-webkit-radial-gradient(orange,blue);
}
#div2
{
background:-webkit-radial-gradient(circle,orange,blue);
}
</style>
</head>
<body>
<div id="div1">默认值（ellipse）</div>
<div id="div2">circle</div>
</body>
</html>
（2）定义大小size
size主要用于定义径向渐变的结束形状大小。
size参数取值
属性值 说明
closest-side 指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner 指定径向渐变的半径长度为从圆心到离圆心最远的角
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3径向渐变</title>
<style type="text/css">
/*设置div公共样式*/
div
{
width:120px;
height:80px;
line-height:80px;
text-align:center;
color:white;
}
div+div
{
margin-top:10px;
}
#div1{background:-webkit-radial-gradient(circle closest-side,orange,blue);}
#div2{background:-webkit-radial-gradient(circle closest-corner,orange,blue);}
#div3{background:-webkit-radial-gradient(circle farthest-side,orange,blue);}
#div4{background:-webkit-radial-gradient(circle farthest-corner,orange,blue);}
</style>
</head>
<body>
<div id="div1">closest-side</div>
<div id="div2">closest-corner</div>
<div id="div3">farthest-side</div>
<div id="div4">farthest-corner
</div>
</body>
</html>
3、开始颜色start-color和结束颜色stop-color
参数start-color用于定义开始颜色，参数stop-color用于定义结束颜色。颜色可以为关键词、十六进制颜色值、RGBA颜色值等。
径向渐变也接受一个颜色值列表，用于同时定义多种颜色的径向渐变。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3径向渐变</title>
<style type="text/css">
div
{
width:200px;
height:150px;
background:-webkit-radial-gradient(red,orange,yellow,green,blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
分析：
默认情况下，径向渐变颜色节点是均匀分布的，不过我们也可以为每一种颜色添加百分比，来使得各个颜色节点不均匀分布。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3径向渐变</title>
<style type="text/css">
div
{
width:200px;
height:150px;
line-height:150px;
text-align:center;
color:white;
}
#div1{background:-webkit-radial-gradient(red,green,blue);margin-bottom:10px;}
#div2{background:-webkit-radial-gradient(red 5%,green 30%,blue 60%);}
</style>
</head>
<body>
<div id="div1">颜色均匀分布</div>
<div id="div2">颜色不均匀分布</div>
</body>
</html>
一、opacity属性
在CSS3中，我们可以使用opacity属性来控制元素的透明度。
语法：
opacity:数值;
说明：
opacity属性取值范围为0.0~1.0，0.0表示完全透明，1.0表示完全不透明（默认值）。
opacity属性取值不可以为负数。
二、RGBA颜色
RGBA颜色，说白了，就是在RGB的基础上加了一个透明度通道Alpha。
语法：
rgba(R,G,B,A)
说明：
R：红色值（Red）；
G：绿色值（Green）；
B：蓝色值（Blue）；
A：透明度（Alpha）；
R、G、B三个参数可以为正整数，也可以为百分比。正整数值的取值范围为0～255，百分数值的取值范围为0.0%～100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。
参数A为透明度，类似opacity，取值范围在0~1之间，不可为负值。
三、线性渐变
在CSS3中，线性渐变指的是一条直线上进行的渐变。在网页中，大多数渐变效果都是线性渐变。
语法：
background:linear-gradient(方向，开始颜色，结束颜色);
四、径向渐变
CSS3径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）。CSS3径向渐变是圆形或椭圆形渐变，颜色不再沿着一条直线编号，而是从一个起点向所有方向渐变。
语法：
background-image:radial-gradient(position ,shape size,start-color,stop-color)
说明：
position：定义圆心位置；
shape size：由2个参数组成，shape定义形状（圆形或椭圆），size定义大小；
start-color：定义开始颜色值；
stop-color：定义结束颜色值；
position、shape size都是可选参数，如果省略，则表示该项参数采用默认值。大家要非常清楚这一点，不然这一节的代码你有可能看不懂。
start-color和stop-color为必选参数，并且径向渐变可以有多个颜色值。
CSS3边框属性：
属性 说明
border-radius 圆角效果
border-colors 多色边框
border-image 边框背景
box-shadow 边框阴影
border-radius属性在CSS3中，我们可以使用border-radius属性为元素添加圆角效果。
语法：
border-radius:长度值;
说明：
长度值可以是px、百分比、em等。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-radius属性</title>
<style type="text/css">
#div1
{
width:100px;
height:50px;
border:1px solid gray;
border-radius:10px;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
分析：
“border-radius:10px;”指的是元素四个角的圆角半径都是10px。
二、border-radius属性值的4种写法
跟border、padding、margin等属性类似，对于圆角border-radius也有4种写法。
1、border-radius设置1个值
当border-radius设置1个值时，例如“border-radius:10px;”表示4个角的圆角半径都是10px。
2、border-radius设置2个值
当border-radius设置2个值时，例如“border-radius:10px 20px;”表示左上角和右下角的圆角半径是10px，右上角和左下角的圆角半径都是20px。
3、border-radius设置3个值
当border-radius设置3个值时，例如“border-radius:10px 20px 30px;”表示左上角圆角半径是10px，右上角和左下角圆角半径都是20px，右下角圆角半径是30px。
4、border-radius设置4个值
当border-radius设置4个值时，例如“border-radius:10px 20px 30px 40px;”表示左上角、右上角、右下角和左下角的圆角半径依次是10px、20px、30px、40px。
这里的“左上角、右上角、右下角和左下角”，按照顺时针方向记忆就记住了。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-radius属性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid red;
border-radius:10px 20px 30px 40px;
background-color:#FCE9B8;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
三、border-radius画实心半圆和实心圆
1、实心半圆
实心半圆分为：实心上半圆、实心下半圆、实心左半圆、实心右半圆。我们只要掌握制作一个方向的实心半圆的方法，其他方向的实心半圆就可以轻松实现，因为原理都一样。
假如我们要制作实现上半圆，实现方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的圆角半径与元素的高度一致，而右下角和左下角的圆角半径设置为0。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-radius属性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid red;
border-radius:100px 100px 0 0;
background-color:#FCE9B8;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
2、实心圆
在CSS3中，使用border-radius属性实现实心圆方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-radius属性</title>
<style type="text/css">
#div1
{
width:100px;
height:100px;
border:1px solid red;
border-radius:50px;
background-color:#FCE9B8;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
四、border-radius属性派生子属性
border-radius属性可以分开，分别为四个角设置相应的圆角值，分别是：
（1）border-top-right-radius：右上角；
（2）border-bottom-right-radius：右下角；
（3）border-bottom-left-radius：左下角；
（4）border-top-left-radius：左上角；
border-colors属性在CSS3中，我们可以使用border-colors属性来实现多色边框。记住，是border-colors，不是border-color。
语法：
-moz-border-top-colors:颜色值;
-moz-border-right-colors:颜色值;
-moz-border-bottom-colors:颜色值;
-moz-border-left-colors:颜色值;
说明：
对于CSSS3中的border-colors属性，我们需要注意3点：
（1）border-colors属性并没有得到各大主流浏览器支持，目前仅有目前仅有Mozilla Gecko引擎（火狐浏览器）支持，因此需要加上浏览器前缀“-moz-”；
（2）不能使用-moz-border-bolors属性为4条边同时设定颜色，必须像上面语法那样分别为4条边设定颜色；
（3）如果边框宽度（border-width）为n像素，则该边框可以使用n种颜色，每种颜色显示1像素的宽度。
举例1：CSS3 border-colors实现多色边框
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-colors属性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border-width:7px;
border-style:solid;
-moz-border-top-colors:red orange yellow green cyan blue purple;
-moz-border-right-colors: red orange yellow green cyan blue purple;
-moz-border-bottom-colors: red orange yellow green cyan blue purple;
-moz-border-left-colors: red orange yellow green cyan blue purple;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
举例2：CSS3 border-colors属性制作渐变边框
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-colors属性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border-width:8px;
border-style:solid;
-moz-border-top-colors:#D0EDFD #B8E4FD #9DD9FC #8DD4FC #71C9FC #4ABBFC #1DACFE #00A2FF;
-moz-border-right-colors:#D0EDFD #B8E4FD #9DD9FC #8DD4FC #71C9FC #4ABBFC #1DACFE #00A2FF;
-moz-border-bottom-colors:#D0EDFD #B8E4FD #9DD9FC #8DD4FC #71C9FC #4ABBFC #1DACFE #00A2FF;
-moz-border-left-colors:#D0EDFD #B8E4FD #9DD9FC #8DD4FC #71C9FC #4ABBFC #1DACFE #00A2FF;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
分析：
此处边框宽度为8px，每条边框使用border-colors定义8个渐变颜色值。有人疑惑，那8个渐变颜色值怎么取出来的呢？很简单，大家可以直接使用“在线调色板”按照方向逐个取8个颜色值就有了：
border-image属性在CSS3中，我们可以使用border-image属性为边框添加背景图片。
http://www.lvyestudy.com/css3/css3_7.4.aspx
box-shadow属性在CSS3中，我们可以使用box-shadow属性轻松地为元素添加阴影效果。
语法：
box-shadow：x-shadow y-shadow blur spread color inset;
说明：
（1）x-shadow：设置水平阴影的位置（X轴），可以使用负值；
（2）y-shadow：设置垂直阴影的位置（y轴），可以使用负值；
（3）blur：设置阴影模糊半径；
（4）spread：扩展半径，设置阴影的尺寸；
（5）color：设置阴影的颜色；
（6）inset：这个参数默认不设置。默认情况下为外阴影，inset表示内阴影。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-shadow属性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid silver;
box-shadow:5px 5px 8px red;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
4、外阴影outset与内阴影inset
box-shadow属性最后一个参数用于设置阴影是否是内阴影，还是外阴影。
取值有2种：
（1）outset：默认值，外阴影；
（2）inset：内阴影；
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-shadow属性</title>
<style type="text/css">
div
{
width:100px;
height:100px;
line-height:100px;
text-align:center;
}
#div1{box-shadow:0 0 12px red;}
#div2{box-shadow:0 0 12px red inset;}
</style>
</head>
<body>
<div id="div1">外阴影</div>
<div id="div2">内阴影</div>
</body>
</html>
分析：
默认情况下，边框阴影是外阴影效果，设置最后一个属性值为inset时，边框阴影为内阴影效果。
这里注意一个技巧：当水平阴影位置x-shadow和垂直阴影位置y-shadow都为0时，阴影都向外发散或者都向内发散。很多人想要这种效果，之前也不知道怎么做！
三、四条边框独立样式
box-shadow属性可以为边框的4条边的设置独立样式。其中，每条边的阴影属性值之间用英文逗号隔开即可。
语法：
box-shadow: 左边阴影,顶部阴影,底部阴影,右边阴影;
说明：
注意偏移半径的正负。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-shadow属性</title>
<style type="text/css">
#div1
{
width:100px;
height:100px;
line-height:100px;
text-align:center;
box-shadow:-5px 0 12px red,0 -5px 12px yellow,0 5px 12px blue,5px 0 12px green;
}
</style>
</head>
<body>
<div id="div1">外阴影</div>
</body>
</html>
分析：
仔细观察水平阴影位置x-shadow和垂直阴影位置y-shadow这两个取值是如何设置的。
http://www.lvyestudy.com/css3/css3_7.5.aspx
CSS3新增的背景属性
属性值 说明
background-size 背景大小
background-origin 背景位置
background-clip 背景裁切
在CSS3中，我们可以使用background-size属性来设置背景图片的大小，这使得我们可以在不同的环境中重复使用背景图片。
语法：
background-size:取值;
说明：
background-size取值共有2种，一种是使用长度值（如px、百分比）；另外一种是使用关键字。
background-size关键字取值
关键字 说明
cover 即“覆盖”，将背景图片以等比缩放来填充整个容器元素
contain 即“容纳”，将背景图片等比缩放至某一边紧贴容器边缘为止
举例1：background-size取值为长度值
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 background-size属性</title>
<style type="text/css">
div
{
width:160px;
height:100px;
border:1px solid red;
margin-bottom:10px;
background-image:url("../App_images/lesson/run_css3/css3.png");
background-repeat:no-repeat;
}
#div2{background-size:160px 100px;}
</style>
</head>
<body>
<div id="div1"></div>//默认图片大小
<div id="div2"></div>//将图片设置了大小
</body>
</html>
分析：
第1个div元素背景图片大小使用默认值（即图片的实际大小），而第2个div元素使用background-size属性重新定义了背景图片的大小。其中，“background-size:160px 100px”表示定义背景图片宽度为160px，高度为100px。
举例2：background-size取值为关键字
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 background-size属性</title>
<style type="text/css">
div
{
width:160px;
height:100px;
border:1px solid red;
margin-bottom:10px;
background-image:url("../App_images/lesson/run_css3/css3.png");
background-repeat:no-repeat;
}
#div2{background-size:cover;}
#div3{background-size:contain;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
第1个div没有使用background-size属性。我们从第2个div和第3个div，可以看出背景图片都产生了缩放。当属性background-size的值为cover时，背景图像按比例缩放，直到覆盖整个背景区域为止，但可能会裁剪掉部分图像。当属性background-size的值为contain时，背景图像会完全显示出来，但可能不会完全覆盖背景区域。
background-origin属性background-origin属性
在CSS3中，我们可以使用background-origin属性来设置元素背景图片平铺的最开始位置。
语法：
background-origin:属性值;
说明：
background-origin属性取值如下：
属性值 说明
border-box 表示背景图片是从边框开始平铺
padding-box 表示背景图片是从内边距开始平铺（默认值）
content-box 表示背景图片是从内容区域开始平铺
http://www.lvyestudy.com/css3/css3_8.3.aspx
background-clip属性http://www.lvyestudy.com/css3/css3_8.4.aspx
语法：
background-clip:属性值;
说明：
background-clip属性取值
属性值 说明
border-box 默认值，表示从边框border开始剪切
padding-box 表示从内边距padding开始剪切
content-box 表示从内容区域content开始剪切
在CSS3中，我们可以使用transform属性来实现文字或图像的的各种变形效果，如位移、缩放、旋转、倾斜等。
transform属性变形方法：
方法或属性 说明
translate() 位移
scale() 缩放
rotate() 旋转
skew() 倾斜
transform-origin 中心原点
translate()方法对于位移translate()方法，我们分为3种情况：
（1）translateX(x)：元素仅在水平方向移动（X轴移动）；
（2）translateY(y)：元素仅在垂直方向移动（Y轴移动）；
（3）transklate(x,y)：元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动）；
1、translateX(x)方法
语法：
transform:translateX(x);
说明：
x表示元素在水平方向（X轴）的移动距离，单位为px、em或百分比等。
当x为正时，表示元素在水平方向向右移动（X轴正方向）；当x为负时，表示元素在水平方向向左移动（X轴负方向）。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3位移translate()方法</title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed silver;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:translateX(20px);
-webkit-transform:translateX(20px); /*兼容-webkit-引擎浏览器*/
-moz-transform:translateX(20px); /*兼容-moz-引擎浏览器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
分析：
“transform:translateX(20px);”表示元素在水平方向向右位移20px。如果把20px改为-20px，则元素在水平方向向左位移20px
2、translateY(y)方法
语法：
tranform:translateY(y)
说明：
y表示元素在水平方向（y轴）的移动距离，单位为px、em或百分比等。
当y为正时，表示元素在垂直方向向下移动；当y为负时，表示元素在垂直方向向上移动。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3位移translate()方法</title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed silver;
}
/*设置当前元素样式*/
#current
、 {
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:translateY(20px);
-webkit-transform:translateY(20px); /*兼容-webkit-引擎浏览器*/
-moz-transform:translateY(20px); /*兼容-moz-引擎浏览器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
3、translate(x,y)
语法：
tranform:translate(x,y)
说明：
x表示元素在水平方向（x轴）的移动距离，y表示元素在水平方向（y轴）的移动距离。
注意，Y是一个可选参数，如果没有设置Y值，则表示元素仅仅沿着X轴正方形移动。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3位移translate()方法</title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed silver;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:translate(20px,40px);
-webkit-transform:translate(20px,40px); /*兼容-webkit-引擎浏览器*/
-moz-transform:translate(20px,40px); /*兼容-moz-引擎浏览器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
分析：
其实，单纯地对某个元素设置位移是没有太多实际的意义。位移translate()方法一般都是结合CSS3动画一起使用，从而实现上下左右移动的动画效果。
对于移动动画效果，使用jQuery的animate()方法也可以实现，不过jQuery实现位移比CSS3实现来得麻烦，这是因为jQuery要想实现移动动画效果，对位移的元素还得必须设置position属性。但是CSS3的translate()方法则不用那么麻烦。
scale()方法缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。
跟translate()方法一样，缩放scale()方法也有3种情况：
（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；
1、scaleX(x)
语法：
transform:scaleX(x)
说明：
x表示元素沿着水平方向（X轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。
2、scaleY(y)
语法：
transform:scaleY(y)
说明：
y表示元素沿着垂直方向（Y轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。
3、scale(x,y)
语法：
transform:scale(x,y)
说明：
x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。
注意，Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3缩放scale()方法</title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:scaleX(1.5);
-webkit-transform:scaleX(1.5); /*兼容-webkit-引擎浏览器*/
-moz-transform:scaleX(1.5); /*兼容-moz-引擎浏览器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
分析：
从上图可以看出，元素沿着X轴方向放大了1.5倍（两个方向同时延伸，整体放大1.5倍）。
transform:scaleY (1.5);
-webkit-transform:scaleY(1.5); /*兼容-webkit-引擎浏览器*/
-moz-transform:scaleY(1.5); /*兼容-moz-引擎浏览器*/
rotate()方法在CSS3中，我们可以使用rotate()方法来将元素相对中心原点进行旋转。这里的旋转是二维的，不涉及三维空间的操作。关于3D变形，请关注我们未来上线的CSS3进阶教程。
语法：
transform：rotate(度数);
说明：
度数指的是元素相对中心原点进行旋转的度数，单位为deg。其中，deg是degree（度数）的缩写。
如果度数为正，则表示元素相对原点中心顺时针旋转；如果度数为负，则表示元素相对原点中心进行逆时针旋转。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3旋转rotate()方法</title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
line-height:100px;
color:white;
background-color: #007BEE;
text-align:center;
transform:rotate(30deg);
-webkit-transform:rotate(30deg); /*兼容-webkit-引擎浏览器*/
-moz-transform:rotate(30deg); /*兼容-moz-引擎浏览器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current">顺时针旋转30度</div>
</div>
</body>
</html>
skew()方法skew()方法跟translate()方法、scale()方法一样，也有3种情况：
（1）skewX(x)：使元素在水平方向倾斜（X轴倾斜）；
（2）skewY(y)：使元素在垂直方向倾斜（Y轴倾斜）；
（3）skew(x,y)：使元素在水平方向和垂直方向同时倾斜（X轴和Y轴同时倾斜）；
1、skewX(x)方法
语法：
transform:skewX(x);
说明：
x表示元素在X轴倾斜的度数，单位为deg。
如果度数为正，表示元素沿水平方向（X轴）顺时针倾斜；如果度数为负，表示元素沿水平方向（X轴）逆时针倾斜。
2、skewY(y)方法
语法：
transform:skewY(y);
说明：
y表示元素在Y轴倾斜的度数，单位为deg。
如果度数为正，表示元素沿垂直方向（Y轴）顺时针倾斜；如果度数为负，表示元素沿垂直方向（Y轴）逆时针倾斜。
注意，这里是跟位移translate()方法类似的，也是W3C的奇葩规定。
3、skew(x,y)方法
语法：
transform:skew(x,y);
说明：
第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3倾斜skew()方法</title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed silver;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:skewX(30deg);
-webkit-transform:skewX(30deg); /*兼容-webkit-引擎浏览器*/
-moz-transform:skewX(30deg);/*兼容-moz-引擎浏览器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
分析：
对于初学者，可能一时半会看不出skewX()方法的本质原理。其实skewX()方法变形原理是这样的：由于我给元素限定了高度为100px，而skewX()方法是沿着X轴方向倾斜。所以，只要倾斜角度不是180°，元素都会保持100px的高度。同时为了保持倾斜，只能沿着X轴拉长本身。
由此我们可以总结：
（1）skewX()方法会保持高度，沿着X轴倾斜；
（2）skewY()方法会保持宽度，沿着Y轴倾斜；
（3）skew(x,y)方法会先按照skewX()方法倾斜，然后按照skewY()方法倾斜；
transform-origin属性任何一个元素都有一个中心原点，默认情况下，元素的中心原点位于X轴和Y轴的50%处。
默认情况下，CSS3变形进行的位移、缩放、旋转、倾斜都是以元素的中心原点进行变形。
假如我们要使得元素进行位移、缩放、旋转、倾斜这些变形操作的中心原点不是原来元素的中心位置，那该怎么办呢？
在CSS3中，我们可以通过transform-origin属性来改变元素变形时的中心原点位置。
语法：
transform-origin:取值;
说明：
transform-origin属性取值有2种：一种是采用长度值，另外一种是使用关键字。长度值一般使用百分比作为单位，很少使用px、em等作为单位。
不管transform-origin取值为长度值还是关键字，都需要设置水平方向和垂直方向的值。。
transform-origin属性取值
关键字 百分比 说明
top left 0 0 左上
top center 50% 0 靠上居中
top right 100% 0 右上
left center 0 50% 靠左居中
center center 50% 50% 正中
right center 100% 50% 靠右居中
bottom left 0 100% 左下
bottom center 50% 100% 靠下居中
bottom right 100% 100% 右下
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3中心原点transform-origin属性</title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed gray;
}
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform-origin:right center;
-webkit-transform-origin:right center;/*兼容-webkit-引擎浏览器*/
-moz-transform-origin:right center; /*兼容-moz-引擎浏览器*/
transform:rotate(30deg);
-webkit-transform:rotate(30deg); /*兼容-webkit-引擎浏览器*/
-moz-transform:rotate(30deg); /*兼容-moz-引擎浏览器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
在CSS3中，我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现动画效果（仔细理解这句话）。
语法：
transition：属性 持续时间 过渡方法 延迟时间;
说明：
其实transition属性是一个复合属性，主要包含4个子属性：
（1）transition-property：对元素的哪一个属性进行操作；
（2）transition-duration：过渡的持续时间；
（3）transition-timing-function：过渡使用的方法（函数）；
（4）transition-delay：可选属性，指定动画开始出现的延迟时间
；
transition-propertytransition-property属性
其中，我们可以使用transition-property属性来单独设定过渡动画所要操作的那个属性。
语法：
transition-property：取值;
说明：
transition-property属性的取值是一个“CSS属性名”。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 transition-property属性</title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:50px;
background-color:#14C7F3;
transition-property:height;
transition-duration:0.5s ;
transition-timing-function:linear;
transition-delay:0;
}
div:hover
{
height:100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
分析：
这里使用transition-property属性指定了过渡动画所操作的CSS属性是height。当鼠标移动到div元素上时，元素的高度会在0.5s内从50px过渡到100px。
对于CSS3过渡动画，大多数情况下都是配合:hover伪类 来使用。
此处为了更清晰地表达，省略了兼容代码的书写，请大家在实际开发中别忘了写兼容性代码。这一章建议使用chrome浏览器（-webkit-前缀）来学习。
transition-duration在CSS3中，我们可以使用transition-duration属性单独设置过渡持续的时间。
语法：
transition-duration：时间;
说明：
transition-duration属性取值是一个时间，单位为s（秒），可以为小数如0.5s。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3过渡</title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:100px;
border-radius:0;
background-color:#14C7F3;
transition-property:border-radius;
transition-duration:0.5s;
transition-timing-function:linear;
transition-delay:0;
}
div:hover
{
border-radius:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
分析：
当鼠标移动到div元素上面时，div元素圆角半径在0.5秒内从0过渡到50px。
transition-timing-function在CSS3中，我们可以使用transition-timing-function属性来定义过渡方式。所谓的“过渡方式”主要用来指定动画在过渡时间内的速率。
语法：
transition-function:取值;
说明：
transition-timing-function属性取值共有5种，具体如下：
linear：匀速
ease:速度由快变慢
ease-in：速率由慢变快
ease-out：速率由快变慢
ease-in-out：慢->快->慢
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 transition-timing-function属性</title>
<style type="text/css">
div
{
width:100px;
height:50px;
text-align:center;
line-height:50px;
border-radius:0;
background-color:#14C7F3;
transition-property:width;
transition-duration:2s ;
transition-delay:0;
}
div+div
{
margin-top:10px;
}
#div1{transition-timing-function:linear;}
#div2{transition-timing-function:ease;}
#div3{transition-timing-function:ease-in;}
#div4{transition-timing-function:ease-out;}
#div5{transition-timing-function:ease-in-out}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>
transition-delay我们可以使用transition-delay属性来设置动画开始的延迟时间。
语法：
transition-delay:时间;
说明：
transition-delay属性取值是一个时间，单位为s（秒），可以为小数如0.5s。
transition-delay属性默认值为0，也就是说当我们没有设置transition-delay属性时，过渡动画就没有延迟时间。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 transition-delay属性</title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:100px;
border-radius:0;
background-color:#14C7F3;
transition-property:border-radius;
transition-duration:1s ;
transition-timing-function:linear;
transition-delay:2s;
}
div:hover
{
border-radius:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
分析：
可以：transition:border-radius 1s linear 2s;这么表达代替那四句代码
“transition-delay:2s;”表示鼠标移动到div的那一瞬间开始计时，在计时开始之后还得延迟2s才会开始进行过渡动画，这就是所谓的“延迟时间”。然后当鼠标移出div一瞬间开始，过渡动画同样也会延迟2s才会开始恢复。
http://www.lvyestudy.com/css3/css3_10.9.aspx
图片文字介绍滑动效果
两个属性都要过渡的话就不可以transition:border-radius 1s linear 2s;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>深入了解transition属性</title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:100px;
border-radius:0;
background-color:#14C7F3;
transition-property:border-radius,background-color;
transition-duration:1s ;
transition-timing-function:linear;
transition-delay:2s;
}
div:hover
{
border-radius:50px;
background-color:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
分析：
当鼠标移动到div元素上方时，div元素会在1s时间内同时对border-radius和background-color这两个属性产生过渡效果。
如果想要使用transition属性同时对多个属性进行实现平滑过渡效果，只需要在transition-property属性添加多个属性名即可，其中属性名之间用英文逗号隔开。
在CSS3中，动画效果使用animation属性来实现。animation属性和transition属性功能是相同的，都是通过改变元素的“属性值”来实现动画效果。但是这两者又有很大的区别：transition属性只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。animation属性则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。
@keyframes规则定义动画使用animation属性定义CSS3动画需要2步：
（1）定义动画；
（2）调用动画；
在CSS3中，在使用动画之前，我们必须使用@keyframes规则定义动画。
语法：
@keyframes 动画名
{
0%
{
……
}
……
100%
{
}
}
说明：
0%表示动画的开始，100%表示动画的结束。0%和100%是必须的，不过在一个@keyframes规则中可以由多个百分比构成，每一个百分比都可以定义自身的CSS样式，从而形成一系列的动画效果。
小技巧：使用@keyframes规则时，如果仅仅只有0%和100%这两个百分比的话，这时0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 @keyframes</title>
<style type="text/css">
@-webkit-keyframes mycolor
{
0%{background-color:red;}
30%{background-color:blue;}
60%{background-color:yellow;}
100%{background-color:green;}
}
div
{
width:100px;
height:100px;
border-radius:50px;
background-color:red;
}
div:hover
{
-webkit-animation-name:mycolor;//调用动画
-webkit-animation-duration:5s;//动画持续时间
-webkit-animation-timing-function:linear;//动画发生方式
}
</style>
</head>
<body>
<div></div>
</body>
</html>
分析：
（1）定义动画
这里我们使用@keyframes规则定义了一个名为mycolor的动画，刚刚开始时背景颜色为红色，从0%到30%之间背景颜色从红色变为蓝色，然后从30%到60%之间背景颜色从蓝色变为黄色，最后在60%到100%之间背景颜色从蓝色变为绿色。动画执行完毕，背景颜色回归红色（初始值）。
很多新手会有疑问，这些百分比是什么意思，是相对什么来说的呢？哪还有什么，肯定是相对“持续时间animation-duration”啦！例如这个例子里面，我们定义持续时间为5s，则0%指的是0s（开始时），30%指的是1.5s的时候，60%指的是3s的时候，100%则指的是5s（结束时）。假如我们定义持续时间为10s，那么0%指的是0s（开始时），30%指的是3s的时候，60%指的是6s的时候，而100%则指的是10s（结束时）。以此类推。
animation-name属性语法：
animation-name：动画名;
说明：
注意，animation-name 调用的动画名需要和@keyframes规则定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。为了浏览器兼容性，针对Chrome和Safari浏览器需要加上-webkit-前缀，而针对Firefox浏览器需要加上-moz-。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 animation-name属性</title>
<style type="text/css">
@-webkit-keyframes mycolor
{
0%{background-color:red;}
30%{background-color:blue;}
60%{background-color:yellow;}
100%{background-color:green;}
}
@-webkit-keyframes mytransform
{
0%{border-radius:0;}
50%{border-radius:50px; -webkit-transform:translateX(0);}
100%{-webkit-transform:translateX(50px);}
}
div
{
width:100px;
height:100px;
background-color:red;
-webkit-animation-name:mytransform;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
animation-duration属性语法：
animation-duration:时间;
说明：
animation-duration属性取值是一个时间，单位为s（秒），可以为小数如0.5s。
提供代码涨姿势：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 animation-duration属性</title>
<style type="text/css">
@-webkit-keyframes mytranslate
{
0%{}
100%{-webkit-transform:translateX(100px);}
}
div:not(#container)
{
width:40px;
height:40px;
border-radius:20px;
background-color:red;
-webkit-animation-name:mytranslate;
-webkit-animation-timing-function:linear;
}
#container
{
display:inline-block;
width:140px;
border:1px solid silver;
}
#div1{-webkit-animation-duration:2s;margin-bottom:10px;}
#div2{-webkit-animation-duration:4s;}
</style>
</head>
<body>
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>
animation-timing-function属性语法：
animation-timing-function：取值;
http://www.lvyestudy.com/css3/css3_11.5.aspx
animation-delay属性在CSS3中，我们可以使用animation-delay属性来定义动画播放的延迟时间
语法：
animation-delay:时间;
说明：
animation-delay属性取值是一个时间，单位为s（秒），可以为小数如0.5s。
animation-delay属性默认值为0，也就是说当我们没有设置animation-delay属性时，CSS3动画就没有延迟时间。
animation-iteration-count属性在CSS3中，我们可以使用animation-iteration-count属性来定义动画的播放次数。
语法：
animation-iteration-count：取值;
说明：
animation-iteration-count属性取值有2种：
（1）正整数；
（2）infinite；
animation-iteration-count属性默认值为1。也就是默认情况下，动画从开始到结束只播放一次。“animation-iteration-count:n”表示动画播放n次，n为正整数；
当animation-iteration-count属性取值为infinite时，动画会无限次地循环播放。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 animation-iteration-count属性</title>
<style type="text/css">
@-webkit-keyframes mytranslate
{
0%{}
50%{-webkit-transform:translateX(100px);}
100%{}
}
#div1
{
width:40px;
height:40px;
border-radius:20px;
background-color:red;
-webkit-animation-name:mytranslate;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
}
#container
{
display:inline-block;
width:140px;
border:1px solid silver;
}
</style>
</head>
<body>
<div id="container">
<div id="div1"></div>
</div>
</body>
</html>
animation-direction属性在CSS3中，我们可以使用animation-direction属性定义动画的播放方向。
语法：
animation-direction:取值;
说明：
animation-direction属性取值如下：
属性值 说明
normal 每次循环都向正方向播放（默认值）
reverse 每次循环都向反方向播放
alternate 播放次数是奇数时，动画向原方向播放；播放次数是偶数时，动画向反方向播放
animation-play-state属性在CSS3中，我们可以使用animation-play-state属性来定义动画的播放状态。
语法：
animation-play-state：取值;
说明：
animation-play-state属性取值
属性值 说明
running 播放动画（默认值）
paused 暂停动画
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 animation-play-state属性</title>
<style type="text/css">
@-webkit-keyframes mytranslate
{
0%{}
50%{-webkit-transform:translateX(200px);}
100%{}
}
#div1
{
width:40px;
height:40px;
border-radius:20px;
background-color:red;
-webkit-animation-name:mytranslate;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
}
#container
{
display:inline-block;
width:240px;
border:1px solid silver;
}
</style>
<script src="../App_js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn_pause").click(function () {
$("#div1").css("-webkit-animation-play-state", "paused");
});
$("#btn_run").click(function () {
$("#div1").css("-webkit-animation-play-state", "running");
});
})
</script>
</head>
<body>
<div id="container">
<div id="div1"></div>
</div>
<div id="control_btn">
<input id="btn_pause" type="button" value="暂停"/>
<input id="btn_run" type="button" value="播放"/>
</div>
</body>
</html>
这里使用jQuery做了一个小程序，当点击“暂停”按钮时，设置动画的animation-play-state属性值为“paused”；当点击“播放”按钮时，设置动画的animation-play-state属性值为“running”。这种效果就跟视频播放器中的“开始”和“暂停”的效果一样，很有趣吧。
animation-fill-mode在CSS3中，我们可以使用animation-fill-mode属性定义在动画开始之前和动画结束之后发生的事情。
语法：
animation-fill-mode:取值;
说明：
animation-fill-mode属性取值
属性值 说明
none 动画完成最后一帧时会反转到初始帧处（默认值）
forwards 动画结束之后继续应用最后的关键帧位置
backwards 会在向元素应用动画样式时迅速应用动画的初始帧
both 元素动画同时具有forwards和backwards效果
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 animation-fill-mode属性</title>
<style type="text/css">
@-webkit-keyframes mytranslate
{
0%{}
100%{-webkit-transform:translateX(100px);}
}
div:not(#container)
{
width:40px;
height:40px;
border-radius:20px;
background-color:red;
-webkit-animation-name:mytranslate;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:2s;
}
#div2
{
-webkit-animation-fill-mode:forwards;
}
#div3
{
-webkit-animation-fill-mode:backwards;
}
#div4
{
-webkit-animation-fill-mode:both;
}
#container
{
display:inline-block;
width:140px;
border:1px solid silver;
}
</style>
</head>
<body>
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
</html>
想要使用animation属性实现CSS3动画的话，需要2步：
（1）定义动画；
（2）调用动画；
在CSS3中，我们使用@keyframes规则来“定义动画”。关于“调用动画”，我们学习了以下属性：
CSS3动画属性:
属性 说明
animation-name 调用动画
animation-duration 持续时间
animation-timing-function 播放方式
animation-delay 延迟时间
animation-iteration-count 播放次数
animation-direction 播放方向
animation-play-state 播放状态
animation-fill-mode 时间外属性
CSS3多列布局属性
属性值 说明
column-count 定义多列布局的列数
column-width 定义多列布局每一列的宽度
column-gap 定义两列之间的间距
column-rule 定义两列之间边框样式
column-span 定义跨列样式
column-count属性在CSS3的多列布局中，我们可以使用column-count属性指定多列布局的列数，而不需要通过列宽度等来调整列数。
语法：
column-count: auto/正整数;
说明：
column-count有2个属性值，一个是auto，另外一个是正整数（如1、2、3）。
属性值 说明
auto 列数由其他属性决定，比如column-width
n（正整数） 元素内容被自动划分为最佳n列
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 column-count属性</title>
<style type="text/css">
body
{
width:400px;
padding:10px;
border:1px solid silver;
column-count:3;
-webkit-column-count:3;
-moz-column-count:3;
-o-column-count:3;
}
h1
{
height:60px;
line-height:60px;
text-align:center;
background-color:silver;
}
p
{
font-family:微软雅黑;
font-size:14px;
text-indent:28px;
}
</style>
</head>
<body>
<h1>匆匆</h1>
<p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时 候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢——如今又到了哪里呢？</p>
<p>……</p>
<p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸的回去罢？但不能平的，为什么偏要白白走这一遭啊？</p>
<p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p>
</body>
</html>
column-width属性在CSS3的多列布局中，我们可以使用column-width属性定义多列布局中每一列的宽度。
语法：
column-width：auto/长度值;
说明：
column-width有2个属性值：1个是auto，另外1个是长度值。
属性值 说明
auto 默认值，根据column-count属性值自动分配宽度
长度值 可以为px、em或者百分比等
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>定义列宽column-width属性</title>
<style type="text/css">
body
{
width:400px;
padding:10px;
border:1px solid silver;
-webkit-column-width:150px;
}
h1
{
height:60px;
line-height:60px;
text-align:center;
background-color:silver;
}
p
{
font-family:微软雅黑;
font-size:14px;
text-indent:28px;
}
</style>
</head>
<body>
<h1>匆匆</h1>
<p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时 候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢——如今又到了哪里呢？</p>
<p>我不知道他们给了我多少日子，但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从我手中溜去，像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。</p>
<p>……</p>
<p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸的回去罢？但不能平的，为什么偏要白白走这一遭啊？</p>
<p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p>
</body>
</html>
这里使用“width:400px”限定了body宽度为400px，然后使用“column-width:150px;”定义列宽为150px，这样body就会自动根据容器宽度、列宽以及内容多少来计算列数。大家可以试着在上面在线测试中改变column-width属性值，然后再看看实际效果。
column-gap属性在CSS3多列布局中，我们可以使用column-gap属性定义列与列之间的间距（列间距）。
语法：
column-gap：取值;
说明：
column-gap有2个属性值：一个是normal，另外一个是长度值。
column-gap属性取值
属性值 说明
normal 浏览器默认的长度值
长度值 可以为px、em或者百分比等
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>列间距column-gap属性</title>
<style type="text/css">
body
{
width:400px;
padding:10px;
border:1px solid silver;
-webkit-column-count:2;
-webkit-column-gap:20px; /*定义列间距为20px*/
}
h1
{
height:60px;
line-height:60px;
text-align:center;
background-color:silver;
}
p
{
font-family:微软雅黑;
font-size:14px;
text-indent:28px;
background-color:#F1F1F1;
}
</style>
</head>
<body>
<h1>匆匆</h1>
<p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时 候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢——如今又到了哪里呢？</p>
<p>我不知道他们给了我多少日子，但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从我手中溜去，像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。</p>
<p>……</p>
<p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸的回去罢？但不能平的，为什么偏要白白走这一遭啊？</p>
<p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p>
</body>
</html>
column-rule属性在CSS3的多列布局中，我们可以使用column-rule属性来定义列与列之间的边框样式，其中边框样式包括：宽度、颜色和样式。
语法：
column-rule：边框宽度 边框样式 边框颜色;
说明：
column-rule属性类是一个复合属性，由3个子属性组成：
（1）column-rule-width：设置边框的宽度；
（2）column-rule-style：设置边框的样式；
（3）column-rule-color：设置边框的颜色；
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>列边框column-rule属性</title>
<style type="text/css">
body
{
width:400px;
padding:10px;
border:1px solid silver;
-webkit-column-count:2;
-webkit-column-gap:20px;
-webkit-column-rule:1px dashed red;
}
h1
{
height:60px;
line-height:60px;
text-align:center;
background-color:silver;
}
p
{
font-family:微软雅黑;
font-size:14px;
text-indent:28px;
background-color:#F1F1F1;
}
</style>
</head>
<body>
<h1>匆匆</h1>
<p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时 候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢——如今又到了哪里呢？</p>
<p>我不知道他们给了我多少日子，但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从我手中溜去，像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。</p>
<p>……</p>
<p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸的回去罢？但不能平的，为什么偏要白白走这一遭啊？</p>
<p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p>
</body>
</html>
column-span属性语法：
column-span：取值;
说明：
column-span属性取值
属性值 说明
none 表示元素不跨越任何列（默认值）
all 表示元素跨越所有列，跟none值相反
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>跨列column-span属性</title>
<style type="text/css">
body
{
width:400px;
padding:10px;
border:1px solid silver;
-webkit-column-count:2;
-webkit-column-gap:20px;
-webkit-column-rule:1px dashed red;
}
h1
{
height:60px;
line-height:60px;
text-align:center;
background-color:silver;
-webkit-column-span:all;
}
p
{
font-family:微软雅黑;
font-size:14px;
text-indent:28px;
background-color:#F1F1F1;
}
</style>
</head>
<body>
<h1>匆匆</h1>
<p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时 候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢——如今又到了哪里呢？</p>
<p>我不知道他们给了我多少日子，但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从我手中溜去，像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。</p>
<p>……</p>
<p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸的回去罢？但不能平的，为什么偏要白白走这一遭啊？</p>
<p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p>
</body>
</html>
CSS3弹性盒子模型属性
属性 说明
box-orient 定义盒子的方向
box-direction 定义盒子的顺序
box-ordinal-group 定义盒子的位置
box-flex 定义盒子的弹性空间
box-pack 定义盒子水平对齐方式
box-align 定义盒子垂直对齐方式
box-lines 定义盒子溢出管理
注意，在你使用弹性盒子模型之前，你必须先把父元素display属性设置为box或inline-box后，该元素才具有弹性盒子模型。
box-orient属性在CSS3弹性盒子模型中，我们可以使用box-orient属性定义弹性盒子内部中“子元素”的排列方向。也就是盒子内部的子元素是横着排，还是竖着走。
语法：
box-orient：取值;
说明：
box-orient属性取值
属性值 说明
horizontal 弹性盒子“从左到右”在一条水平线上显示它的“子元素”
vertical 弹性盒子“从上到下”在一条垂直线上显示它的“子元素”
inline-axis 弹性盒子“沿着内联轴”显示它的“子元素”（默认值）
block-axis 弹性盒子“沿着块轴”显示它的“子元素”
注意：在使用之前，用户必须先把父元素的display属性设置为box或者inline-box，弹性盒子模型才会生效。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-orient属性</title>
<style type="text/css">
body
{
display:-webkit-box; /*定义元素为盒子显示，注意书写*/
-webkit-box-orient:horizontal; /*定义盒子元素内的元素从左到右流动显示*/
}
div{height:100px;}
#box1{background:red;}
#box2{background:blue;}
#box3{background:yellow;}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
<div id="box3">盒子3</div>
</body>
</html>
分析：
在CSS2.1中，HTML文档流的方向为“从上到下”，但是使用弹性盒模型之后，我们可以重新定义文档流的方向为“从左到右”。如果要开启弹性盒子模型，我们必须要设置父元素的display属性值为box（或inline-box）才行。
在传统布局方式下，如果定义并列显示的三个栏目块显示为行内块状（display:inline-block;）或者内联元素（display:inline;），则也可以实现相同的设计效果，但是显示技术却完全不同。
“display:-webkit-box;”兼容webkit内核浏览器，如果是moz内核浏览器，则需要写成“display:-moz-box;”。注意是“display: -moz-box;”，而不是“-moz-display: box;”。
这个例子中，弹性盒子内部的“子元素”的宽度是由内容撑开的。如果没有内容，则“子元素”不会有宽度。当然，我们也可以给“子元素”定义一定的宽度。
盒子的布局顺序box-direction属性
在CSS3弹性盒子模型中，我们可以使用box-direction属性来设置弹性盒子内部中“子元素”的排列顺序。
语法：
box-direction：取值;
说明：
属性值 说明
normal 正向显示（默认值）
reverse 反向显示
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-direction属性</title>
<style type="text/css">
body
{
display:-webkit-box;
-webkit-box-orient:horizontal; /*定义盒子元素内的元素从左到右流动显示*/
-webkit-box-direction:reverse; /*定义盒子元素内的元素反向显示*/
}
div{height:100px;line-height:100px;}
#box1{background:red;}
#box2{background:blue;}
#box3{background:yellow;}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
<div id="box3">盒子3</div>
</body>
</html>
分析：
这里使用“box-direction:reverse;”定义弹性盒子内部“子元素”排列顺序为“反向显示”。
box-ordinal-group属性box-direction属性可以设置弹性盒子内部“子元素”的排列顺序。在CSS3弹性盒子模型中，我们还可以使用box-ordinal-group属性来设置每个“子元素”在弹性盒子中的“准确”显示位置。
语法：
box-ordinal-group:整数;
说明：
box-ordinal-group属性取值是一个自然数，从1开始，用来设置子元素的位置序号。子元素的分布将根据这个属性值从小到大进行排列。在默认情况下，子元素将根据元素的位置进行排列。
注意，对于没有指定box-ordinal-group属性值的子元素，则该子元素的序号默认都为1。并且序号相同的子元素将按照它们在HTML文档中加载的顺序进行排列。
我们先看个例子，再来回顾一下这些知识点：
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-ordinal-group属性</title>
<style type="text/css">
body
{
display:-webkit-box;
-webkit-box-orient:horizontal; /*定义盒子元素内的元素从左到右流动显示*/
}
div{height:100px;line-height:100px;}
#box1
{
background:red;
-webkit-box-ordinal-group:2;
}
#box2
{
background:blue;
-webkit-box-ordinal-group:3;
}
#box3
{
background:yellow;
-webkit-box-ordinal-group:1;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
<div id="box3">盒子3</div>
</body>
</html>
分析：
从这个例子我们可以看出，使用box-ordinal-group属性可以非常准确地控制弹性盒子内部“子元素”的具体位置。
box-flex属性在CSS3弹性盒子模型中，我们可以使用box-flex属性来定义弹性盒子内部的子元素是否具有弹性空间。如果子元素具有弹性空间，当弹性盒子（父元素）的尺寸放大或缩小的时候，具有弹性空间的子元素的尺寸也会放大或缩小。每当弹性盒子有额外的空间时，具有弹性空间的子元素也会扩大自身大小来填补这一空间。
语法：
box-flex:取值;
说明：
box-flex属性取值是一个整数或者小数，不可为负数，默认值为0。
当盒子中包含多个定义了box-flex属性的子元素时，浏览器将会把这些子元素的box-flex属性值相加，然后根据它们各自的值占总值的比列来分配盒子剩余的空间。
注意，box-flex属性只有在弹性盒子确定了宽度或高度才有效。也就是说必须要先为父元素定义width或者height属性值。
使用弹性空间设置，使得弹性盒子内部元素的总宽度和总高度，始终等于弹性盒子的宽度与高度。不过只有当弹性盒子具有确定的宽度或高度时，子元素的弹性空间才生效。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-flex属性</title>
<style type="text/css">
body
{
display:-webkit-box;
-webkit-box-orient:horizontal; /*定义盒子元素内的元素从左到右流动显示*/
width:200px;
height:150px;
}
#box1
{
background:red;
-webkit-box-flex:1.0;
}
#box2
{
background:blue;
-webkit-box-flex:2.0;
}
#box3
{
background:orange;
-webkit-box-flex:1.0;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
分析：
这里使用“box-orient:horizontal;”定义弹性盒子内部子元素水平排列，并且给弹性盒子指定了宽度为200px。之后我们只需要使用box-flex属性给每一个子元素指定一个值，浏览器就会自动计算每个子元素所占的比例，自动划分宽度。这么点数学问题，就不在这里探讨了。
box-pack属性与box-align属性当弹性元素与非弹性元素混合排版时，有可能会出现所有子元素的尺寸大于或小于盒子的尺寸，从而出现盒子空间不足或者富余的情况。这时就需要一种方法来管理盒子的空间。如果子元素的总尺寸小于盒子的尺寸，则可以使用box-align和box-pack属性进行管理。
CSS3新增的box-pack属性和box-align属性，分别用于定义盒元素内部“子元素”的水平方向和垂直方向上的富余空间管理方式。这些对齐方式，对盒元素内部的文字、图形以及子元素都是有效的。
一、水平对齐box-pack属性
box-pack属性可以在水平方向上对盒子的富余空间进行管理。
语法：
box-pack:取值;
说明：
box-pack属性取值
属性值 说明
start 所有子元素都显示在盒子的左侧，富余的空间显示在盒子的右侧
end 所有子元素都显示在盒子的右侧，富余的空间显示在盒子的左侧
justify 富余的空间在子元素之间平均分配。在第一个子元素之前和最后一个字元素之后不分配空间
center 富余的空间在盒子的两侧平均分配
二、垂直对象box-align属性
box-align属性可以在垂直方向上对盒子的富余空间进行管理。
语法：
box-align:取值;
说明：
box-align属性取值
属性值 说明
start 所有子元素沿着盒子的上边缘排列，都显示在盒子的上部，富余的空间显示在盒子的底部
end 所有子元素沿着盒子的下边缘排列，都显示在盒子的底部，富余的空间显示在盒子的上部
center 富余的空间在盒子的上下两侧平均分配，即上面一半，下面一半
baseline 所有盒子沿着它们的基线排列，富余的空间可前可后显示
stretch 每个子元素的高度被调整到适合盒子的高度显示
三、实际应用
在CSS2中，如果想要让文字垂直居中，往往都是设置height属性值等于line-height属性值 ，不过学习了这一节，我们只要让div元素使用box-align属性（排列方向默认为horizontal），文字就可以垂直居中了。
举例1：文字自适应居中（包括垂直居中和水平居中）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>盒子内部对齐box-pack属性与box-align属性</title>
<style type="text/css">
div
{
width:200px;
height:160px;
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
background-color:pink;
}
</style>
</head>
<body>
<div>绿叶学习网</div>
</body>
</html>
分析：
如果想要实现“无论元素高度如何改变，文字都能垂直居中”的自适应高度的话，假如我们使用“height属性值等于line-height属性值”的方法，就不可能实现了。但是使用box-pack和box-align属性却能够轻松实现。
大家可以在“在线代码测试”中自行修改div元素高度，会发现：无论高度如何变化，文字都能垂直居中。
上面这种方法，不仅可以实现单行文字居中，还可以实现多行文字居中，大家可以尝试一下！
举例2：图片自适应居中（包括垂直居中和水平居中）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>盒子内部对齐box-pack属性与box-align属性</title>
<style type="text/css">
#control
{
margin-bottom:10px;
}
#view
{
width:160px;
height:100px;
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align:center;
-webkit-box-pack:center;
border:1px solid silver;
}
</style>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#range_width").change(function () {
var num = $(this).val();
$("#value_width").text(num + "px");
$("#view").css("width", num + "px");
});
$("#range_height").change(function () {
var num = $(this).val();
$("#value_height").text(num + "px");
$("#view").css("height", num + "px");
});
})
</script>
</head>
<body>
<div id="control">
宽度：<input id="range_width" type="range" min="160" max="320" value="160"/><span id="value_width">160px</span><br />
高度：<input id="range_height" type="range" min="100" max="240" value="100"/><span id="value_height">100px</span>
</div>
<div id="view"><img src="../App_images/lesson/run_css3/css3.png" alt=""/></div>
</body>
</html>
分析：
其实图片的自适应居中，跟文字的自适应居中是一样的。我们只需要使用“display:box”定义外层元素为弹性盒子模型，然后使用“box-pack:center;”和“box-align:center;”即可。
以后凡是遇到自适应居中问题，我们都可以尝试使用以上方法来解决，非常好的一个方法。其实，对于box-pack属性和box-align属性，基本掌握center这个属性值就行了，其他属性值用得不多，因此不在此啰嗦讲解。如果你想要深入了解，请自行找度娘。