zoukankan html css js c++ java

Web开发——CSS基础

参考：

参考：http://css.doyoe.com/
参考：http://www.w3school.com.cn/cssref/index.asp
参考：https://www.w3cschool.cn/css/css-tutorial.html
参考：你未必知道的49个CSS知识点
参考：你未必知道的CSS知识点（第二季）

目录：

1、层叠样式表的组成
2、CSS选择器
- 2.1 CSS基础选择器
- 2.2 CSS3 选择器
3、一些常用的样式
4、CSS继承
5、CSS HTML颜色名/背景颜色
- 5.1 HTML颜色名
- 5.2 背景颜色
6、浮动和定位属性（Positioning）
7、盒子模型
- 7.1 盒子模型简介
  - （1）什么是盒子模型
  - （2）书写内边距与外边距时的规则（TRBL顺序）
- 7.2 属性介绍
  - （1）padding内边距
  - （2）border边框
  - （3）margin外边距
8、弹性/伸缩盒模型
9、字体/内容/文本/尺寸
10、过渡/转换/用户界面/动画

　　根据不同的浏览器内核，css前缀会有所不同。最基本的浏览器有如下四种，其它的内核都是基于此四种进行再研发的。常见的浏览器内核可以分这四种：Gecko、Webkit、Trident、Presto。

Gecko：前缀为-moz- 火狐浏览器
Webkit：前缀为-webkit- 也叫谷歌内核，chrome浏览器最先开发使用，safari浏览器也使用该内核。国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等。
Trident：前缀为-ms- 也称为IE内核。
Presto：前缀为-o- 目前只有opera采用。

1、层叠样式表的组成

　　CSS样式表由选择器和声明两部分组成，其中选择器是通过名字来标识某个元素的（如元素名、类名、ID名）

层叠样式表一共有几种使用（引入）方式？

行内样式表style=""，如：

1 <p style="color:blue">测试文字</p>

内部样式表<style>

 1 <style type="text/css">
 2     p {color:blue;}
 3 </style>
 4 
 5 <!--或者写成-->
 6 <style>
 7     p {color:blue;}
 8 </style>
 9 
10 <body>
11     <p>测试文字</p>
12 </body>

外部样式表

1 <link rel="stylesheet" href="css/myCSS.css" type="text/css">

导入@url（"test.css"）

1 <style type="text/css">@import url(myCSS.css);</style>

2、CSS选择器

参考：http://www.w3school.com.cn/cssref/css_selectors.asp

　　CSS选择器非常丰富，大致可以分为以下几类：

基础选择器
关系选择器
伪类选择器：通过冒号来定义，它定义了元素的状态，如点击按下、点击完等等，我们之前都是直接操作元素的样式，现在可以为元素的状态改样式，使元素看去更“动态”。
伪对象选择器：也叫做伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上应该是：:weilei，::weiyuansu，而现在为了兼容就的书写方式，用一个冒号引导伪类也是能够被解析的。

　　伪类一般反映无法再CSS中轻松或者可靠检测到的某个元素的状态或者属性；

　　伪元素表示DOM外部的某种文档结构，常用伪元素：E::before，E::after。

2.1 CSS基础选择器

　　CSS基础选择器包括：

id选择器：#id名 {属性名:属性值;}
class选择器：.class名 {属性名:属性值;}（一个元素允许有多个class值）
标签选择器：标签名 {属性名:属性值;}

　　优先级顺序：

属性style（1000）>ID（100）>CLASS（10）>元素Element（1）>通配符*（通配符*代表所有的元素样式）
important>内联>ID>类>标签>伪类>属性选择器>伪元素>继承>通配符

1 <style>
2     #name_id {color:blue;}             <!--id方式-->
3     .name_class {color:blue;}        　<!--class方式-->
4     p {color:blue;}                    <!--element方式-->
5 </style>
6 
7 <body>
8     <p id="name_id" class="name_class">测试文字</p>
9 </body>

　　一个元素允许有多个class值：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8 
 9         <script src="jquery-3.3.1.js"></script>
10         <script type="text/javascript">
11         </script>
12         <!--配置浮动，使得列表从纵向变为横向：float: left;-->
13         <style type="text/css">
14             ul li.li1 {
15                 float: left;
16                 width: 40px;
17                 background: blue;    
18                 list-style: none;
19                 margin: 10px;
20             }
21             ul li.li2 {
22                 font-size: 20px;
23             }
24         </style>
25 
26     </head>
27     
28     <body>
29         <ul> 
30             <li class="li1 li2">A1</li>
31             <li class="li1">B1</li>
32             <li class="li1">C1</li>
33             <li class="li1">D1</li>
34             <li class="li1">E1</li>
35         </ul>
36     </body>
37 </html>

　　输出结果：

2.2 CSS3 选择器

　　在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

　　"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）

选择器	例子	例子描述	CSS
.class	.intro	选择 class="intro" 的所有元素。	1
#id	#firstname	选择 id="firstname" 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有 <p> 元素。	1
element,element	div,p	选择所有 <div> 元素和所有 <p> 元素。	1
element element	div p	选择 <div> 元素内部的所有 <p> 元素。	1
element>element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。	2
element+element	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素。	2
[attribute]	[target]	选择带有 target 属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。	2
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 "en" 开头的所有元素。	2
:link	a:link 1 a:link {color:blue;} 2 a:visited {color:blue;} 3 a:hover {color:red;} 4 a:active {color:yellow;}	选择所有未被访问的链接。	1
:visited	a:visited	选择所有已被访问的链接。	1
:active	1 a:active {color: red;} 2 p:active {color: yellow;} 3 div:active {color: blue;} 4 <a href="#">百度</a> 5 <p>这是一个段落</p> 6 <div>这是一个div</div>	选择活动链接。	1
:hover	a:hover 1 <style> 2 ul li:hover {　　<!--ul li {}, 表示对ul下面的li元素（包含关系）进行样式配置--> 3 background-color: red; 4 color: #FFF; 5 } 6 </style>	选择鼠标指针位于其上的链接。悬停时候样式的状态。	1
:focus	input:focus	选择获得焦点的 input 元素。	2
:first-letter	p:first-letter	选择每个 <p> 元素的首字母。	1
:first-line	p:first-line	选择每个 <p> 元素的首行。	1
:first-child	p:first-child，两个条件：本身有父元素本身是父元素的第一个元素	选择属于父元素的第一个子元素的每个 <p> 元素。	2
:before	p:before 1 <head> 2 <style type="text/css"> 3 div.d1:before { 4 content: "Before content: "; 5 color: red; 6 } 7 div:after { 8 content: " after content."; 9 color: blue; 10 } 11 </style> 12 </head> 13 14 <body> 15 <div class="d1">Block Element</div> 16 <div class="d2">Block Element</div> 17 <div class="d3">Block Element</div> 18 <div class="d4">Block Element</div> 19 <div class="d5">Block Element</div> 20 </body>	在每个 <p> 元素的内容之前插入内容。	2
:after	p:after	在每个 <p> 元素的内容之后插入内容。	2
:lang(language)	p:lang(it)	选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。	2
element1~element2	p~ul	选择前面有 <p> 元素的每个 <ul> 元素。	3
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素。	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。	3
[attribute=value*]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child ，两个条件：本身有父元素本身是父元素的最后一个元素	选择属于其父元素最后一个子元素每个 <p> 元素。	3
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:enabled	input:enabled	选择每个启用的 <input> 元素。	3
:disabled	input:disabled	选择每个禁用的 <input> 元素	3
:checked	input:checked 1 <head> 2 <style type="text/css"> 3 input:checked+span {background: red;} 4 input:checked+span:after {content: "---- I am checked, haha."} 5 </style> 6 </head> 7 8 <body> 9 <form> 10 <input type="radio" name="start"><span>Fanbingbing</span></input> 11 <br /> 12 <input type="radio" name="start"><span>Libingbing</span></input> 13 <br /> 14 <input type="radio" name="start"><span>Hubingbing</span></input> 15 </form> 16 </body>	选择每个被选中的 <input> 元素。	3
:not(selector)	:not(p)，匹配不含有selector选择器的元素 1 div:not(.d1) {color: red;} 2 3 <div class="d1">块元素</div> 4 <div class="d2">块元素</div> 5 <div class="d3">块元素</div> 6 <div class="d4">块元素</div> 7 <div class="d5">块元素</div>	选择非 <p> 元素的每个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3

3、一些常用的样式

参考：http://www.w3school.com.cn/cssref/index.asp

CSS 属性组：

举例说明：

　　举例1（让段落不进行换行，且元素一行放不下多余的部分隐藏，多余的部分用省略号显示）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8 
 9         <script src="jquery-3.3.1.js"></script>
10         <script type="text/javascript">
11         </script>
12         
13         <style type="text/css">
14             p {
15                 white-space: nowrap;
16                 overflow: hidden;
17                 text-overflow: ellipsis;
18             }
19         </style>
20 
21     </head>
22     
23     <body>
24         <p>A text paragraph, a text paragraph, a text paragraph, a text paragraph, a text paragraph, a text paragraph, a text paragraph</p>
25     </body>
26 </html>

　　输出效果：略

4、CSS继承

　　所谓CSS的继承，是指被包在内部的标签将拥有外部标签的样式性质。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了颜色值属性，也会应用到段落的文本中。

继承的局限性：

　　在CSS中，继承是非常自然的行为，但是继承也有局限性。有些属性是不能被继承的，比如border属性用来设置边框，它就没有继承性。padding和margin也不能继承。

能被继承的常用属性有哪一些？

　　color，cursor，font-family，font-size，font-style，font-weight，font，letter-spacing，line-height，list-style，text-align，text-indent。

　　举例1：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10 
11         <style>
12             * {
13                 margin: 0px;
14                 padding: 0px;
15             }
16             p {
17                 color: red;
18                 border: 1px solid blue;
19                 padding: 10px;
20                 margin: 20px;
21                 cursor: pointer;        /* 将光标箭头编程小手的样式 */
22             }
23         </style>
24     </head>
25     
26     <body>
27         <p>这是一个段落<i>这是一个i标签的内容</i>></p>>
28     </body>
29 </html>

　　输出结果：

5、CSS HTML颜色名/背景颜色

5.1 HTML颜色名

参考：http://www.w3school.com.cn/html/html_colornames.asp

　　提示：仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。

　　如果使用其它颜色的话，就应该使用十六进制的颜色值。

5.2 背景颜色

属性

描述

CSS

background

在一个声明中设置所有的背景属性。

background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动。

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

background-color

设置元素的背景颜色。

值	描述
color_name	规定颜色值为颜色名称的背景颜色（比如 red）。
hex_number	规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent	默认。背景颜色为透明。
inherit	规定应该从父元素继承 background-color 属性的设置。

background-image

设置元素的背景图像。

值	描述
url('URL')	指向图像的路径。如：background-image: url("img/test_img.jpg");
none	默认值。不显示背景图像。
inherit	规定应该从父元素继承 background-image 属性的设置。

background-position

设置背景图像的开始位置。

值

描述

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果您仅规定了一个关键词，那么第二个值将是"center"。

默认值：0% 0%。

x% y%

第一个值是水平位置，第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值，另一个值将是 50%。

xpos ypos

第一个值是水平位置，第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

background-repeat

设置是否及如何重复背景图像。

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-clip

规定背景的绘制区域。

值	描述	测试
border-box	背景被裁剪到边框盒。	测试
padding-box	背景被裁剪到内边距框。	测试
content-box	背景被裁剪到内容框。	测试

background-origin

规定背景图片的定位区域。

值	描述	测试
padding-box	背景图像相对于内边距框来定位。	测试
border-box	背景图像相对于边框盒来定位。	测试
content-box	背景图像相对于内容框来定位。	测试

background-size

规定背景图片的尺寸。

值	描述	测试
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。	测试
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。	测试
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。	测试
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。	测试

　　举例1：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         
11         <!-- background: url("ms_picture.jpg") no-repeat center 10px; 10px是设置背景图片距离顶端的距离 -->
12         <style>
13             div.box {
14                 display: flex;
15             }
16             div.item {
17                 flex-grow: 1;
18                 height: 30px;
19                 text-align: center;
20                 padding-top: 150px;
21             }
22             div.ms {
23                 background: url("ms_picture.jpg") no-repeat center 10px; 
24                 margin-top: 10px;
25                 /* background-size: 100%; */
26             }
27         </style>
28         <!--或者写成：
29         <style>
30             div.box {
31                 display: flex;
32             }
33             div.item {
34                 flex-grow: 1;
35                 height: 30px;
36                 text-align: center;
37                 padding-top: 140px;
38             }
39             div.ms {
40                 background: url("ms_picture.jpg") no-repeat center; 
41                 margin-top: 10px;
42                 background-size: 100px;
43             }
44         </style>
45         -->>
46     </head>
47     
48     <body>
49         <div class="box">
50             <div class="item ms">找美食</div>
51         </div>
52     </body>
53 </html>

　　输出结果：

6、浮动和定位属性（Positioning）

属性

描述

CSS

bottom

设置定位元素下外边距边界与其包含块下边界之间的偏移。

clear

规定元素的哪一侧不允许其他浮动元素。在float属性中介绍清除浮动的三种方式。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

clip

剪裁绝对定位元素。

cursor

规定要显示的光标的类型（形状）。

display

规定元素应该生成的框的类型。

值	描述
none	此元素不会被显示（隐藏对象，完全消失于文档流）。（位置也不会保留，和opacity透明度属性对比，opacity:0;指的是设置透明度为0）
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>），比如实现垂直居中：{display: table-cell; vertical-align: middle;}
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。

float

规定框是否应该浮动。float是css样式中的定位属性，用于设置标签的居左浮动和居右浮动，浮动后的元素不属于html文档流，需要用清除浮动把文档拽回到文档流中。

html文档流：自窗体自上而下分成一行一行，并在每行中按从左到右的顺序排放元素。

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

　　举例1：浮动+清除浮动方式一：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>
        
        <script src="jquery-3.3.1.js"></script>

        <style>
            div {
                width: 200px;
                height: 200px;
            }
            div.d1 {
                background: red;
                float: left;
            }
            div.d2 {
                background: blue;
                float: left;
            }
            div.d3 {
                width: 500px;
                height: 300px;            
                background: green;

            }
            div.clear {
                width: 0px;
                height: 0px;            
                clear: both;
            }
        </style>
    </head>
    
    <body>

        <div class="d1"></div>
        <div class="d2"></div>
        
        <div class="clear"></div>        <!--作用是用于清除浮动-->
        <div class="d3"></div>
        
    </body>
</html>

　　输出结果：略。

　　举例2：浮动+清除浮动方式二（较为常用）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>
        
        <script src="jquery-3.3.1.js"></script>

        <style>
            div.d1 {
                width: 200px;
                height: 200px;
                background: red;
                float: left;
            }
            div.d2 {
                width: 200px;
                height: 200px;
                background: blue;
                float: left;
            }
            div.d3 {
                width: 500px;
                height: 300px;            
                background: green;

            }
            div.clear::after {
                content: "";
                display: block;
                clear: both;
            }
        </style>
    </head>
    
    <body>
        <div class="clear">                <!--作用是用于清除浮动-->
            <div class="d1"></div>
            <div class="d2"></div>
        </div>
        
        <div class="d3"></div>        
    </body>
</html>

　　输出结果：略。

　　举例3：浮动+清除浮动方式三（较为常用，增加父容器属性配置为：overflow: hidden;或者overflow: auto;）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>
        
        <script src="jquery-3.3.1.js"></script>

        <style>
            .box {
                overflow: hidden;
                /* overflow: auto; */
            }
            .d1 {
                width: 200px;
                height: 200px;
                background: red;
                float: left;
            }
            .d2 {
                width: 200px;
                height: 200px;
                background: blue;
                float: left;
            }
            .d3 {
                width: 500px;
                height: 300px;            
                background: green;
            }
        </style>
    </head>
    
    <body>
        <div class="box">                <!--作用是用于清除浮动-->
            <div class="d1"></div>
            <div class="d2"></div>
        </div>        
        
        <div class="d3"></div>        
    </body>
</html>

　　输出结果：略。

left

设置定位元素左外边距边界与其包含块左边界之间的偏移。

overflow

规定当内容溢出元素框时发生的事情。

position

规定元素的定位类型。指的是本体相对于上级的定位。

需要指定一个父容器（position:relative）+需要定位的元素（position:absolution）；
如果当前的父元素已经是（position:absolution）了，则对于需要定位的元素直接设置为（position:absolution; top:xx; left:xx;）

值	描述
static	（不需要指定父容器）默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative	（需要指定父容器）位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。
absolute	位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。（一般指定两个方位即可，比如top+right或者top+left，等等）（ "left"、"top"、"right" 以及 "bottom" 属性可以设置为百分比，或者负值（负值则会突出边框位置））。（在未进行绝对定位时，可以用display:block;来代替显示，配置好绝对定位后，可以删除display属性。）
fixed	位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

　　举例1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>
        
        <script src="jquery-3.3.1.js"></script>
        <!--<p>元素的父元素position属性设置为relative-->
        <!--<p>元素position属性设置为absolute，
            此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。-->
        <style>
            div {
                width: 600px;
                height: 600px;
                border: 1px solid red;
                position: relative;
            }
            p {
                width: 100px;
                height: 100px;
                background: blue;
                resize: both;
                position: absolute;
                top: 100px;
                left: 100px;
            }
        </style>
    </head>
    
    <body>
        <div class="d1">
            <p></p>
        </div>
    </body>
</html>

　　举例2（雪人+雪地）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>
        
        <script src="jquery-3.3.1.js"></script>
        <!--<p>元素的父元素position属性设置为relative-->
        <!--<p>元素position属性设置为absolute，
            此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。-->
        <style>
            div {
                width: 100%;
                height: 340px;
                background: pink;
                position: relative;
            }
            div::before {
                content: "";
                width: 70px;
                height: 70px;
                background: url("img/snow-people.png") no-repeat;
                position: absolute;
                bottom: -5px;
                right: 150px;
            }
            div::after {
                content: "";
                width: 14px;
                height: 70px;
                background: url("img/snow.png");
                position: absolute;
                bottom: -8px;
            }            
        </style>
    </head>
    
    <body>
        <div>
        </div>
    </body>
</html>

　　输出结果：略。

right

设置定位元素右外边距边界与其包含块右边界之间的偏移。

top

设置定位元素的上外边距边界与其包含块上边界之间的偏移。

vertical-align

设置元素的垂直对齐方式。

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

visibility

规定元素是否可见。

z-index

设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute/fixed;）！

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

　　举例1（Z-index 可用于将在一个元素放置于另一元素之后。）：

<!DOCTYPE html>
<html>
    <head>
        <!--<meta charset="utf-8">-->
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>
        
        <script src="jquery-3.3.1.js"></script>
        <style>
            img.img1 {
                width: 400px;
                height: 400px;
                
                position: relative;    <!--position: fixed;也可以-->
                left: 0px;
                top: 0px;
                z-index: -1;        　　<!--如果修改为：z-index: +1;，则会，图片覆盖文字内容-->
            }            
        </style>
    </head>
    
    <body>
        <h1>这是一个标题</h1>
        <img class="img1" src="picture1.jpg" alt="Can not open this picture">
        <p>默认的 z-index 是 0。z-index -1 拥有更低的优先级。</p>
    </body>
</html>

　　输出结果：

7、盒子模型

7.1 盒子模型简介

（1）什么是盒子模型

　　盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域：内容（content）、内边距（padding）、外边框（border）、外边距（margin）。

　　举例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         
11         <!--line-height设置文字行高，后续增加属性-->
12         <!--text-align设置文字对齐方式，后续增加属性-->
13         
14         <!--width和height代表内容属性-->
15         <!--padding内边距属性-->
16         <!--margin外边距属性-->
17         <!--border边框属性-->
18         <style>
19             p {
20                 width: 150px;
21                 height: 40px;
22                 
23                 line-height: 40px;
24                 text-align: center;
25                 
26                 padding: 20px;
27                 margin: 10px 20px 30px 40px;
28                 border: 30px solid red;
29             }            
30         </style>
31     </head>
32     
33     <body>
34         <p>测试盒子模型</p>
35     </body>
36 </html>

　　输出结果：

（2）书写内边距与外边距时的规则（TRBL顺序）

　　实际上，有缺省值时，如只有两个值（上右），剩下的下左会取对面的值。

如果有四个参数：四个参数分别表示上右下左：h2{margin: 10px 20px 30px 40px;}
如果只有一个参数：表示上右下左四个方向都是这一个值：h2{margin: 10px;}
如果有两个参数：第一个参数表示上下，第二个参数表示左右（取对面的值）：h2{margin: 10px 20px;}
如果有三个参数：表示上右下，左边位置取右边的值：h2{margin: 10px 20px 30px;}

7.2 属性介绍　　

（1）padding内边距

属性

描述

CSS

padding

在一个声明中设置所有内边距属性。如果设置padding属性1~4个值，则遵循TRBL的顺序及相关规则。

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的内边距。
inherit	规定应该从父元素继承内边距。

　　举例1：

h1 {
    padding: 10px 0.25em 2ex 20%;
}

<!--上述表示等价于-->
h1 {
    padding-top: 10px;
    padding-right: 0.25em;
    padding-bottom: 2ex;
    padding-left: 20%;
}

　　输出结果：略。

padding-bottom

设置元素的下内边距。

注意：给行内元素加顶部和底部的内边距是不起作用的，如下例子会不起作用。

<style>
    span {
        padding-top: 10px;
        padding-bottom: 10px;
    }
</style>


<span>这是span</span>
<div>这是div</div>

　　输出结果：略。

padding-left

设置元素的左内边距。

padding-right

设置元素的右内边距。

padding-top

设置元素的上内边距。

（2）border边框

　　border-radius还可以分别设置四个方向的值（左上角、右上角、左下角、右下角，原理相同）

通常设置绝对值（设置为圆角）
百分比通常用来设置一个椭圆，因为设置百分比就不再是一个圆的半径，而是指矩形从高和宽的中心点进行变形。通常设置四个值分别是设置四个角的百分比。

　　举例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         
11         <!--border: 10px solid red;等价于以下（三个属性综合）写法：-->
12         <!--
13             border- 10px;
14             border-style: solid;
15             border-color: red;
16         -->
17         <!---->
18 
19         <style>
20             div {
21                 width: 100px;
22                 height:100px;
23                 
24                 border: 10px solid red;
25             }            
26         </style>
27     </head>
28     
29     <body>
30         <div></div>
31     </body>
32 </html>

　　输出结果：略。

属性

描述

CSS

在一个声明中设置所有的边框属性。

在一个声明中设置所有的下边框属性。

设置下边框的颜色。

设置下边框的样式。

设置下边框的宽度。

设置四条边框的颜色。

在一个声明中设置所有的左边框属性。

设置左边框的颜色。

设置左边框的样式。

设置左边框的宽度。

在一个声明中设置所有的右边框属性。

设置右边框的颜色。

设置右边框的样式。

设置右边框的宽度。

设置四条边框的样式。

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

在一个声明中设置所有的上边框属性。

设置上边框的颜色。

设置上边框的样式。

设置上边框的宽度。如未设置，默认设置为3px。

border-width

设置四条边框的宽度。

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length（自定义值）	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

在一个声明中设置所有的轮廓属性。

设置轮廓的颜色。

设置轮廓的样式。

设置轮廓的宽度。

border-bottom-left-radius

定义边框左下角的形状。

border-bottom-right-radius

定义边框右下角的形状。

border-image

简写属性，设置所有 border-image-* 属性。

border-image-outset

规定边框图像区域超出边框的量。

border-image-repeat

图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

规定图像边框的向内偏移。

规定用作边框的图片。

规定图片边框的宽度。

简写属性，设置所有四个 border-*-radius 属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>
        
        <script src="jquery-3.3.1.js"></script>
        <!-- border-radius的值如果等于高的一半，将会形成一个正的圆角。大于高的一半值将依然是一个正圆角
        radius是指半径，它求出的圆，在矩形上的切面。 -->
        <style>
            div {
                width: 200px;
                height: 40px;
                background: orange;
                border-radius: 20px;
            }
            p {
                width: 40px;
                height: 40px;
                border-radius: 20px;
                background: black;
            }
        </style>
    </head>
    
    <body>
        <div>
            <p></p>
        </div>
    </body>
</html>

　　输出结果：

border-top-left-radius

定义边框左上角的形状。

border-top-right-radius

定义边框右下角的形状。

box-decoration-break

box-shadow

向方框添加一个或多个阴影。

　　举例2：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         
11         <style>
12             h1.h1_class1 {
13                 text-align: center;
14                 font-size: 50px;
15             }
16             div.cont {
17                 width: 1200px;
18                 height:1200px;
19                 
20                 margin: 0px auto;                
21             }
22             h3 {
23                 font-size: 28px;
24             }
25             p {
26                 font-size: 18px;
27                 color: #818181;
28                 width: 360px;
29             }
30             li {
31                 border-right: 1px solid #ddd;
32                 border-bottom: 1px solid #ddd;
33                 width: 500px;
34                 height: 250px;
35             }
36             ul {
37                 padding-left: 0px;
38                 list-style: none;
39                 float: left;
40             }
41             .right_top {
42                 border-right: none;
43             }
44             .right_botton {
45                 border-right: none;
46             }
47             h3{
48                 padding-left: 40px;
49             }
50             p{
51                 padding-left: 40px;
52             }
53         </style>
54     </head>
55     
56     <body>
57         <h1 class="h1_class1">关于我们</h1>
58         <div class="cont">
59             <ul>
60                 <li>
61                     <h3>预约方便</h3>
62                     <p>关注尚学堂官方微信或拨打预约电话，实时回复，无需预约，确认后2小时之内教师上门授课或指导</p>
63                 </li>
64                 <li>
65                     <h3>预约方便</h3>
66                     <p>关注尚学堂官方微信或拨打预约电话，实时回复，无需预约，确认后2小时之内教师上门授课或指导</p>
67                 </li>                
68             </ul>
69             <ul>
70                 <li class="right_top">
71                     <h3>预约方便</h3>
72                     <p>关注尚学堂官方微信或拨打预约电话，实时回复，无需预约，确认后2小时之内教师上门授课或指导</p>
73                 </li>
74                 <li class="right_botton">
75                     <h3>预约方便</h3>
76                     <p>关注尚学堂官方微信或拨打预约电话，实时回复，无需预约，确认后2小时之内教师上门授课或指导</p>
77                 </li>                
78             </ul>        
79         </div>
80     </body>
81 </html>

　　输出结果：略。

（3）margin外边距

　　有以下几个特点：

块级元素的垂直相邻边距会合并。以数值大的为准。
而行内元素实际上不占上下外边距（即设置上下外边距不起作用）。行内元素的左右外边距不合并。
浮动元素的外边距也不会合并。
允许指定负的外边距，使用时需要小心。

值	描述
auto	浏览器计算外边距。
length （用户自定义值，可以为负值）	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

　　举例1：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         
11         <style type="text/css">
12             p.margin {
13                 margin: 2cm 4cm 3cm 4cm;
14             }
15         </style>
16     </head>
17     
18     <body>
19         <p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
20     </body>
21 </html>

　　输出结果：

　　举例2：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         
11         <style>
12             * {
13                 margin: 0px;
14                 padding: 0px;
15             }
16             div {
17                 width: 100px;
18                 height: 200px;
19                 background: red;
20                 margin: 50px;
21                 float: left;
22             }
23             p {
24                 width: 100px;
25                 height: 200px;
26                 background: green;
27                 margin: 80px;
28                 float: left;
29             }
30         </style>
31     </head>
32     
33     <body>
34         <div></div>
35         <p></p>
36     </body>
37 </html>

　　输出结果：

　　举例3：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         
11         <style>
12             * {
13                 margin: 0px;
14                 padding: 0px;
15             }
16             div.d1 {
17                 width: 100px;
18                 height: 200px;
19                 background: red;
20                 margin: 50px;
21                 float: left;
22             }
23             p {
24                 width: 100px;
25                 height: 200px;
26                 background: green;
27                 margin: 50px;
28                 float: left;
29             }
30             div.clear {
31                 clear: both;
32             }
33             div.d2 {
34                 width: 300px;
35                 height: 100px;
36                 background: blue;
37                 margin: 50px;
38             }
39         </style>
40     </head>
41     
42     <body>
43         <div class="d1"></div>
44         <p></p>
45         <div class="clear"></div>
46         <div class="d2"></div>
47     </body>
48 </html>

　　输出结果：

　　举例4（左右自动对齐的方式）（margin: 0px auto; 下列示例中保留了上边的外边距，左右对齐）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         
11         <style>
12             * {
13                 margin: 0px;
14                 padding: 0px;
15             }
16             div.d1 {
17                 width: 100px;
18                 height: 200px;
19                 background: red;
20                 margin: 90px auto;
21             }
22         </style>
23     </head>
24     
25     <body>
26         <div class="d1"></div>
27     </body>
28 </html>

　　输出结果：略。

　　举例5（绘制大街网的底部内容）：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <!--<meta charset="utf-8">-->
  5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6         <meta http-equiv="Content-Language" content="zh-cn" />
  7         <title>My test page</title>
  8         
  9         <script src="jquery-3.3.1.js"></script>
 10         
 11         <style>
 12             footer {
 13                 height: 100px;
 14                 width: 100%;
 15                 background: rgba(0, 0, 0, .3);
 16                 position: fixed;
 17                 bottom: 0px;
 18             }
 19             div.wrap {
 20                 height: 100px;
 21                 width: 950px;
 22                 margin: 0px auto;
 23                 background: yellow;
 24             }
 25             div.dj-logo, div.dj-phone {
 26                 float: left;
 27             }
 28             div.dj-reg {
 29                 float: right;
 30             }
 31             div.clear {
 32                 clear: both;
 33             }
 34             
 35             div.dj-logo p{
 36                 height: 60px;
 37                 line-height: 60px;
 38                 background: url("dj.jpg") no-repeat;
 39                 background-size: 60px;
 40                 padding-left: 70px;
 41                 padding-right: 40px;
 42                 border-right: 1px solid #ddd;
 43                 font-size: 16px;
 44                 color: black;
 45             }
 46             
 47             div.dj-phone p {
 48                 margin-top: 20px;
 49                 margin-left: 30px;
 50             }
 51             div.dj-phone p i {
 52                 color: black;
 53                 font-style: normal;
 54                 fond-size: 16px;
 55             }
 56             
 57             div.dj-reg a.reg {
 58                 display: block;
 59                 width: 135px;
 60                 height: 40px;
 61                 background: orange;
 62                 border-radius: 5px;
 63                 line-height: 40px;
 64                 text-align: center;
 65                 color: black;
 66                 fond-size: 18px;
 67                 margin-top: 20px;
 68                 margin-bottom: 10px;
 69             }
 70             div.dj-reg a.login {
 71                 margin-left: 10px;
 72                 color: black;
 73             }
 74             
 75             a {
 76                 text-decoration: none;
 77             }
 78         </style>
 79     </head>
 80     
 81     <body>
 82         <footer>
 83             <div class="wrap">
 84                 <div class="dj-logo">
 85                     <p>年轻人专属的社交网站</p>
 86                 </div>
 87                 <div class="dj-phone">
 88                     <p>
 89                         <span>客服电话：</span>
 90                         <i>400-813-1117</i>
 91                     </p>
 92                     <p>
 93                         <span>客服电话：</span>
 94                         <i>400-813-1117</i>
 95                     </p>                    
 96                 </div>
 97                 <div class="dj-reg">
 98                     <a href="#" class="reg">快速注册</a>
 99                     <a href="#" class="login">已有账号，登录</a>                
100                 </div>
101                 <div class="clear"></div>
102             </div>
103         </footer>
104     </body>
105 </html>

　　输出结果：

8、弹性/伸缩盒模型

8.1 常用属性

8.2 旧的伸缩盒模型

8.3 可伸缩框属性

Gecko：前缀为-moz- 火狐浏览器
Webkit：前缀为-webkit- 也叫谷歌内核，chrome浏览器最先开发使用，safari浏览器也使用该内核。国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等。
Trident：前缀为-ms- 也称为IE内核。
Presto：前缀为-o- 目前只有opera采用。

属性

描述

CSS

box-align

box-align，规定如何对齐框的子元素。

目前没有浏览器支持 box-align 属性。
Firefox 支持替代的 -moz-box-align 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。

值	描述	测试
start	对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。对于反方向的框，每个子元素的下边缘沿着框的底边放置。	测试
end	对于正常方向的框，每个子元素的下边缘沿着框的底边放置。对于反方向的框，每个子元素的上边缘沿着框的顶边放置。	测试
center	均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。	测试
baseline	如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。	测试
stretch	拉伸子元素以填充包含块

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>

        <script src="jquery-3.3.1.js"></script>
        <script type="text/javascript">
        </script>
        <!-- 通过使用 box-align and box-pack 属性，居中 div 框的子元素 -->
        <!-- 配置浮动，使得列表从纵向变为横向：float: left; -->
        <style type="text/css">
            div
            {
                width:350px;
                height:100px;
                border:1px solid black;
                  
                /* Firefox */
                display:-moz-box;
                -moz-box-pack:center;
                -moz-box-align:center;

                /* Safari, Chrome, and Opera */
                display:-webkit-box;
                -webkit-box-pack:center;
                -webkit-box-align:center;

                /* W3C */
                display:box;
                box-pack:center;
                box-align:center;
            }
        </style>

    </head>
    
    <body>
        <div>
            <p>我是居中对齐的。</p>
        </div>

        <p><b>注释：</b>IE 不支持 box-pack 和 box-align 属性。</p>
    </body>
</html>

　　输出结果：略。

box-direction

box-direction，规定框的子元素的显示方向。

目前没有浏览器支持 box-direction 属性。
Firefox 支持替代的 -moz-box-direction 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-direction 属性。

值	描述	测试
normal	以默认方向显示子元素。	测试
reverse	以反方向显示子元素。	测试
inherit	应该从子元素继承 box-direction 属性的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>

        <script src="jquery-3.3.1.js"></script>
        <script type="text/javascript">
        </script>
        <!-- 通过使用 box-align and box-pack 属性，居中 div 框的子元素 -->
        <!-- 配置浮动，使得列表从纵向变为横向：float: left; -->
        <style type="text/css">
            div
            {
                width:350px;
                height:100px;
                border:1px solid black;

                /* Firefox */
                display:-moz-box;
                -moz-box-direction:reverse;

                /* Safari, Opera, and Chrome */
                display:-webkit-box;
                -webkit-box-direction:reverse;

                /* W3C */
                display:box;
                box-direction:reverse;
            }
        </style>

    </head>
    
    <body>
        <div>
            <p>段落 1。</p>
            <p>段落 2。</p>
            <p>段落 3。</p>
        </div>
            
        <p><b>注释：</b>IE 不支持 box-direction 属性。</p>
    </body>
</html>

　　输出结果：略。

box-flex

box-flex，规定框的子元素是否可伸缩。box-flex 属性规定框的子元素是否可伸缩其尺寸。

提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。

目前没有浏览器支持 box-flex 属性。
Firefox 支持替代的 -moz-box-flex 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

值	描述
value	元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>

        <script src="jquery-3.3.1.js"></script>
        <script type="text/javascript">
        </script>
        <!-- 通过使用 box-align and box-pack 属性，居中 div 框的子元素 -->
        <!-- 配置浮动，使得列表从纵向变为横向：float: left; -->
        <style type="text/css">
            div
            {
                display:-moz-box; /* Firefox */
                display:-webkit-box; /* Safari and Chrome */
                display:box;
                width:300px;
                border:1px solid black;
            }

            #p1
            {
                -moz-box-flex:1.0; /* Firefox */
                -webkit-box-flex:1.0; /* Safari and Chrome */
                box-flex:1.0;
                border:1px solid red;
            }

            #p2
            {
                -moz-box-flex:2.0; /* Firefox */
                -webkit-box-flex:2.0; /* Safari and Chrome */
                box-flex:2.0;
                border:1px solid blue;
            }
        </style>

    </head>
    
    <body>
        <div>
            <p id="p1">Hello</p>
            <p id="p2">W3School</p>
        </div>
        
        <p><b>注释：</b>IE 不支持 box-flex 属性。</p>
    </body>
</html>

　　输出结果：

box-flex-group

box-flex-group，将可伸缩元素分配到柔性分组。目前没有浏览器支持 box-flex-group 属性。

box-flex-group 属性用于向柔性分组分配可伸缩元素。

提示：可伸缩元素能够随着框的缩小和扩大而伸缩。

box-lines

box-lines，规定当超出父元素框的空间时，是否换行显示。目前没有浏览器支持 box-lines 属性。

值	描述
single	所有子元素会被放置在单独的行或列中。（无法匹配的元素会被视为溢出）。
multiple	允许框扩展为多行，以容纳其所有子元素。

box-ordinal-group

box-ordinal-group，规定框的子元素的显示次序。box-ordinal-group 属性规定框中子元素的显示次序。值更低的元素会显示在值更高的元素前面显示。

注释：分组值相同的元素，它们的显示次序取决于其源次序。

目前没有浏览器支持 box-ordinal-group 属性。
Firefox 支持替代的 -moz-box-ordinal-group 属性。
Safari 和 Chrome 支持替代的 -webkit-box-ordinal-group 属性。

值	描述	测试
integer	一个整数，指示子元素的显示次序。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>

        <script src="jquery-3.3.1.js"></script>
        <script type="text/javascript">
        </script>
        <!-- 通过使用 box-align and box-pack 属性，居中 div 框的子元素 -->
        <!-- 配置浮动，使得列表从纵向变为横向：float: left; -->
        <style type="text/css">
            .box
            {
                display:-moz-box; /* Firefox */
                display:-webkit-box; /* Safari and Chrome */
                display:box;
                border:1px solid black;
            }
            .ord1
            {
                margin:5px;
                -moz-box-ordinal-group:1; /* Firefox */
                -webkit-box-ordinal-group:1; /* Safari and Chrome */
                box-ordinal-group:1;
            }
            .ord2
            {
                margin:5px;
                -moz-box-ordinal-group:2; /* Firefox */
                -webkit-box-ordinal-group:2; /* Safari and Chrome */
                box-ordinal-group:2;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="ord2">第一个 DIV</div>
            <div class="ord1">第二个 DIV</div>
            <div class="ord1">第三个 DIV</div>
        </div>
        
        <p><b>注释：</b>IE 或 Opera 不支持 box-ordinal-group 属性。</p>
    </body>
</html>

　　输出结果：

box-orient

box-orient，规定框的子元素是否应水平或垂直排列。box-orient 属性规定框的子元素应该被水平或垂直排列。

提示：水平框中的子元素从左向右进行显示，而垂直框的子元素从上向下进行显示。不过，box-direction 和 box-ordinal-group 能够改变这种顺序。

目前没有浏览器支持 box-orient 属性。
Firefox 支持替代的 -moz-box-orient 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。

值	描述	测试
horizontal	在水平行中从左向右排列子元素。	测试
vertical	从上向下垂直排列子元素。	测试
inline-axis	沿着行内轴来排列子元素（映射为 horizontal）。	测试
block-axis	沿着块轴来排列子元素（映射为 vertical）。	测试
inherit	应该从父元素继承 box-orient 属性的值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>

        <script src="jquery-3.3.1.js"></script>
        <script type="text/javascript">
        </script>
        <!-- 通过使用 box-align and box-pack 属性，居中 div 框的子元素 -->
        <!-- 配置浮动，使得列表从纵向变为横向：float: left; -->
        <style type="text/css">
            div
            {
                width:350px;
                height:150px;
                border:1px solid black;
                
                /* Firefox */
                display:-moz-box;
                -moz-box-orient:horizontal;

                /* Safari, Opera, and Chrome */
                display:-webkit-box;
                -webkit-box-orient:horizontal;

                /* W3C */
                display:box;
                box-orient:horizontal;
            }
        </style>
    </head>
    
    <body>
        <div>
            <p>段落 1。</p>
            <p>段落 2。</p>
            <p>段落 3。</p>
        </div>
        
        <p><b>注释：</b>IE 不支持 box-orient 属性。</p>
    </body>
</html>

　　输出结果：

box-pack

box-pack，规定水平框中的水平位置或者垂直框中的垂直位置。box-pack 属性规定当框大于子元素的尺寸，在何处放置子元素。该属性规定水平框中的水平位置，以及垂直框中的垂直位置。

目前没有浏览器支持 box-pack 属性。
Firefox 支持替代的 -moz-box-pack 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-pack 属性。

值	描述	测试
start	对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间）对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）	测试
end	对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。	测试
center	均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后	测试
justify	在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。	测试

8.4 FlexBox微信订单实例

　　举例：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6         <meta http-equiv="Content-Language" content="zh-cn" />
  7         <title>My test page</title>
  8         
  9         <script src="jquery-3.3.1.js"></script>
 10 
 11         <style>
 12             header{
 13                 height: 45px;
 14                 line-height: 45px;          /* line-height 属性设置行间的距离（行高） */
 15                 background: #fa486c;
 16                 color: #fff;
 17                 position: relative;
 18                 text-align: center;
 19             }
 20             header a {
 21                 text-decoration: none;
 22                 position: absolute;
 23                 left: 10px;
 24                 color: #fff;
 25             }
 26             header span {
 27                 font-size: 20px;
 28             }
 29             .wlxx {
 30                 display: flex;
 31             }
 32             .wl1, .wl2 {
 33                 height: 100px;
 34             }
 35             .wl1 {
 36                 flex-grow: 2;
 37                 background:blue;
 38             }
 39             .wl2 {
 40                 flex-grow: 1;
 41                 background: green;
 42             }
 43             .hwxx h1 {
 44                 font-size: 20px;
 45                 font-weight: normal;
 46                 border-left: 2px solid #fa486c;
 47                 margin-left: 15px;
 48                 padding-left: 15px;
 49                 margin-bottom: 15px;
 50             }
 51             .wlxx-main {
 52                 border-top: 1px solid #ddd; padding-left: 15px;
 53             }
 54             .wlxx-main p {
 55                 margin-top: 10px;
 56             }
 57             .wlxx-main p span {
 58                 color: gray;
 59             }
 60             .wlxx-main p i {
 61                 font-style: normal;
 62             }
 63             /* 提交订单 */
 64             .tj a {
 65                 display: block;
 66                 text-decoration: none;
 67                 width: 80%;
 68                 margin: 0px auto;
 69                 height: 40px;
 70                 border: 2px solid #dddd;
 71                 border-radius: 20px;
 72                 text-align: center;
 73                 line-height: 40px;
 74                 font-size: 18px;
 75                 color: gray;
 76                 margin-top: 20px;
 77             }
 78             .tj a:hover {
 79                 background: #fa486c;
 80                 color: gray;
 81                 border: 2px solid #fa486c;
 82             }
 83         </style>
 84     </head>
 85     
 86     <body>
 87         <header>
 88             <a href="#">&lt;返回</a>
 89             <span>订单详情</span>
 90         </header>
 91         <!-- 物流信息 -->
 92         <div class="wlxx">
 93             <div class="wl1">预约成功，背景图片</div>
 94             <div class="wl2">箭头，背景图片</div>
 95             <div class="wl1">预约成功，背景图片</div>
 96             <div class="wl2">箭头，背景图片</div>
 97             <div class="wl1">预约成功，背景图片</div>
 98         </div>
 99         <!-- 货物信息 -->
100         <div class="hwxx">
101             <h1>货物信息</h1>
102             <div class="wlxx-main">
103                 <p><span>商品名：</span><i>YSL圣罗兰口红</i></p>
104                 <p><span>商品编号：</span><i>YSL圣罗兰口红</i></p>
105                 <p><span>商品价格：</span><i>YSL圣罗兰口红</i></p>
106                 <p><span>收货地址：</span><i>YSL圣罗兰口红</i></p>
107             </div>
108         </div>
109         <!-- 提交订单 -->
110         <div class="tj">
111             <a href="#">提交订单</a>
112         </div>
113         <footer></footer>
114     </body>
115 </html>

　　输出结果：

9、字体/内容/文本/尺寸

CSS 字体属性（Font）
内容生成（Generated Content）
CSS 文本属性（Text）
CSS 尺寸属性（Dimension）

9.1 CSS 字体属性（Font）

参考：字体大宝库

属性	描述	CSS
font	在一个声明中设置所有字体属性。	1
font-family	规定文本的字体系列。	1
font-size	规定文本的字体尺寸。	1
font-size-adjust	为元素规定 aspect 值。	2
font-stretch	收缩或拉伸当前的字体系列。	2
font-style	规定文本的字体样式。	1
font-variant	规定是否以小型大写字母的字体显示文本。	1
font-weight	规定字体的粗细。	1

　　使用自定义字体举例：

 1 <style>
 2     @font-face {
 3         font-family: myFont;            // 自定义的字体名
 4         src: url("res/shufa.ttf");      // 字体存放的路径
 5     }
 6     p {
 7         font-family: myFont;
 8         font-size: 10px;
 9     }
10 
11 </style>
12 
13 <body>
14     <p>天长地久</p>
15 </body>

　　输出结果：略。

9.2 内容生成（Generated Content）

属性	描述	CSS
content	与 :before 以及 :after 伪元素配合使用，来插入生成内容。	2
counter-increment	递增或递减一个或多个计数器。	2
counter-reset	创建或重置一个或多个计数器。	2
quotes	设置嵌套引用的引号类型。	2
crop	允许被替换元素仅仅是对象的矩形区域，而不是整个对象。	3
move-to	从流中删除元素，然后在文档中后面的点上重新插入。	3
page-policy	确定元素基于页面的 occurrence 应用于计数器还是字符串值。	3

　　举例：略。

9.3 CSS 文本属性（Text）

属性	描述	CSS
color	设置文本的颜色。	1
direction	规定文本的方向 / 书写方向。	2
letter-spacing	设置字符间距。	1
line-height	设置行高。	1
text-align	规定文本的水平对齐方式。	1
text-decoration	规定添加到文本的装饰效果。	1
text-indent	规定文本块首行的缩进。	1
text-shadow	规定添加到文本的阴影效果。	2
text-transform	控制文本的大小写。	1
unicode-bidi	设置文本方向。	2
white-space	规定如何处理元素中的空白。	1
word-spacing	设置单词间距。	1
hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	3

　　举例：略。

9.4 CSS 尺寸属性（Dimension）

属性	描述	CSS
height	设置元素高度。	1
max-height	设置元素的最大高度。	2
max-width	设置元素的最大宽度。	2
min-height	设置元素的最小高度。	2
min-width	设置元素的最小宽度。	2
width	设置元素的宽度。	1

　　举例：略。

10、过渡/转换/用户界面/动画

过渡属性（Transition）
2D/3D 转换属性（Transform）
用户界面属性（User-interface）
CSS3 动画属性（Animation）

10.1 2D/3D 转换属性（Transform）

属性

描述

CSS

transform

向元素应用 2D 或 3D 转换。transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

值	描述	测试
none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。	测试
translateY(y)	定义转换，只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)	为 3D 转换元素定义透视视图。	测试

　　举例1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>
        
        <script src="jquery-3.3.1.js"></script>

        <style>
            div {
                width: 100px;
                height: 200px;
                background: orange;
                margin: 100px auto;
            }
            div:hover {
                transform: translate3d(0px, -25px, 0px);
                box-shadow: 0px 15px 30px rgba(0, 0, 0, 5);
            }
        </style>
    </head>
    
    <body>
        <div>测试rotatex</div>
    </body>
</html>

　　输出结果：略。

　　举例2：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>
        
        <script src="jquery-3.3.1.js"></script>

        <style>
            div {
                width: 100px;
                height: 200px;
                background: orange;
                margin: 100px auto;
            }
            div:hover {
                transform: translate3d(0px, -25px, 0px);
                box-shadow: 0px 15px 30px rgba(0, 0, 0, 5);
            }
        </style>
    </head>
    
    <body>
        <div>测试rotatex</div>
    </body>
</html>

　　输出结果：

允许你改变被转换元素的位置。

规定被嵌套元素如何在 3D 空间中显示。

规定 3D 元素的透视效果。

规定 3D 元素的底部位置。

backface-visibility

定义元素在不面对屏幕时是否可见。

10.2 过渡属性（Transition）

属性

描述

CSS

transition

简写属性，用于在一个属性中设置四个过渡属性。

　　举例1（鼠标放上去则在2s内<div>元素宽度变为设定值）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>
        
        <script src="jquery-3.3.1.js"></script>
        <!-- border-radius的值如果等于高的一半，将会形成一个正的圆角。大于高的一半值将依然是一个正圆角
        radius是指半径，它求出的圆，在矩形上的切面。 -->
        <style>
            div
            {
                width:100px;
                height:100px;
                background:blue;
                transition:width 2s;
                -moz-transition:width 2s; /* Firefox 4 */
                -webkit-transition:width 2s; /* Safari and Chrome */
                -o-transition:width 2s; /* Opera */
            }
            div:hover
            {
                width:300px;
            }
        </style>
    </head>
    
    <body>
        <div>
            <p></p>
        </div>
    </body>
</html>

　　输出结果：略。

　　举例2（鼠标放上去则等待3s后，然后在2s内<div>元素宽度变为设定值）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>
        
        <script src="jquery-3.3.1.js"></script>
        <!-- border-radius的值如果等于高的一半，将会形成一个正的圆角。大于高的一半值将依然是一个正圆角
        radius是指半径，它求出的圆，在矩形上的切面。 -->
        <style>
            div
            {
                width:100px;
                height:100px;
                background:blue;
                transition:width 2s ease-in 3s;
                -moz-transition:width 2s ease-in 3s; /* Firefox 4 此为简写，包括css属性、过渡花费事件、过渡曲线、过渡效果何时开始*/
                -webkit-transition:width 2s ease-in 3s; /* Safari and Chrome */
                -o-transition:width 2s ease-in 3s; /* Opera */
            }
            div:hover
            {
                width:300px;
            }
        </style>
    </head>
    
    <body>
        <div>
            <p></p>
        </div>
    </body>
</html>

　　输出结果：略。

　　举例3（文字显示效果的改变）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>
        
        <script src="jquery-3.3.1.js"></script>
        <!-- border-radius的值如果等于高的一半，将会形成一个正的圆角。大于高的一半值将依然是一个正圆角
        radius是指半径，它求出的圆，在矩形上的切面。 -->
        <style>
            div
            {
                width:50px;
                height:20px;
                background:#ddd;
                transition:2s;
                -moz-transition:2s; /* Firefox 4 */
                -webkit-transition:2s; /* Safari and Chrome */
                -o-transition:2s; /* Opera */
            }
            div:hover
            {
                background:orange;
                color: aliceblue;
            }
        </style>
    </head>
    
    <body>
        <div>
            <p>红米3</p>
        </div>
    </body>
</html>

　　输出结果：略。

　　举例4（绘制一个圆圈，鼠标放上去时圆圈样式的改变）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-cn" />
        <title>My test page</title>
        
        <script src="jquery-3.3.1.js"></script>
        <!-- border-radius的值如果等于高的一半，将会形成一个正的圆角。大于高的一半值将依然是一个正圆角
        radius是指半径，它求出的圆，在矩形上的切面。 -->
        <style>
            div
            {
                width:100px;
                height:100px;
                border-radius: 50px;
                border: 3px solid orange;
                transition: 1s;
            }
            div:hover
            {
               border: 50px solid palevioletred;
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
</html>

　　输出效果：略。

transition-property

规定应用过渡的 CSS 属性的名称。

transition-duration

定义过渡效果花费的时间。

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-timing-function

规定过渡效果的时间曲线。

transition-delay

规定过渡效果何时开始。

10.3 用户界面属性（User-interface）

属性	描述	CSS
appearance	允许您将元素设置为标准用户界面元素的外观	3
box-sizing	允许您以确切的方式定义适应某个区域的具体内容。	3
icon	为创作者提供使用图标化等价物来设置元素样式的能力。目前没有浏览器支持 icon 属性。	3
nav-down	规定在使用 arrow-down 导航键时向何处导航。	3
nav-index	设置元素的 tab 键控制次序。	3
nav-left	规定在使用 arrow-left 导航键时向何处导航。	3
nav-right	规定在使用 arrow-right 导航键时向何处导航。	3
nav-up	规定在使用 arrow-up 导航键时向何处导航。	3
outline-offset	对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。	3
resize	规定是否可由用户对元素的尺寸进行调整。	3

10.4 CSS3 动画属性（Animation）

属性

描述

CSS

@keyframes

规定动画。

animation

所有动画属性的简写属性，除了 animation-play-state 属性。

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

animation-name

规定 @keyframes 动画的名称。

animation-duration

规定动画完成一个周期所花费的秒或毫秒。

　　语法：animation-duration: time;

值	描述
time	规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。

animation-timing-function

规定动画的速度曲线。

animation-delay

规定动画何时开始。

　　语法：animation-delay: time;

值	描述	测试
time	可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。	测试

animation-iteration-count

规定动画被播放的次数。

　　语法：animation-iteration-count: n|infinite;

值	描述	测试
n	定义动画播放次数的数值。	测试
infinite	规定动画应该无限次播放。	测试

animation-direction

规定动画是否在下一周期逆向地播放。默认是 "normal"。animation-direction 属性定义是否应该轮流反向播放动画。

如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。

注释：如果把动画设置为只播放一次，则该属性没有效果。

　　语法：animation-direction: normal|alternate;

值	描述	测试
normal	默认值。动画应该正常播放。	测试
alternate	动画应该轮流反向播放。	测试

animation-play-state

规定动画是否正在运行或暂停。

animation-play-state 属性规定动画正在运行还是暂停。

注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。

　　语法：animation-play-state: paused|running;

值	描述	测试
paused	规定动画已暂停。	测试
running	规定动画正在播放。	测试

animation-fill-mode

规定对象动画时间之外的状态。animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

注释：其属性值是由逗号分隔的一个或多个填充模式关键词。

　　语法：animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

　　动漫，举例1（使用百分比）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         <style>
11             div
12             {
13                 width: 100px;
14                 height: 100px;
15                 background: red;
16             }
17             @keyframes myMove {
18                 0% {width: 300px;}
19                 50% {width: 200px;}
20                 100% {width: 600px;}
21             }
22             div:hover
23             {
24                 /* 增加infinite属性标识无限循环 */
25                 /* animation: myMove 2s infinite; */
26                 animation: myMove 2s;
27             }
28         </style>
29     </head>
30     
31     <body>
32         <div></div>
33     </body>
34 </html>

　　输出结果：

　　举例2（使用from/to）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         <style>
11             div
12             {
13                 width: 100px;
14                 height: 100px;
15                 background: red;
16                 position: relative;
17                 animation: myMove 5s infinite;
18                 -webkit-animation: myMove 5s infinite; /*Safari and Chrome*/
19             }
20             @keyframes myMove
21             {
22                 from {left: 0px;}
23                 to {left: 200px;}
24             }
25 
26             @-webkit-keyframes myMove /*Safari and Chrome*/
27             {
28                 from {left: 0px;}
29                 to {left: 200px;}
30             }
31         </style>
32     </head>
33     
34     <body>
35         <div></div>
36     </body>
37 </html>

　　输出结果：

　　举例3（CD图片360度旋转）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10         <style>
11             img {
12                 width: 100px;
13                 height: 100px;
14                 border-radius: 50px;
15             }
16             @keyframes CDTurn
17             {
18                 from {transform: rotate(0deg);}
19                 to {transform: rotate(360deg);}
20             }
21 
22             @-webkit-keyframes CDTurn /*Safari and Chrome*/
23             {
24                 from {transform: rotate(0deg);}
25                 to {transform: rotate(360deg);}
26             }
27             img:hover {
28                 /* infinite属性标识无限循环 */
29                 animation: 3s linear infinite CDTurn;
30             }
31         </style>
32     </head>
33     
34     <body>
35         <img src="dj.jpg" alt="DJ picture.">
36     </body>
37 </html>

　　输出结果：

查看全文

相关阅读:
F. Journey
D. Divide
C. Counting Pair
A. A Big Dinner
E
D -Sale
第十三课历史记录画笔工具
 第十二课文字工具
 第十一课模糊工具、海绵工具、仿制图章工具
 第十课切片工具修复画笔工具修补工具颜色替换工具

原文地址：https://www.cnblogs.com/zyjhandsome/p/9729374.html