内边距

标签、标签、标签、标签等)的浮动布局。浮动也就是通常所说的标签对象浮动居左(float： left)和浮动居右(float:right)。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的“普通流”中，所以文档的“普通流”中的块框表现得就像浮动框不存在一样。首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是通常所说的“流”。CSS浮动效果示例如图525所示。图525CSS浮动效果(1) 可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。注意，以上这些理论，是指标准流中的div。显然标准流已经无法满足需求，这就要用到浮动。浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。例如，假设图525中的div2浮动，那么它将脱离标准流，但div1、div3、div4仍然在标准流中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。具体效果如图526所示。图526CSS浮动效果(2) 从图526中可以看出，由于将div2设置为浮动，因此它不再属于标准流，div3自动上移顶替div2的位置，div1、div3、div4依次排列，成为一个新的流。又因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了。这里div2用的是左浮动，可以理解为漂浮起来后靠左排列，右浮动当然就是靠右排列。这里的靠左、靠右是说靠页面的左、右边缘。如果对div2使用右浮动，那么具体效果如图527所示。图527CSS浮动效果(3) 此时div2靠页面右边缘排列，不再遮挡div3，读者可以清晰地看到上面所讲的div1、div3、div4组成的流。到目前为止，我们只浮动了一个div元素。如果浮动多个div元素呢？下面将div2和div3都加上左浮动，效果如图528所示。图528CSS浮动效果(4) 同理，由于div2、div3浮动，它们不再属于标准流，因此div4会自动上移，与div1组成一个“新”标准流，而浮动是漂浮在标准流之上，因此div2又挡住了div4。假如某个div元素A是浮动的，如果A元素的上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素的上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说，A的顶部总是和上一个元素的底部对齐。div的顺序是HTML代码中标签的顺序决定的。靠近页面边缘的一端是前，远离页面边缘的一端是后。元素浮动之后，周围的元素会重新排列，为了避免这种情况，可使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。清除浮动的关键字是clear，定义如下： clear : none | left | right | both 其中， none——默认值。允许两边都可以有浮动对象。 left——不允许左边有浮动对象。 right——不允许右边有浮动对象。 both——不允许有浮动对象。通过Chrome查看该HTML，结果如图529所示。图529CSS清除浮动示例 4) 可见与溢出 (1) 设置元素的可见性。在CSS中，有两个属性可以控制元素的显示和隐藏，就是display和visibility属性。display属性确定一个元素是否应该显示在页面上，以及如何显示。取值有none、block、inline。当设置元素的display为none时，元素在页面隐藏起来，不仅看不见元素，而且元素会退出当前的页面布局，不占用任何空间。当设置元素的display为block(块级)时，可以强制将XHTML中的内嵌元素设置成为块级元素，从而引起后续对象换行。当设置元素的display为inline(内嵌级)时，CSS会强制将XHTML中的块级元素变成内嵌元素。 visibility属性控制定位元素是否可见。取值包括visible(可见)、hidden(隐藏)和inherit(继承)，默认值为inherit(即继承父级元素的显示属性)。 visibility属性与display属性的不同之处在于：当隐藏元素时，visibility属性定义的元素仍然为保留原有的显示空间。示例代码如下所示：设置元素可见性 Welcome 图530元素可见性示例通过Chrome查看该HTML，效果如图530所示。 (2) 处理溢出：如果一个元素的大小设置得太小，以致不能包含其内容，那么可以用overflow来指定其内容不能填充时候该如何处理。 overflow的取值为visible、hidden、scroll、auto，其中，visible是默认值，表示不裁剪内容，也不添加滚动条，强制显示元素内容。 scroll表示裁剪内容，同时提供滚动条。 hidden表示裁剪内容，而且不显示内容，而且不显示超出对象尺寸的内容。 auto表示只有在必要的时候才裁剪内容并添加滚动条。注意：如果要使用overflow属性，那么该元素的position属性必须指定为绝对定位(absolute)。示例代码如下所示：处理溢出效果
shenjsafeiofjwalkrjeaoisejhiowjklgjewoijglksjfsalfjewiofjlskadfjsjfe ilsakfjeigjkhfuwfkjhguwejkfhusejkfhuegkjiekjsfiekjiekjig
图531处理溢出效果通过Chrome查看该HTML，效果如图531所示。 (3) 指定裁剪区域。clip属性可以确定定位对象的裁剪区域，其取值为rect(top right bottom left)/auto，其中top、right、bottom 和 left用于指定上、右、下、左4个方向上的裁剪长度，取值为长度值或auto。如果任意一边使用auto，则相当于该边没有进行裁剪。示例代码如下所示：
clip 属性剪切了一幅图像：

通过Chrome查看该HTML，效果如图532所示。图532元素裁剪效果 (4) 处理元素重叠。使用top和left属性可能会造成元素相互重叠在一起，此时可以使用zindex属性。zindex属性用来控制重叠元素的显示顺序，值较大的元素将覆盖值较小的元素。如果值为-1，则表示元素将置于页面默认文本的后边，这对于设置背景图案是很有用的。注意： zindex属性在设置了position并取值为 absolute 或者 relative 时有用。示例代码如下所示：元素重叠
1

2

3
通过IE查看该HTML，效果如图533所示。图533元素重叠效果 3. CSS 定位 CSS有3种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来的。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(line box)，行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。 1) position属性 position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在“正常流”中的默认位置偏移。目前几乎所有主流的浏览器都支持position属性("inherit"除外)，如表54所示为position属性。表54position属性值描述 absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left"、"top"、"right"以及"bottom"属性进行规定 fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left"、"top"、"right"以及"bottom"属性进行规定 relative生成相对定位的元素，相对于其正常位置进行定位。因此，"left： 20"会向元素的左边位置添加20像素 static默认值。没有定位，元素出现在正常的流中(忽略top、bottom、left、right或者zindex声明) inherit规定应该从父元素继承 position 属性的值 (1) absolute(绝对定位)。 absolute是生成绝对定位的元素，脱离了文本流(即在文档中已经不占据位置)，参照浏览器的左上角通过top、right、bottom、left(TRBL) 定位。可以选取具有定位的父级对象(下面将介绍relative与absolute的结合使用)或者body坐标原点进行定位，也可以通过zindex进行层次分级。absolute在没有设定TRBL值时是以父级对象的坐标作为原点的，设定TRBL值后则以浏览器的左上角作为原点。示例代码如下所示： position:absolute定位

position:absolute定位测试

图534绝对定位效果通过IE查看该HTML，效果如图534所示。 (2) relative（相对定位）。 relative是相对的意思，顾名思义，就是相对于元素本身在文档中应该出现的位置来移动这个元素，可以通过TRBL来移动元素的位置，实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。示例代码如下所示： position:relative定位

position:relative定位测试

图535相对定位通过IE查看该HTML，效果如图535所示。 (3) relative与absolute的结合使用。在网页设计时经常会用到浮动来对页面进行布局，但是浮动所带来的不确定因素很多(例如，IE浏览器的兼容问题)。相对来说，在有些布局中定位使用会更加简单、快捷、兼容性更好(relative与absolute相结合来使用)。示例代码如下所示：

首页

关于我们

团队文化

公司动态

资讯参考

联系我们

通过IE查看该HTML，结果如图536所示。图536position定位综合应用 (4) fixed(固定定位)。其位置永远相对浏览器的位置来计算。即使浏览器内容向下滚动，元素位置也能相对浏览器保持不变。示例代码如下所示： position:fixed定位
回到顶部>

测试1

测试2

测试3

测试4

测试5

测试6

测试7

测试8

测试9

测试0
通过IE查看该HTML，效果如图537所示。图537fixed定位 (5) static(静态定位)。就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定。 2) zindex属性 zindex属性指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 zindex 属性值。CSS样式表中zindex属性的使用方法代码如下所示： .box{position:absolute; left:0px; top:0px;z-index:-1} 需要注意的是：  zindex仅对定位元素有效(如position： relative＼absolute＼float)。  zindex只可比较同级元素。  zindex的作用域：假设A和B两个元素都设置了定位(相对定位，绝对定位或一个相对定位、另一个绝对定位都可以)，且是同级元素，样式为： boxA{zindex:4}、boxB{zindex:5}。元素B的层级要高于元素A，在此需要指出的是，A元素下面的子元素的层级也同样都低于B元素下面的子元素，即使将A元素下面的子元素设为zindex:9999；同理，元素B下面的子元素，即使是设为zindex:1，它照样比元素A的层级要高。  zindex属性不会作用于窗口控件，如select对象。  在父元素的子元素中设置zindex的值，可以改变子元素之间的层叠关系。  子元素的zindex值不管是高于父元素还是低于父元素，只要它们的zindex值是大于或等于0的数，它们就会显示在父元素之上，即压在父元素上。只要它们的值是小于0的数，就显示在父元素之下。表55为zindex的属性值表。表55zindex的属性值值描述 Auto默认。堆叠顺序与父元素相等 Number设置元素的堆叠顺序 Inherit规定应该从父元素继承 zindex 属性的值示例代码如下所示： z-index属性
This is a heading

因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。
通过IE查看该HTML，效果如图538所示。图538zindex 属性示例 4. 页面布局所谓页面布局，就是将网页中的各个版块有效组织并放置在合适的位置。页面布局一般分为以下几种：  表格布局。  框架布局。  DIV+CSS布局模式。其中表格布局和DIV+CSS布局是目前最常用的。 1) 表格布局在网页设计中，用表格显示数据只是表格功能的一部分，现在表格在网页中更多是用于网页的布局，其优势在于可以有效地定位网页中不同的元素，结构清晰。为了方便设计者使用表格进行页面布局，Dreamweaver8提供了“布局”模式。在“布局”模式中，可以使用表格作为基础布局结构来设计网页。使用表格布局一般要遵循以下原则： (1) 不要把整个网页当成一个大表格，尽可能使用多个表格进行分块。因为一个大表格的内容要全部加载后才会显示。这样会降低页面的响应速度和效率。此外，单元格在调整时不够方便，在调整局部的单元格时，往往会对其他的单元格产生联动的效果，违背了调整的初衷。最常见的是将网页分为上、中、下3部分，上部分用于处理网页的LOGO、BANNER、MENU等内容；中部分处理页面的主要内容即展现的信息；下部分用于放置有关的声明、版权信息等。对于这3部分的内容可以使用3个或3个以上的表格进行处理。 (2) 使用嵌套表格。嵌套表格就是在一个单元格内插入另一个表格。放置嵌套表格的单元格，通常设置其垂直对齐方式为“顶端对齐”。嵌套表格作为相对独立的表格，控制十分方便，这也是使用表格布局的常用方法，但是一般不宜超过3层，表格嵌套过多会影响浏览器的响应速度，并且不便于后期维护。 (3) 表格的边框。当用表格布局时，表格的边框宽度一般设置为0。最外层表格宽度一般使用固定的像素值，嵌套的表格的宽度则使用百分比来设定，如果使用像素值，则需要计算结果绝对精确，因此不提倡使用像素值。示例代码如下所示：表格布局

用户名：______ 密码：______ 帮助

浣溪沙

谁念西风独自凉？

萧萧黄叶闭疏窗,

沉思往事立残阳。

被酒莫惊春睡重，

赌书消得泼茶香，

当时只道是寻常。

我爱的纳兰容若

采桑子

明月多情应笑我，

笑我如今。

辜负春心，

独自闲行独自吟。

近来怕说当时事，

结遍兰襟。

月浅灯深，

梦里云归何处寻？

版权所有，翻录必究 ©1999-2014

通过Chrome查看该HTML，效果如图539所示。图539表格布局 2) 框架布局框架是另一种常用的网页布局排版工具。框架布局就是把浏览器窗口划分为多个区域，每个区域都可以分别显示不同的网页。使用框架最常见的用途就是导航，在使用了框架以后，用户的浏览器不需要为每个页面重新加载与导航相关的图形。而且每个框架可以独立设计，具有独立的功能和作用，可以实现一个浏览器窗口显示多个网页的目的。但是有的浏览器不支持框架，因此，在使用框设计网页要设计noframes部分，为那些不能查看框架的用户提供支持。示例代码如下所示：框架布局 top.html top.html 欢迎来到动感点播台 left.html left.html 青花瓷

 千里之外

 迷迭香

 爱我别走

 可爱女人

 迷迭香

 爱我别走

 可爱女人

 迷迭香

 爱我别走

 可爱女人

 迷迭香

 爱我别走

 可爱女人

right.html right.html
素胚勾勒出青花，笔锋浓转淡

冉冉檀香透过窗，情似我了然
通过Chrome查看该HTML，框架布局效果如图540所示。图540框架布局使用框架布局的优点是：支持滚动条，方便导航，节省页面下载时间等；缺点是：兼容性不好，保存时不方便，应用范围有限等。框架布局比较适合应用于小型商业网站、论坛、后台管理系统等方面。 3) DIV+CSS布局一个标准的Web网页由结构、外观和行为3部分组成，各部分的含义如下所示：  结构——用来对网页中的信息进行整理与分类，常用的技术有HTML、XHTML和XML。  外观——用于对已经被结构化的信息进行外观上的修饰，包括颜色、字体等，常用技术为CSS。  行为——是指对整个文档内部的一个模型进行定义及交互行为的编写，常用技术为JavaScript。网页设计的核心目的：实现网页的结构和外观的分离。通常网页设计人员在设计网页之前，总是先考虑怎么设计，考虑页面中的图片、字体、颜色甚至是布局方案。然后通过其他的工具(如PhotoShop)画出来，最后用HTML将所有的设计表现在页面上。如果使用DIV+CSS对页面进行布局，那么可先不考虑外观，首要的是将页面内容的语义或结构确定下来。使用DIV+CSS布局，外观不是最重要的，一个结构良好的HTML页面可以通过CSS以任意外观表现出来。因此引入CSS布局的目的就是为了实现真正意义上的结构和外观的分离，这也是DIV+CSS布局最大的特色。一个完整的网页通常包含以下几个部分：标志和站点名称、主页面内容、站点导航、子菜单、搜索区域、功能区、页脚(版权和法律声明)。有了这些结构就可以根据其在页面中的地位形成一个整体的布局思路：首先将这些结构放置在一个大框内，这个大框作为页面的父框，在其内分成头部、主体、底部3个部分，然后将上述的几个部分按作用和地位分配给头、体、脚。CSS布局的整体思路如图541所示。图541CSS布局的整体思路图541中的模块显示了各部分之间的包含关系，将各个部分都定义成DIV，很容易就能确定各个DIV的嵌套关系。示例代码如下所示：

来天涯，与12596246位天涯人共同演绎你的网络人生

目前在线：156348

用户名

密码

自动登录

为了确保你的信息安全，请不要在网吧或者公共机房选择此项!
如果今后要取消此选项，只需单击网站顶部的 "退出"链接即可。

浏览进入

用户名

密码

正在自动登录...

通过IE查看该HTML，效果如图542所示。图542CSS+DIV布局通过对天涯网页的DIV布局分析可知，DIV布局的优点是网页代码精简、提高页面下载速度、表现和内容相分离等；缺点是过于灵活，比较难控制。因此DIV布局比较适合应用于复杂的不规则页面以及业务种类较多的大型商业网站。 5.1.3案例实现 1. 案例分析根据图51分析得出如图543所示结果。图543案例分析 2. 代码实现 1) HTML内容

上帝的恩赐中国清酒的米水传奇

冰酒 ICEWINE >

红酒 RED WINE >

白葡萄酒 WHITE WINE >

甜酒 SWEET WINE >

香槟 CHAMPAGNE >

日本清酒原装进口洋酒菊正宗清酒

日本清酒原装进口洋酒菊正宗清酒

日本清酒原装进口洋酒菊正宗清酒

日本清酒原装进口洋酒菊正宗清酒

日本清酒原装进口洋酒菊正宗清酒

2) CSS页面 .con1 { float: left; width: 350px; height: 300px; border: 1px solid #767676; margin-left: 36px; margin-bottom: 40px; position: relative; } .con1>ul{ width: 300px; height: 250px; margin-left: 25px; margin-top: 25px; } .con1>ul>li{ width: 100%; height: 50px; line-height: 50px; background-image: url(../images/con-listimg.png); background-repeat: no-repeat; background-position: left; text-indent: 2em; } .con1>ul>li>a{ position: relative; display: block; font-family: "华文彩云"; font-size: 18px; color: #000000; } .con1>ul>li>a>span{ position: absolute; right: 30px; font-family: "华文彩云"; font-size: 18px; } .con1>ul>li>a:hover{ text-decoration: underline; } .con-img { position: absolute; top: 20px; right: 30px; } .con-ht { position: absolute; bottom: 0px; width: 100%; height: 35px; background-color:rgba(0,0,0,0.4); display: block; text-align: center; line-height: 35px; color: white; } 3. 运行效果运行结果如图544所示。图544运行效果 5.2CSS3动画 5.2.1案例描述图545动画案例很多网页也会有一些动画效果，例如淡入淡出、轮播图片进入进出的方式。下面将学习如何定理如下动画效果：该方块向右移动后如此变成黄色，接着下移动变成蓝色，然后向左移动变成绿色，最后向上移动变成红色，如此循环。界面静态效果如图545所示。 5.2.2知识引入 1. 变形在CSS3中，可以使用transform属性来实现文字或图像的各种变形效果，如位移、缩放、旋转、倾斜等，表56为transform属性表。表56transform属性及方法方法或属性说明 translate()位移 scale()缩放 rotate()旋转 skew()倾斜 transformorigin中心原点 1) 位移translate() 在CSS3中，可以使用translate()方法将元素沿着水平方向(X轴)和垂直方向(Y轴)移动。位移translate()方法分为3种情况：  translateX(x)——元素仅在水平方向移动(X轴移动)。  translateY(y)——元素仅在垂直方向移动(Y轴移动)。  translate(x,y)——元素在水平方向和垂直方向同时移动(X轴和Y轴同时移动)。 (1) translateX(x)方法。语法如下所示： transform:translateX(x); 在CSS3中，所有变形方法都属于transform属性，因此所有关于变形的方法前面都要加上“transform： ”，以表示“变形”处理。这一点大家一定要记住。 x表示元素在水平方向(X轴)的移动距离，单位为px、em或百分比等。当x为正时，表示元素在水平方向向右移动(X轴正方向)；当x为负时，表示元素在水平方向向左移动(X轴负方向)。示例代码如下所示： CSS3位移translate()方法

通过IE查看该HTML，效果如图546所示，“transform： translateX(20px);”表示元素在水平方向向左位移20px。图546translateX(x)效果 (2) translateY(y)方法。语法如下所示： tranform:translateY(y) y表示元素在垂直方向(Y轴)的移动距离，单位为px、em或百分比等。当y为正时，表示元素在垂直方向向下移动；当y为负时，表示元素在垂直方向向上移动。示例代码如下所示： CSS3位移translate()方法

通过IE查看该HTML，效果如图547所示，“transform： translateY(20px);”表示元素在垂直方向向下位移20px。图547translateY(y)方法 (3) translate(x,y)。语法如下所示： tranform:translate(x,y) x表示元素在水平方向(X轴)的移动距离，y表示元素在垂直方向(Y轴)的移动距离。注意，y是一个可选参数，如果没有设置y值，则表示元素仅仅沿着X轴正方向移动。示例代码如下所示： CSS3位移translate()方法

通过IE查看该HTML，效果如图548所示，“transform： translate(20px,40px);”表示元素在垂直方向向下位移40px，在水平方向向右移动20px。图548translate(x,y)方法 2) 缩放scale() 缩放是指“缩小”和“放大”。在CSS3中，可以使用scale()方法来将元素根据中心原点进行缩放。与translate()方法一样，scale()方法也有3种情况：  scaleX(x)——元素仅水平方向缩放(X轴缩放)。  scaleY(y)——元素仅垂直方向缩放(Y轴缩放)。  scale(x,y)——元素水平方向和垂直方向同时缩放(X轴和Y轴同时缩放)。 (1) scaleX(x)。语法如下所示： transform:scaleX(x) x表示元素沿着水平方向(X轴)缩放的倍数，如果大于1则代表放大；如果小于1则代表缩小。示例代码如下所示： CSS3缩放scale()方法

通过IE查看该HTML，(x)效果如图549所示，元素沿着X轴方向放大了1.5倍(两个方向同时延伸，整体放大1.5倍)。图549scaleX(x) (2) scaleY(y)。语法如下所示： transform:scaleY(y) y表示元素沿着垂直方向(Y轴)缩放的倍数，如果大于1则代表放大；如果小于1则代表缩小。示例代码如下所示： CSS3缩放scale()方法

通过Chrome查看该HTML，效果如图550所示，元素沿着Y轴方向放大了1.5倍(两个方向同时延伸，整体放大1.5倍)。图550scaleY(y)效果 (3) scale(x,y)。语法如下所示： transform:scale(x,y) x表示元素沿着水平方向(X轴)缩放的倍数，y表示元素沿着垂直方向(Y轴)缩放的倍数。注意，y是一个可选参数，如果没有设置y值，则表示在X轴、Y轴两个方向的缩放倍数是一样的(同时放大相同倍数)。示例代码如下所示： CSS3缩放scale()方法

通过IE查看该HTML，效果如图551所示，元素沿着X轴方向放大了1.5倍，在Y轴方向放大了2倍。图551scale(x，y)效果 3) 旋转rotate() 在CSS3中，可以使用rotate()方法来将元素相对中心原点进行旋转。这里的旋转是二维的，不涉及三维空间的操作。语法如下所示： transform：rotate(度数); 度数是指元素相对中心原点进行旋转的度数，单位为deg。如果度数为正，则表示元素相对原点中心顺时针旋转；如果度数为负，则表示元素相对原点中心逆时针旋转。示例代码如下所示： CSS3旋转rotate()方法

顺时针旋转30°

通过IE查看该HTML，效果如图552所示，这里虚线框为原始位置，蓝色背景盒子为顺时针旋转30°后的效果。图552rotate()效果 4) 倾斜skew() 在CSS3中，可以使用skew()方法将元素倾斜显示。与translate()方法、scale()方法一样，skew()方法也有3种情况：  skewX(x)——使元素在水平方向倾斜(X轴倾斜)。  skewY(y)——使元素在垂直方向倾斜(Y轴倾斜)。  skew(x,y)——使元素在水平方向和垂直方向同时倾斜(X轴和Y轴同时倾斜),先按照skewX()方法倾斜，然后按照skewY()方法倾斜。 (1) skewX(x)方法。语法如下所示： transform:skewX(x); x表示元素在X轴倾斜的度数，单位为deg。如果度数为正，则表示元素沿水平方向(X轴)顺时针倾斜；如果度数为负，则表示元素沿水平方向(X轴)逆时针倾斜。示例代码如下所示： CSS3倾斜skew()方法

通过IE查看该HTML，效果如图553所示。图553skewX(x)效果 (2) skewY(y)方法。语法如下所示： transform:skewY(y); y表示元素在Y轴倾斜的度数，单位为deg。如果度数为正，则表示元素沿垂直方向(Y轴)顺时针倾斜；如果度数为负，则表示元素沿垂直方向(Y轴)逆时针倾斜。示例代码如下所示： CSS3倾斜skew()方法

通过IE查看该HTML，效果如图554所示。图554skewY(y)效果 (3) skew(x,y)方法。语法如下所示： transform:skew(x,y); 第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。示例代码如下所示： CSS3倾斜skew()方法

通过IE查看该HTML，效果如图555所示。图555skew(x,y)效果 5) 中心原点transformorigin 任何一个元素都有一个中心原点，默认情况下，元素的中心原点位于X轴和Y轴的50%处。默认情况下，CSS3变形进行的位移、缩放、旋转、倾斜都是以元素的中心原点进行变形。假如要使得元素进行位移、缩放、旋转、倾斜这些变形操作的中心原点不是原来元素的中心位置，那该怎么办呢？在CSS3中，可以通过transformorigin属性来改变元素变形时的中心原点位置。语法如下所示： transform-origin:取值; transformorigin属性取值有2种：一种是采用长度值，另外一种是使用关键字。长度值一般使用百分比作为单位，很少使用px、em等作为单位。不管transformorigin取值为长度值还是关键字，都需要设置水平方向和垂直方向的值。transformorigin属性取值跟背景位置backgroundposition属性取值相似，表57为transformorigin属性取值。表57transformorigin属性取值关键字百分比说明 top left0 0左上 top center50% 0靠上居中 top right100% 0右上 left center0 50%靠左居中 center center50% 50%正中 right center100% 50%靠右居中 bottom left0 100%左下 bottom center50% 100%靠下居中 bottom right100% 100%右下示例代码如下所示： CSS3中心原点transform-origin属性

通过IE查看该HTML，效果如图556所示，“transformorigin： right center;”使得CSS3变形的中心原点由“正中”变为“靠右居中”。图556transformorigin效果 2. 过渡在CSS3中，可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现动画效果。 CSS transform属性所实现的元素变形，呈现的仅仅是一个“结果”，而CSS transition呈现的是一种过渡“过程”，通俗地说，就是一种动画转换过程，如渐显、渐隐、动画快慢等。例如，绿叶学习网中很多地方都用到了CSS3过渡，当鼠标指针移动上去的时候，都会有一定的过渡效果。语法如下所示： transition:属性持续时间过渡方法延迟时间; transition属性是一个复合属性，主要包含4个子属性： (1) transitionproperty——对元素的哪一个属性进行操作。 (2) transitionduration——过渡的持续时间。 (3) transitiontimingfunction——过渡使用的方法(函数)。 (4) transitiondelay——可选属性，指定过渡开始出现的延迟时间。 1) 过渡属性transitionproperty 可以使用transitionproperty属性单独设定过渡动画所要操作的那个属性。语法如下所示： transition-property：取值; transitionproperty属性的取值是一个“CSS属性名”。示例代码如下所示： CSS3 transition-property属性
通过Chrome查看该HTML，效果如图557和图558所示。这里使用transitionproperty属性指定了过渡动画所操作的CSS属性是height。当鼠标指针移动到div元素上时，元素的高度会在0.5s内从50px过渡到100px。图557transitionproperty属性鼠标放置之前图558transitionproperty属性过渡之后 2) transitionduration属性在CSS3中，可以使用transitionduration属性单独设置过渡持续的时间。语法如下所示： transition-duration：时间; transitionduration属性取值是一个时间，单位为s(秒)，可以为小数，如0.5s。示例代码如下所示： CSS3过渡
通过Chrome查看该HTML，效果如图559和图560所示的当鼠标指针移动到div元素上面时，div元素的圆角半径在0.5秒内从0过渡到50px。图559transitionduration属性鼠标放置之前图560transitionduration过渡之后 3) 过渡方式transitiontimingfunction 在CSS3中可以使用transitiontimingfunction属性来定义过渡方式。“过渡方式”主要用来指定动画在过渡时间内的变化速率。语法如下所示： transition-function:取值; transitiontimingfunction属性取值共有5种，具体如图561所示。图561transitiontimingfunction属性取值示例代码如下所示： CSS3 transition-timing-function属性
linear

ease

ease-in

ease-out

ease-in-out
通过Chrome查看该HTML，效果如图562所示。图562transitiontimingfunction效果 4) 延迟时间transitiondelay 可以使用transitiondelay属性来设置动画开始的延迟时间。语法如下所示： transition-delay:时间; transitiondelay属性取值是一个时间，单位为s(秒)，可以为小数，如0.5s。 transitiondelay属性默认值为0，也就是说，当没有设置transitiondelay属性时，过渡动画就没有延迟时间。示例代码如下所示： CSS3 transition-delay属性
通过Chrome查看该HTML，效果如图563所示。“transitiondelay： 2s;”表示鼠标指针移动到div的那一瞬间开始计时，在计时开始之后还得延迟2s才会开始进行过渡动画，这就是所谓的“延迟时间”。然后，从鼠标指针移出div的一瞬间开始，过渡动画同样也会延迟2s才会开始恢复。图563transitiondelay效果 3. 动画在CSS3中，动画效果使用animation属性来实现。animation属性和transition属性功能是相同的，都是通过改变元素的“属性值”来实现动画效果的。但是这两者又有很大的区别： transition属性只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。animation属性则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。 1) @keyframes 使用animation属性定义CSS3动画需要两步： (1) 定义动画。 (2) 调用动画。在CSS3中，在使用动画之前，必须使用@keyframes规则定义动画。语法如下所示： @keyframes 动画名 { 0% { … } … 100% { } } 0%表示动画的开始，100%表示动画的结束。0%和100%是必需的，不过在一个@keyframes规则中可以由多个百分比构成，每一个百分比都可以定义自身的CSS样式，从而形成一系列的动画效果。示例代码如下所示： CSS3 @keyframes
通过Chrome查看该HTML，效果如图564所示。这里使用@keyframes规则定义了一个名为mycolor的动画，刚开始时背景颜色为红色，在0%~30%部分背景颜色从红色变为蓝色，然后在30%~60%部分背景颜色从蓝色变为黄色，最后在60%~100%部分背景颜色从蓝色变为绿色。动画执行完毕，背景颜色回归为红色(初始值)。图564@keyframes定义动画 2) animationname属性在CSS3中，使用@keyframes规则定义的动画并不会自动执行，还需要使用animationname属性来调用动画，之后动画才会生效。语法如下所示： animation-name：动画名; 注意，animationname 调用的动画名需要和@keyframes规则定义的动画名称完全一致(区分大小写)，如果不一致将不具有任何动画效果。为了浏览器兼容性，针对Chrome和Safari浏览器需要加上webkit前缀，而针对Firefox浏览器需要加上moz。示例代码如下所示： CSS3 animation-name属性
通过Chrome查看该HTML，效果如图565所示。这里使用@keyframes规则定义了两个动画： mycolor和mytransform。但是我们只使用animationname调用名为mytransform的动画。因此，名为mytransform的动画会生效，而名为mycolor的动画不会生效。图565animationname 调用动画在mytransform动画中，0%~50%的div元素borderradius属性值实现从0变成50px，然后在50%~100%的部分保持borderradius属性值不变，并且水平向右移动50px。 3) 持续时间animationduration 在CSS3中，可以使用animationduration属性来设置动画的持续时间，也就是完成从0%~100%所使用的总时间。animationduration属性与CSS3过渡中的transitionduration属性相似。语法如下所示： animation-duration:时间; animationduration属性取值是一个时间，单位为s(秒)，可以为小数，如0.5s。示例代码如下所示： CSS3 animation-duration属性

通过Chrome查看该HTML，效果如图566所示。这里设置#div1的元素动画持续时间为2s，而设置#div2的元素动画持续时间为4s。图566animationduration效果 4) 播放方式animationtimingfunction 在CSS3中，可以使用animationtimingfunction属性来设置动画的播放方式，“播放方式”主要用来指定动画在播放时间内的变化速率。语法如下所示： animation-timing-function：取值; animationtimingfunction属性取值跟transitiontimingfunction属性取值一样，共有5种，具体如图567所示。图567animationtimingfunction属性取值示例代码如下所示： CSS3 animation-timing-function属性
linear

ease

ease-in

ease-out

ease-in-out
通过Chrome查看该HTML，效果如图568所示。图568animationtimingfunction效果 5) 延迟时间animationdelay 在CSS3中，可以使用animationdelay属性来定义动画播放的延迟时间。语法如下所示： animation-delay:时间; animationdelay属性取值是一个时间，单位为s(秒)，可以为小数如0.5s。 animationdelay属性默认值为0，也就是说，当我们没有设置animationdelay属性时，CSS3动画就没有延迟时间。示例代码如下所示： CSS3 animation-delay属性

通过Chrome查看该HTML，效果如图569所示。这里使用animationdelay属性设置动画延迟时间为2s，也就是说，当页面打开之后延迟2s动画才开始播放。图569animationdelay 6) 播放次数animationiterationcount 在CSS3中，可以使用animationiterationcount属性来定义动画的播放次数。语法如下所示： animation-iteration-count：取值; animationiterationcount属性取值有两种： (1) 正整数。 (2) infinity。 animationiterationcount属性默认值为1。也就是说，在默认情况下，动画从开始到结束只播放一次。“animationiterationcount： n”表示动画播放n次，n为正整数。当animationiterationcount属性取值为infinite时，动画会无限次地循环播放。示例代码如下所示： CSS3 animation-iteration-count属性

通过Chrome查看该HTML，效果如图570所示。这里设置animationiterationcount属性值为infinite，然后动画会不断循环播放。图570animationiterationcount效果 7) 播放方向animationdirection 在CSS3中，可以使用animationdirection属性定义动画的播放方向。语法如下所示： animation-direction:取值; animationdirection属性取值如表58所示。表58animationdirection属性取值属性说明 normal每次循环都向正方向播放(默认值) reverse每次循环都向反方向播放 alternate播放次数是奇数时，动画向原方向播放；播放次数是偶数时，动画向反方向播放示例代码如下所示： CSS3 animation-direction属性

通过Chrome查看该HTML，效果如图571所示。这里设置动画播放沿着正方向播放(0%~100%)，小球从左到右滚动。图571animationdirection效果 8) 动画播放状态animationplaystate 在CSS3中，可以使用animationplaystate属性来定义动画的播放状态。语法如下所示： animation-play-state：取值; animationplaystate属性取值只有两个： running和paused。表59为animationplaystate属性取值。表59animationplaystate属性取值属性说明 running播放动画(默认值) paused暂停动画示例代码如下所示： CSS3 animation-play-state属性

通过Chrome查看该HTML，效果如图572所示的，当单击“暂停”按钮时，设置动画的animationplaystate属性值为"paused"；当单击“播放”按钮时，设置动画的animationplaystate属性值为"running"。这种效果就跟视频播放器中的“暂停”和“播放”的效果一样。图572animationplaystate效果 9) 时间外属性animationfillmode 在CSS3中，可以使用animationfillmode属性定义在动画开始之前和动画结束之后发生的事情。语法如下所示： animation-fill-mode:取值; animationfillmode属性取值如表510所示。表510animationfillmode属性取值属性说明 none动画完成最后一帧时会反转到初始帧处(默认值) forwards动画结束之后继续应用最后的关键帧位置续表属性说明 backwards会在向元素应用动画样式时迅速应用动画的初始帧 both元素动画同时具有forwards和backwards效果示例代码如下所示： CSS3 animation-fill-mode属性

通过Chrome查看该HTML，效果如图573所示。这里设置div4为 webkitanimationfillmode： both，使得其元素动画同时具有forwards和backwards效果，设置div2为“webkitanimationfillmode： forwards;”，使其动画结束之后继续应用最后的关键帧位置，设置div3为“webkitanimationfillmode： backwards;”，使其会在向元素应用动画样式时迅速应用动画的初始帧。图573animationfillmode效果 CSS动画 5.2.3案例实现 1. 案例分析对图545进行分析，结果如图574所示。图574动画分析图 2. 代码实现运行效果需动图，这里无法展示，需输入上述代码自行运行查看。本章小结本章的主要知识点如下：  盒模型由元素的内容、内边距、边框和外边距组成。  CSS中盒模型(Box Model)是分为两种：一种是W3C的标准模型，另一种是IE的传统模型。  float是CSS样式中的定位属性，用于设置标签对象的浮动布局。  display属性确定一个元素是否应该显示在页面上，以及如何显示。  overflow属性来指定其内容不能填充时候该如何处理。  CSS有3种基本的定位机制：普通流、浮动和绝对定位。  position属性规定元素的定位类型。  布局一般分为表格布局、框架布局和DIV+CSS布局模式。  表格布局的优点是：布局容易、快捷而且兼容性好。  表格布局的缺点是：改动不方便，彼此之间容易受影响，一旦需要调整工作量会很大。  框架由框架和框架集两部分组成。  框架是一种常用的网页布局排版工具。框架结构就是把浏览器窗口划分为多个区域，每个区域都可以分别显示不同的网页。  Web网页标准构成包括结构、外观和行为3部分。  用CSS布局外观不是最重要的，一个结构良好的HTML页面可以通过CSS以任何外观表现出来。  DIV布局的优点是网页代码精简、提高页面下载速度、表现和内容相分离等；缺点则是过于灵活，比较难控制。  CSS3动画效果共3个部分： CSS3变形、CSS3过渡、CSS3动画。  transform属性用于实现文字或图像的各种变形效果，如位移、缩放、旋转、倾斜等。  translate()方法将元素沿着水平方向(X轴)和垂直方向(Y轴)移动。  scale()方法用于将元素根据中心原点进行缩放。  rotate()方法用于将元素相对中心原点进行旋转。  skew()方法将元素倾斜显示。  transition属性用于将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另外一个属性值”来实现动画效果。  transitionproperty属性用于单独设定过渡动画所要操作的那个属性。  transitionduration属性用于单独设置过渡持续的时间。  transitiontimingfunction属性用于定义过渡方式。  transitiondelay属性用于设置动画开始的延迟时间。  动画效果使用animation属性来实现。  使用animation属性定义CSS3动画需要两步：定义动画和调用动画。  使用@keyframes规则定义动画。  animationname属性用于调用动画。  animationduration属性用于设置动画的持续时间。  animationtimingfunction属性用于设置动画的播放方式。  animationdelay属性用于定义动画播放的延迟时间。  animationiterationcount属性用于定义动画的播放次数。  animationdirection属性用于定义动画的播放方向。  animationplaystate属性用于定义动画的播放状态。  animationfillmode属性用于定义在动画开始之前和动画结束之后发生的事情。

flex-direction:row

flex-direction:row-reverse

flex-direction:column

flex-direction:column-reverse

flex-wrap:nowrap

flex-wrap:wrap

flex-wrap:wrap-reverse

flex-flow:row wrap-reverse

flex-flow:column wrap-reverse;

justify-content:flex-end

justify-content:center

justify-content:space-between

justify-content:space-around

align-items:flex-start

align-items:flex-end

align-items:center

align-items:baseline

align-items:strecth

align-content:flex-start

align-content:flex-end

align-content:center

align-content:space-between

align-content:space-around

align-content:strecth

This is a heading

浣溪沙

我爱的纳兰容若

采桑子

上帝的恩赐中国清酒的米水传奇