Web开发——CSS基础

2021-12-16 02:07:41

参考：

参考：http://css.doyoe.com/
参考：http://www.w3school.com.cn/cssref/index.asp
参考：https://www.w3cschool.cn/css/css-tutorial.html

目录：

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=""，如：
```
 <p style="color:blue">测试文字</p>
```

内部样式表<style>

 <style type="text/css">

     p {color:blue;}

 </style>

 <!--或者写成-->

 <style>

     p {color:blue;}

 </style>

 <body>

     <p>测试文字</p>

 </body>

外部样式表

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

导入@url（"test.css"）

 <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>类>标签>伪类>属性选择器>伪元素>继承>通配符

 <style>

     #name_id {color:blue;}             <!--id方式-->

     .name_class {color:blue;}        　<!--class方式-->

     p {color:blue;}                    <!--element方式-->

 </style>

 <body>

     <p id="name_id" class="name_class">测试文字</p>

 </body>

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

 <!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>

         <!--配置浮动，使得列表从纵向变为横向：float: left;-->

         <style type="text/css">

             ul li.li1 {

                 float: left;

                 width: 40px;

                 background: blue;

                 list-style: none;

                 margin: 10px;

             }

             ul li.li2 {

                 font-size: 20px;

             }

         </style>

     </head>

     <body>

         <ul>

             <li class="li1 li2">A1</li>

             <li class="li1">B1</li>

             <li class="li1">C1</li>

             <li class="li1">D1</li>

             <li class="li1">E1</li>

         </ul>

     </body>

 </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 a:link {color:blue;} a:visited {color:blue;} a:hover {color:red;} a:active {color:yellow;}	选择所有未被访问的链接。	1
:visited	a:visited	选择所有已被访问的链接。	1
:active	a:active {color: red;} p:active {color: yellow;} div:active {color: blue;} <a href="#">百度</a> <p>这是一个段落</p> <div>这是一个div</div>	选择活动链接。	1
:hover	a:hover <style> ul li:hover {　　<!--ul li {}, 表示对ul下面的li元素（包含关系）进行样式配置--> background-color: red; color: #FFF; } </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 <head> <style type="text/css"> div.d1:before { content: "Before content: "; color: red; } div:after { content: " after content."; color: blue; } </style> </head> <body> <div class="d1">Block Element</div> <div class="d2">Block Element</div> <div class="d3">Block Element</div> <div class="d4">Block Element</div> <div class="d5">Block Element</div> </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 <head> <style type="text/css"> input:checked+span {background: red;} input:checked+span:after {content: "---- I am checked, haha."} </style> </head> <body> <form> <input type="radio" name="start"><span>Fanbingbing</span></input> <br /> <input type="radio" name="start"><span>Libingbing</span></input> <br /> <input type="radio" name="start"><span>Hubingbing</span></input> </form> </body>	选择每个被选中的 <input> 元素。	3
:not(selector)	:not(p)，匹配不含有selector选择器的元素 div:not(.d1) {color: red;} <div class="d1">块元素</div> <div class="d2">块元素</div> <div class="d3">块元素</div> <div class="d4">块元素</div> <div class="d5">块元素</div>	选择非 <p> 元素的每个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3

3、一些常用的样式

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

CSS 属性组：

举例说明：

　　举例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>

         <style type="text/css">

             p {

                 white-space: nowrap;

                 overflow: hidden;

                 text-overflow: ellipsis;

             }

         </style>

     </head>

     <body>

         <p>A text paragraph, a text paragraph, a text paragraph, a text paragraph, a text paragraph, a text paragraph, a text paragraph</p>

     </body>

 </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：

 <!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>

             * {

                 margin: 0px;

                 padding: 0px;

             }

             p {

                 color: red;

                 border: 1px solid blue;

                 padding: 10px;

                 margin: 20px;

                 cursor: pointer;        /* 将光标箭头编程小手的样式 */

             }

         </style>

     </head>

     <body>

         <p>这是一个段落<i>这是一个i标签的内容</i>></p>>

     </body>

 </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：

 <!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>

         <!-- background: url("ms_picture.jpg") no-repeat center 10px; 10px是设置背景图片距离顶端的距离 -->

         <style>

             div.box {

                 display: flex;

             }

             div.item {

                 flex-grow: 1;

                 height: 30px;

                 text-align: center;

                 padding-top: 150px;

             }

             div.ms {

                 background: url("ms_picture.jpg") no-repeat center 10px;

                 margin-top: 10px;

                 /* background-size: 100%; */

             }

         </style>

         <!--或者写成：

         <style>

             div.box {

                 display: flex;

             }

             div.item {

                 flex-grow: 1;

                 height: 30px;

                 text-align: center;

                 padding-top: 140px;

             }

             div.ms {

                 background: url("ms_picture.jpg") no-repeat center;

                 margin-top: 10px;

                 background-size: 100px;

             }

         </style>

         -->>

     </head>

     <body>

         <div class="box">

             <div class="item ms">找美食</div>

         </div>

     </body>

 </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>

　　输出结果：

Web开发——CSS基础

7、盒子模型

7.1 盒子模型简介

（1）什么是盒子模型

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

　　举例：

 <!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>

         <!--line-height设置文字行高，后续增加属性-->

         <!--text-align设置文字对齐方式，后续增加属性-->

         <!--width和height代表内容属性-->

         <!--padding内边距属性-->

         <!--margin外边距属性-->

         <!--border边框属性-->

         <style>

             p {

                 width: 150px;

                 height: 40px;

                 line-height: 40px;

                 text-align: center;

                 padding: 20px;

                 margin: 10px 20px 30px 40px;

                 border: 30px solid red;

             }

         </style>

     </head>

     <body>

         <p>测试盒子模型</p>

     </body>

 </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还可以分别设置四个方向的值（左上角、右上角、左下角、右下角，原理相同）

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

　　举例：

 <!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: 10px solid red;等价于以下（三个属性综合）写法：-->

         <!--

             border-width: 10px;

             border-style: solid;

             border-color: red;

         -->

         <!---->

         <style>

             div {

                 width: 100px;

                 height:100px;

                 border: 10px solid red;

             }

         </style>

     </head>

     <body>

         <div></div>

     </body>

 </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>

　　输出结果：

Web开发——CSS基础

border-top-left-radius

定义边框左上角的形状。

border-top-right-radius

定义边框右下角的形状。

box-decoration-break

box-shadow

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

　　举例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>

             h1.h1_class1 {

                 text-align: center;

                 font-size: 50px;

             }

             div.cont {

                 width: 1200px;

                 height:1200px;

                 margin: 0px auto;

             }

             h3 {

                 font-size: 28px;

             }

             p {

                 font-size: 18px;

                 color: #818181;

                 width: 360px;

             }

             li {

                 border-right: 1px solid #ddd;

                 border-bottom: 1px solid #ddd;

                 width: 500px;

                 height: 250px;

             }

             ul {

                 padding-left: 0px;

                 list-style: none;

                 float: left;

             }

             .right_top {

                 border-right: none;

             }

             .right_botton {

                 border-right: none;

             }

             h3{

                 padding-left: 40px;

             }

             p{

                 padding-left: 40px;

             }

         </style>

     </head>

     <body>

         <h1 class="h1_class1">关于我们</h1>

         <div class="cont">

             <ul>

                 <li>

                     <h3>预约方便</h3>

                     <p>关注尚学堂官方微信或拨打预约电话，实时回复，无需预约，确认后2小时之内教师上门授课或指导</p>

                 </li>

                 <li>

                     <h3>预约方便</h3>

                     <p>关注尚学堂官方微信或拨打预约电话，实时回复，无需预约，确认后2小时之内教师上门授课或指导</p>

                 </li>

             </ul>

             <ul>

                 <li class="right_top">

                     <h3>预约方便</h3>

                     <p>关注尚学堂官方微信或拨打预约电话，实时回复，无需预约，确认后2小时之内教师上门授课或指导</p>

                 </li>

                 <li class="right_botton">

                     <h3>预约方便</h3>

                     <p>关注尚学堂官方微信或拨打预约电话，实时回复，无需预约，确认后2小时之内教师上门授课或指导</p>

                 </li>

             </ul>

         </div>

     </body>

 </html>

　　输出结果：略。

（3）margin外边距

　　有以下几个特点：

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

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

　　举例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 type="text/css">

             p.margin {

                 margin: 2cm 4cm 3cm 4cm;

             }

         </style>

     </head>

     <body>

         <p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>

     </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>

             * {

                 margin: 0px;

                 padding: 0px;

             }

             div {

                 width: 100px;

                 height: 200px;

                 background: red;

                 margin: 50px;

                 float: left;

             }

             p {

                 width: 100px;

                 height: 200px;

                 background: green;

                 margin: 80px;

                 float: left;

             }

         </style>

     </head>

     <body>

         <div></div>

         <p></p>

     </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>

         <style>

             * {

                 margin: 0px;

                 padding: 0px;

             }

             div.d1 {

                 width: 100px;

                 height: 200px;

                 background: red;

                 margin: 50px;

                 float: left;

             }

             p {

                 width: 100px;

                 height: 200px;

                 background: green;

                 margin: 50px;

                 float: left;

             }

             div.clear {

                 clear: both;

             }

             div.d2 {

                 width: 300px;

                 height: 100px;

                 background: blue;

                 margin: 50px;

             }

         </style>

     </head>

     <body>

         <div class="d1"></div>

         <p></p>

         <div class="clear"></div>

         <div class="d2"></div>

     </body>

 </html>

　　输出结果：

　　举例4（左右自动对齐的方式）（margin: 0px 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>

             * {

                 margin: 0px;

                 padding: 0px;

             }

             div.d1 {

                 width: 100px;

                 height: 200px;

                 background: red;

                 margin: 90px auto;

             }

         </style>

     </head>

     <body>

         <div class="d1"></div>

     </body>

 </html>

　　输出结果：略。

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

 <!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>

             footer {

                 height: 100px;

                 width: 100%;

                 background: rgba(0, 0, 0, .3);

                 position: fixed;

                 bottom: 0px;

             }

             div.wrap {

                 height: 100px;

                 width: 950px;

                 margin: 0px auto;

                 background: yellow;

             }

             div.dj-logo, div.dj-phone {

                 float: left;

             }

             div.dj-reg {

                 float: right;

             }

             div.clear {

                 clear: both;

             }

             div.dj-logo p{

                 height: 60px;

                 line-height: 60px;

                 background: url("dj.jpg") no-repeat;

                 background-size: 60px;

                 padding-left: 70px;

                 padding-right: 40px;

                 border-right: 1px solid #ddd;

                 font-size: 16px;

                 color: black;

             }

             div.dj-phone p {

                 margin-top: 20px;

                 margin-left: 30px;

             }

             div.dj-phone p i {

                 color: black;

                 font-style: normal;

                 fond-size: 16px;

             }

             div.dj-reg a.reg {

                 display: block;

                 width: 135px;

                 height: 40px;

                 background: orange;

                 border-radius: 5px;

                 line-height: 40px;

                 text-align: center;

                 color: black;

                 fond-size: 18px;

                 margin-top: 20px;

                 margin-bottom: 10px;

             }

             div.dj-reg a.login {

                 margin-left: 10px;

                 color: black;

             }

             a {

                 text-decoration: none;

             }

         </style>

     </head>

     <body>

         <footer>

             <div class="wrap">

                 <div class="dj-logo">

                     <p>年轻人专属的社交网站</p>

                 </div>

                 <div class="dj-phone">

                     <p>

                         <span>客服电话：</span>

                         <i>400-813-1117</i>

                     </p>

                     <p>

                         <span>客服电话：</span>

                         <i>400-813-1117</i>

                     </p>

                 </div>

                 <div class="dj-reg">

                     <a href="#" class="reg">快速注册</a>

                     <a href="#" class="login">已有账号，登录</a>

                 </div>

                 <div class="clear"></div>

             </div>

         </footer>

     </body>

 </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>

　　输出结果：

Web开发——CSS基础

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>

　　输出结果：

Web开发——CSS基础

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>

　　输出结果：

Web开发——CSS基础

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微信订单实例

　　举例：

 <!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>

             header{

                 height: 45px;

                 line-height: 45px;          /* line-height 属性设置行间的距离（行高） */

                 background: #fa486c;

                 color: #fff;

                 position: relative;

                 text-align: center;

             }

             header a {

                 text-decoration: none;

                 position: absolute;

                 left: 10px;

                 color: #fff;

             }

             header span {

                 font-size: 20px;

             }

             .wlxx {

                 display: flex;

             }

             .wl1, .wl2 {

                 height: 100px;

             }

             .wl1 {

                 flex-grow: 2;

                 background:blue;

             }

             .wl2 {

                 flex-grow: 1;

                 background: green;

             }

             .hwxx h1 {

                 font-size: 20px;

                 font-weight: normal;

                 border-left: 2px solid #fa486c;

                 margin-left: 15px;

                 padding-left: 15px;

                 margin-bottom: 15px;

             }

             .wlxx-main {

                 border-top: 1px solid #ddd; padding-left: 15px;

             }

             .wlxx-main p {

                 margin-top: 10px;

             }

             .wlxx-main p span {

                 color: gray;

             }

             .wlxx-main p i {

                 font-style: normal;

             }

             /* 提交订单 */

             .tj a {

                 display: block;

                 text-decoration: none;

                 width: 80%;

                 margin: 0px auto;

                 height: 40px;

                 border: 2px solid #dddd;

                 border-radius: 20px;

                 text-align: center;

                 line-height: 40px;

                 font-size: 18px;

                 color: gray;

                 margin-top: 20px;

             }

             .tj a:hover {

                 background: #fa486c;

                 color: gray;

                 border: 2px solid #fa486c;

             }

         </style>

     </head>

     <body>

         <header>

             <a href="#">&lt;返回</a>

             <span>订单详情</span>

         </header>

         <!-- 物流信息 -->

         <div class="wlxx">

             <div class="wl1">预约成功，背景图片</div>

             <div class="wl2">箭头，背景图片</div>

             <div class="wl1">预约成功，背景图片</div>

             <div class="wl2">箭头，背景图片</div>

             <div class="wl1">预约成功，背景图片</div>

         </div>

         <!-- 货物信息 -->

         <div class="hwxx">

             <h1>货物信息</h1>

             <div class="wlxx-main">

                 <p><span>商品名：</span><i>YSL圣罗兰口红</i></p>

                 <p><span>商品编号：</span><i>YSL圣罗兰口红</i></p>

                 <p><span>商品价格：</span><i>YSL圣罗兰口红</i></p>

                 <p><span>收货地址：</span><i>YSL圣罗兰口红</i></p>

             </div>

         </div>

         <!-- 提交订单 -->

         <div class="tj">

             <a href="#">提交订单</a>

         </div>

         <footer></footer>

     </body>

 </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

　　使用自定义字体举例：

 <style>

     @font-face {

         font-family: myFont;            // 自定义的字体名

         src: url("res/shufa.ttf");      // 字体存放的路径

     }

     p {

         font-family: myFont;

         font-size: 10px;

     }

 </style>

 <body>

     <p>天长地久</p>

 </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>

　　输出结果：

Web开发——CSS基础

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

规定被嵌套元素如何在 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（使用百分比）：

 <!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: 100px;

                 background: red;

             }

             @keyframes myMove {

                 0% {width: 300px;}

                 50% {width: 200px;}

                 100% {width: 600px;}

             }

             div:hover

             {

                 /* 增加infinite属性标识无限循环 */

                 /* animation: myMove 2s infinite; */

                 animation: myMove 2s;

             }

         </style>

     </head>

     <body>

         <div></div>

     </body>

 </html>

　　输出结果：

　　举例2（使用from/to）：

 <!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: 100px;

                 background: red;

                 position: relative;

                 animation: myMove 5s infinite;

                 -webkit-animation: myMove 5s infinite; /*Safari and Chrome*/

             }

             @keyframes myMove

             {

                 from {left: 0px;}

                 to {left: 200px;}

             }

             @-webkit-keyframes myMove /*Safari and Chrome*/

             {

                 from {left: 0px;}

                 to {left: 200px;}

             }

         </style>

     </head>

     <body>

         <div></div>

     </body>

 </html>

　　输出结果：

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

 <!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 {

                 width: 100px;

                 height: 100px;

                 border-radius: 50px;

             }

             @keyframes CDTurn

             {

                 from {transform: rotate(0deg);}

                 to {transform: rotate(360deg);}

             }

             @-webkit-keyframes CDTurn /*Safari and Chrome*/

             {

                 from {transform: rotate(0deg);}

                 to {transform: rotate(360deg);}

             }

             img:hover {

                 /* infinite属性标识无限循环 */

                 animation: 3s linear infinite CDTurn;

             }

         </style>

     </head>

     <body>

         <img src="dj.jpg" alt="DJ picture.">

     </body>

 </html>

　　输出结果：

码农公寓

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 盒子模型简介

7.2 属性介绍

8、弹性/伸缩盒模型

8.1 常用属性

8.2 旧的伸缩盒模型

8.3 可伸缩框属性

8.4 FlexBox微信订单实例

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

9.1 CSS 字体属性（Font）

9.2 内容生成（Generated Content）

9.3 CSS 文本属性（Text）

9.4 CSS 尺寸属性（Dimension）

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

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

10.2 过渡属性（Transition）

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

10.4 CSS3 动画属性（Animation）

相关文章

7.2 属性介绍　　