CSS3

@font-face {
    font-family: kastlerFont;    /* 定义字体的名称 */
    src: url('fonts/kastler.ttf'),
        url('fonts/kastler.eot'),
        url('fonts/kastler.woff'),
        url('fonts/kastler.svg');    /* 引用字体的来源 */
}

p {
    font-family: kastlerFont;    /* 引用字体 */
}

CSS3 文本

CSS3 text-shadow 属性

text-shadow 属性向文本设置阴影。

text-shadow: h-shadow v-shadow blur color;

/*
    h-shadow：必需。水平阴影的位置。允许负值。
    v-shadow：必需。垂直阴影的位置。允许负值。
    blur：可选。模糊的距离。
    color：可选。阴影的颜色。
*/

注：

text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是0。

CSS3 text-overflow 属性

CSS3 text-overflow 属性规定当文本溢出包含元素时发生的事情。

属性值：

clip：修剪文本。
ellipsis：显示省略符号来代表被修剪的文本。
string：使用给定的字符串来代表被修剪的文本。

CSS3 word-wrap 属性

CSS3 word-wrap 属性使长文字能够被折断并换到下一行。

如果一个单词太长而无法容纳在一个区域内，它会向外扩展。

通过 word-wrap 属性，可以强制对文本进行换行，即使这意味着在单词中间将其拆分。

语法：

word-wrap: normal | break-word;

/*
    normal：只在允许的断字点换行（浏览器保持默认处理）。
    break-word：在长单词或URL地址内部进行换行。
*/

CSS3 word-break 属性

word-break 属性规定自动换行的处理方法。

语法：

word-break: normal | break-all | keep-all;

/*
    normal：使用浏览器默认的换行规则
    break-all：允许在单词内换行
    keep-all：只能在半角空格或连字符处换行
*/

CSS3 背景

CSS3 background-size 属性

background-size 属性规定背景图像的尺寸。

属性值：

CSS3 盒子模型

CSS3 border-radius 属性

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

该属性用于向元素添加圆角边框。

border-radius: ;

/*
    该属性可以有 1-4 个值：
        top-left top-right bottom-right bottom-left（顺时针方向，从左上到左下）
        top-left top-right bottom-right（如果省略 bottom-left，则与 top-right 相同）
        top-left top-right（如果省略 bottom-right，则与 top-left 相同）
        top-left（如果省略 top-right，则与 top-left 相同）
*/

border-radius 是以下属性的简写属性：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

实例：

/* 圆 */
div {
    width: 5em;
	height: 5em;
	background: #55ffff;
	border-radius: 50%;
}

/* 1/2 圆 */
div {
	width: 10em;
	height: 5em;
	background: #55ffff;
	border-radius: 5em 5em 0 0;
}

/* 1/4 圆 */
div {
	width: 5em;
	height: 5em;
	background: #55ffff;
	border-radius: 100% 0 0 0;
}

CSS3 box-shadow 属性

box-shadow 属性向框添加一个或多个阴影。

该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

/*
    h-shadow：必需。水平阴影的位置。允许负值。
    v-shadow：必需。垂直阴影的位置。允许负值。
    blur：可选。模糊距离。
    spread：可选。阴影的尺寸。
    color：可选。阴影的颜色。
    inset：可选。将外部阴影（outset）改为内部阴影。
*/

注：

CSS3 box-sizing 属性

box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距（padding）和边框。

默认情况下，元素的宽度（width）和高度（height）计算方式如下：

width（宽度）+ padding（内边距）+ border（边框）= 元素实际宽度
height（高度）+ padding（内边距）+ border（边框）= 元素实际高度

语法：

box-sizing: content-box | border-box;
/*
    content-box：默认值。如果设置一个元素的宽为 100px，那么这个元素的内容区域会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
    border-box：告诉浏览器要设置的边框和内边距的值是包含在 width 内的。也就是说，如果将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区域的实际宽度是 width 减去（border + padding）的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
                注：border-box 不包含 margin。
*/

CSS3 渐变

CSS3 渐变可以显示两种或多种指定颜色之间的平滑过渡。

CSS3 定义了两种渐变类型：

线性渐变（向下/向上/向左/向右/对角线）
径向渐变（由其中心定义）

CSS3 线性渐变

如需创建线性渐变，必须定义至少两个色标。色标是要呈现平滑过渡的颜色。还可以设置起点和方向（或角度）以及渐变效果。

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction 可选的值：

1、预定义的方向

to bottom（默认）
to top
to left
to right
to top left
to top right
to bottom left
to bottom right

2、角度

如果希望对渐变角度做更多的控制，可以定义一个角度，来取代预定义的方向。

color-stop

1、使用多个色标

2、使用透明度

CSS3 渐变还支持透明度。

如需添加透明度，可以使用 rgba() 函数来定义色标。

3、使用百分比改变色标之间的间隔

div {
    background-image: linear-gradient(red 50%, blue 75%, green 100%);
}

CSS3 径向渐变

radial-gradient() 函数用径向渐变创建“图像”。

径向渐变由其中心定义。

如需创建径向渐变，必须定义至少两个色标。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

/*
    shape —— 确定圆的类型
        ellipse（默认）：指定椭圆形的径向渐变
        circle：指定圆形的径向渐变

    size —— 定义渐变的大小
        farthest-corner（默认）：指定径向渐变的半径长度为从圆心到离圆心最远的角
        closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
        closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
        farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边

    position —— 定义渐变的位置
        center（默认）：设置中间为径向渐变圆心的纵坐标值
        top：设置顶部为径向渐变圆心的纵坐标值
        bottom：设置底部为径向渐变圆心的纵坐标值

    start-color, ..., last-color —— 指定渐变的起止颜色
*/

CSS3 2D 转换

CSS3 转换（transforms）允许移动、旋转、缩放和倾斜元素。

2D 依托于二维坐标系：

2D 转换是改变元素在二维平面上的位置和形状的一种技术。

通过使用 CSS3 的 transform 属性，您可以利用以下 2D 转换方法：

translate()
rotate()
scale()
scaleX()
scaleY()
skew()
skewX()
skewY()

注：

2D 转换的中心默认是元素的中心点。
transform-origin 属性可以设置元素转换的中心点。

translate() 方法

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

语法：

transform: translate(X,Y);
/*
    X为正值：右移，X为负值：左移
    Y为正值：下移，Y为负值：上移
*/

注：

translate 对元素位置的移动类似于相对定位，不但移动位置，同时自己原来的位置会被保留下来。
translate(50%,50%) 中的百分比单位是相对于自身元素的百分比。
translate 对行内元素没有效果。

rotate() 方法

rotate() 方法根据给定的角度顺时针或逆时针旋转元素。

语法：

transform: rotate(deg);
/*
    rotate 里的单位是度数（deg），比如：90deg
    正值：顺时针；负值：逆时针
    默认的旋转点是元素的中心点。
*/

注：

CSS3 中坐标轴是相对于物体的，当元素旋转时，坐标轴也跟着旋转。

scale() 方法、scaleX() 方法、scaleY() 方法

scale() 方法

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。

语法：

transform: scale(x,y);
/*
    x：水平方向缩放的倍数
    y：垂直方向缩放的倍数。若省略，同 x
    0~1 缩小，>1 放大
*/

scaleX() 方法

scaleX() 方法增加或减少元素的宽度。

scaleY() 方法

scaleY() 方法增加或减少元素的高度

skew() 方法、skewX() 方法、skewY() 方法

skewX() 方法

skewX() 方法使元素沿 X 轴倾斜给定角度。

skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度。

skew() 方法

skew() 方法使元素沿 X 轴和 Y 轴倾斜给定角度。

2D 转换复合写法

transform:translate() rotate() scale()...;

注：

注意顺序会影响转换的效果，先旋转会修改坐标轴的方向，所以有位移（translate）的时候一定要把位移放在最前面。

CSS3 transform-origin 属性

transform-origin: x y;
/*
    x y 的默认值为中心（50% 50%）
    参数 x 和 y 中间用空格隔开
    x 和 y 的值可以为百分比（%）、方向名词（top、bottom、left、right、center）、像素（px）
*/

CSS3 3D 转换

三维坐标系

x轴：水平向右为正
y轴：垂直向下为正
z轴：垂直屏幕（垂直往外为正，往内为负）

rotateX() 方法、rotateY() 方法、rotateZ() 方法

/* rotateX() 方法使元素绕其 X 轴旋转给定角度 */
transform: rotateX(deg);

/* rotateY() 方法使元素绕其 Y 轴旋转给定角度 */
transform: rotateY(deg);

/* rotateZ() 方法使元素绕其 Z 轴旋转给定角度 */
transform: rotateZ(deg);

注：

rotateX() —— 正手准则
- 左手的拇指指向 x 轴的正方向
- 其余手指的弯曲方向就是该元素沿着 x 轴旋转的正方向
rotateY() —— 左手准则
- 左手的拇指指向 y 轴的正方向
- 其余的手指弯曲方向就是该元素沿着 y 轴旋转的正方向
rotateZ()
- 正数角度表示顺时针旋转，负数表示逆时针旋转

CSS3 过渡

CSS3 过渡允许在给定的时间内平滑地改变属性值。

过渡属性：

transition
transition-property
transition-duration
transition-timing-function
transition-delay

如何使用 CSS3 过渡？

如需创建过渡效果，必须明确两件事：

要添加过渡效果的 CSS 属性
过渡效果的持续时间

注：

当指定的 CSS 属性值发生变化时，将开始过渡效果（可以通过 :hover 伪类选择器或者 HTML DOM 中的 element.style.property = new style 改变 CSS 属性）。
过渡效果通常用在用户将鼠标指针浮动到元素上时。当光标从元素上移开时，它将逐渐变回其原始样式。

CSS3 transition-property 属性

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

语法：

transition-property: none | all | property;
/*
    none：没有属性会获得过渡效果
    all：所有属性都将获得过渡效果（默认值）
    property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔
*/

CSS3 transition-duration 属性

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

transition-duration: time;
/*
    time：规定完成过渡效果需要花费的时间（以秒或毫秒计）。
          默认值是 0，意味着不会有效果。
*/

注：

请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

CSS3 transition-timing-function 属性

transition-timing-function 属性规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

语法：

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
/*
    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 之间的数值
*/

CSS3 transition-delay 属性

transition-delay 属性规定过渡效果何时开始。

transition-delay 属性值以秒或毫秒计。

语法：

transition-delay: time;
/*
    time：规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。默认值为 0。
*/

CSS3 transition 属性

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

注：

请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

语法：

transition: property duration timing-function delay;

实例：

div {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s, height 2s, transform 4s;
}

div:hover {
    width: 300px;
    height: 300px;
    transform: rotate(60deg);
}

CSS3 动画

CSS3 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash。

动画属性：

@keyframes
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation

什么是 CSS3 动画？

动画使元素逐渐从一种样式变为另一种样式。

可以随意更改任意数量的 CSS 属性。

如需使用 CSS3 动画，必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

CSS3 @keyframes 规则

通过 @keyframes 规则可以创建动画。

创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"（等价于 0% 和 100%）。

0% 是动画的开始时间，100% 是动画的结束时间。

注：

为了获得最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。
要使动画生效，必须将动画绑定到某个元素。

语法：

@keyframes animationname {keyframes-selector {css-style;}}
/*
    animationname：必需。定义动画的名称。
    keyframes-selector：必需。动画时长的百分比。
                        合法的值：
                            0%-100%
                            from（与 0% 相同）
                            to（与 100% 相同）
    css-style：必需。一个或多个合法的 css 样式属性。
*/

CSS3 动画属性

CSS3 animation-name 属性

animation-name 属性为 @keyframes 动画规定的名称。

即需要绑定到选择器的 keyframe 的名称。

CSS3 animation-duration 属性

animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。

默认值是 0，意味着没有动画效果。

CSS3 animation-timing-function 属性

animation-timing-function 属性规定动画的速度曲线。

速度曲线用于使变化更为平滑。

属性值与 transition-timing-function 属性相同。

CSS3 animation-delay 属性

animation-delay 属性定义动画何时开始。

animation-delay 属性值以秒或毫秒计。默认值是 0。

注：

允许负值（-2s 使动画马上开始，但跳过 2 秒进入动画，就如同已经播放了 2 秒）。

CSS3 animation-iteration-count 属性

animation-iteration-count 属性定义动画的播放次数。默认值是 1。

语法：

animation-iteration-count: n | infinite;
/*
    n：定义动画播放次数的数值
    infinite：规定动画应该无限次播放
*/

CSS3 animation-direction 属性

animation-direction 属性定义是否应该轮流反向播放动画。

注：

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

语法：

animation-direction: normal | alternate;
/*
    normal：默认值。动画应该正常播放
    alternate：动画应该轮流反向播放（动画会在奇数次数（1、3、5...）正常播放，而在偶数次数（2、4、6...）反向播放）
*/

CSS3 animation-fill-mode 属性

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

语法：

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

CSS3 animation 属性

animation 属性是一个简写属性，用于设置多个动画属性。

注：

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

语法：

animation: name duration timing-function delay iteration-count direction fill-mode;

实例：

@keyframes ani {
	0% {
		background-color: aliceblue;
		transform: translate(0,0);
	}
	25% {
		background-color: antiquewhite;
		transform: translate(400px,0);
	}
	50% {
		background-color: aqua;
		transform: translate(400px,200px);
	}
	75% {
		background-color: aquamarine;
		transform: translate(0,200px);
	}
	100% {
		background-color: aliceblue;
		transform: translate(0,0);
	}
}
			
div.div1 {
	width: 100px;
	height: 100px;
	animation: ani 5s linear 1s infinite alternate both;
}

CSS3 多列

CSS3 多列布局

CSS3 多列布局允许我们轻松定义多列文本，就像报纸那样。

CSS3 多列属性

column-count
column-width
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span

CSS3 column-count 属性

column-count 属性规定元素应该被划分的列数。

语法：

column-count: number | auto;
/*
    number：元素内容将被划分的列数
    auto：由其他属性决定列数，比如“column-width”（默认值）
*/

CSS3 column-width 属性

column-width 属性规定列的宽度。

语法：

column-width: auto | length;
/*
    auto：由浏览器决定列宽（默认值）
    length：规定列的宽度
*/

CSS3 column-gap 属性

column-gap 属性规定列之间的间隔。

语法：

column-gap: length | normal;
/*
    length：把列间的间隔设置为指定的长度
    normal：规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。（默认值）
*/

CSS3 column-rule-style 属性

column-rule-style 属性规定列之间的规则样式。

语法：

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
/*
    none：定义没有规则（默认值）
    hidden：定义隐藏规则
    dotted：定义点状规则
    dashed：定义虚线规则
    solid：定义实线规则
    double：定义双线规则
    groove：定义 3D grooved 规则。该效果取决于宽度和颜色值
    ridge：定义 3D ridged 规则。该效果取决于宽度和颜色值
    inset：定义 3D inset 规则。该效果取决于宽度和颜色值
    outset：定义 3D outset 规则。该效果取决于宽度和颜色值
*/

CSS3 column-rule-width 属性

column-rule-width 属性规定列之间的规则宽度。

语法：

column-rule-width: thin | medium | thick | length;
/*
    thin：定义纤细规则
    medium：定义中等规则（默认值）
    thick：定义宽厚规则
    length：规定规则的宽度。
*/

CSS3 column-rule-color 属性

column-rule-color 属性规定列之间的规则的颜色。

CSS3 column-rule 属性

column-rule 属性是一个简写属性，用于设置所有 column-rule-* 属性。

语法：

column-rule: column-rule-width column-rule-style column-rule-color;

CSS3 column-span 属性

column-span 属性规定元素应该横跨多少列。

语法：

column-span: 1 | all;
/*
    1：元素应横跨一列（默认值）
    all：元素应横跨所有列
*/

CSS3 弹性盒子

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（Flexible Box 或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

CSS3 弹性盒子内容

弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成。

弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注：

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
弹性盒子是可以嵌套的。

父元素（容器）

通过将 display 属性设置为 flex ，flex 容器将可伸缩。

弹性容器的直接子元素会自动成为弹性项目。

flex 容器属性：

flex-direction
flex-warp
flex-flow
justify-content
align-items
align-content

CSS3 flex-direction 属性

flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。

属性值：

row：水平堆叠 flex 项目（从左到右）（默认值）
row-reverse：水平堆叠 flex 项目，但方向相反（从右到左）
column：垂直堆叠 flex 项目（从上到下）
column-reverse：垂直堆叠 flex 项目，但方向相反（从下到上）

主轴和辅轴：

主轴的方向跟子元素堆叠的方向一致。

辅轴垂直于主轴。

row —— 主轴水平方向，左为 start，右为 end。辅轴垂直方向，上为 start。
row-reverse —— 主轴水平方向，右为 start。辅轴垂直方向，上为 start。
column —— 主轴垂直方向，上为 start。辅轴水平方向，左为 start。
column-reverse —— 主轴垂直方向，下为 start。辅轴水平方向，左为 start。

CSS3 flex-wrap 属性

flex-wrap 属性规定是否应该对 flex 项目换行。

语法：

flex-wrap: nowrap | wrap | wrap-reverse;
/*
    nowrap：规定弹性项目不会换行（默认值）
    wrap：规定弹性项目会在需要时换行
    wrap-reverse：规定弹性项目会在需要时换行，以反方向
*/

CSS3 flex-flow 属性

flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。

语法：

flex-flow: flex-direction flex-wrap;

CSS3 justify-content 属性

justify-content 属性设置弹性盒子元素在主轴方向上的对齐方式。

属性值：

flex-start：将 flex 项目沿主轴方向在容器的开头（即主轴的 start 位置）对齐，默认值。
flex-end：将 flex 项目沿主轴方向在容器的末端（即主轴的 end 位置）对齐。
center：将 flex 项目沿主轴方向在容器的中心对齐。
space-between：将 flex 项目平均分布在主轴方向上。即两端对齐。
space-around：将 flex 项目平均分布在主轴方向上，两边留有一半的间隔空间。

CSS3 align-items 属性

align-items 属性设置弹性盒子元素在辅轴方向上的对齐方式。

属性值：

flex-start：将 flex 项目沿辅轴方向在容器的开头（即辅轴的 start 位置）对齐。
flex-end：将 flex 项目沿辅轴反向在容器的末端（即辅轴的 end 位置）对齐。
center：将 flex 项目沿辅轴方向在容器的中心对齐。
baseline：使 flex 项目基线对齐。
stretch：沿辅轴方向拉伸 flex 项目以填充容器（默认值）。

CSS3 align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items，但它不对齐弹性项目，而是对齐弹性线（即设置各个行在辅轴上的对齐方式）。

属性值：

stretch —— 在辅轴方向上，各行将会伸展以占用剩余的空间。默认值。
flex-start —— 在辅轴方向上，各行向弹性容器的起始位置堆叠。
flex-end —— 在辅轴方向上，各行向弹性容器的结束位置堆叠。
center —— 在辅轴方向上，各行向弹性容器的中间位置堆叠。
space-between —— 在辅轴方向上，各行在弹性容器中平均分布。
space-around —— 在辅轴方向上，各行在弹性容器中平均分布，两端保留子元素与子元素之间间距大小一半的距离。

完美的居中

将 justify-content 和 align-items 属性设置为居中（center），就可以实现 flex 项目完美居中。

子元素（项目）

flex 容器的直接子元素会自动成为弹性（flex）项目。

flex 项目属性：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

CSS3 order 属性

order 属性规定 flex 项目的顺序。

order 属性值必须是数字，数值越小排名越靠前。默认值为 0，可以为负数。

order 属性可以使代码中的首个 flex 项目不必在布局中显示为第一项。

CSS3 flex-grow 属性

flex-grow 属性规定弹性子元素的扩展比率（即元素被拉大的比例，按比例分配容器剩余空间）。

默认值为 0：元素不占用剩余空间。

取值为 n（n 为数字）：元素占据剩余空间若干份中的 n 份。

CSS3 flex-shrink 属性

flex-shrink 属性定义弹性子元素的收缩比例（即元素被压缩的比例）。

默认值为1：表示弹性子元素默认等比例压缩。

0 表示不压缩。

也可以取值为其他数字。

CSS3 flex-basis 属性

flex-basis 属性规定 flex 项目的初始长度。即元素在主轴上的默认尺寸，其优先级高于 width 和height 属性。

CSS3 flex 属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

语法：

flex: flex-grow flex-shrink flex-basis;

CSS3 align-self 属性

align-self 属性规定弹性容器内所选项目的对齐方式。

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

属性值：

flex-start：将所选项目沿辅轴方向在容器的开头（即辅轴的 start 位置）对齐。
flex-end：将所选项目沿辅轴反向在容器的末端（即辅轴的 end 位置）对齐。
center：将所选项目沿辅轴方向在容器的中心对齐。
baseline：使所选项目基线对齐。
stretch：沿辅轴方向拉伸所选项目以填充容器。

CSS3 媒体查询

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例如：

视口的宽度和高度
设备的宽度和高度
方向（平板电脑/手机处于横向还是纵向模式）
分辨率

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机提供定制的样式表。

CSS3 媒体查询语法

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

语法：

@media not|only mediatype and (expressions) {
    CSS-Code;
}

针对不同的媒体使用不同的样式表：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="">

如果指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，并遵循正常的级联规则。

only 和 not

not：not 用来排除掉某些特定的设备

only：only 用来指定某种特别的媒体类型

注：

not 和 only 可省略

CSS3 媒体类型

all —— 用于所有媒体类型设备
print —— 用于打印机
screen —— 用于计算机屏幕、平板电脑、智能手机等等
speech —— 用于大声“读出”页面的屏幕阅读器

表达式

表达式用来描述媒体特性。

媒体特性包含特别多的属性，但在实际开发时，我们更多的是使用 min-width 和 max-width 作为边界条件：

min-width —— 显示区域的最小宽度。即当前媒体类型大于或等于指定宽度时，大括号内的样式生效
max-width —— 显示区域的最大宽度。即当前媒体类型小于或等于指定宽度时，大括号内的样式生效

and

and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起。

实例

.div1 {
	margin: 20px auto;
	width: 95%;
	height: 200px;
	background-color: #ffff7f;
}
			
@media screen and (min-width: 576px) {
	.div1 {
		width: 540px;
		height: 200px;
		background-color: #ff00ff;
	}
}
			
@media screen and (min-width: 768px) {
	.div1 {
		width: 720px;
		height: 200px;
		background-color: #aaffff;
	}
}