CSS3的新特性大致有：

选择器的扩展
多列布局Multi-column-Layout
弹性盒模型布局方式
RGBA和透明度
圆角效果(border-radius)
背景属性
渐变效果(linear-gradient、radial-gradient、repeating-linear-gradient、repeating-radial-gradient)
阴影效果(text-shadow、box-shadow)
变形效果(transform)
过渡效果(transition)
动画效果(animation)
开放字体的支持
媒体查询@media与响应式网页设计

选择器的扩展

CSS2.1中的选择器有七种：

id选择器 box1{}
类选择器 .red{}
标签选择器 p{}
后代选择器 div p{}
交集选择器 div.red{}
群组选择器 span,p{}
通配符选择器 *

相对于CSS2，CSS3新增了许多可使用的选择器使得前端开发人员在选择页面元素时更加灵活。新增的选择器包含如下几个

层次选择器
伪类选择器
伪元素选择器
属性选择器

新增的层次选择器

选择器	类型	描述
E>F	子代选择器	选择匹配的F元素，且匹配的F元素属于E元素的直系子元素lat
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

新增伪类选择器

CSS2.1中只能给a标签添加伪类选择器::link{},:hover{},:visited{},:active{}

在CSS3中，:hover{}能应用到任何元素，CSS3还添加了其他伪类选择器

选择器	类型	描述
E:focus{}	用户行为伪类选择器	选择匹配的E元素，而且匹配元素获取焦点时
E:target	目标伪类选择器	选择匹配E的所有元素，且匹配元素被相关URL指向
E:checked	选中状态伪类选择器	匹配选中的复选按钮或者单选按钮表单元素
E:enabled	启用状态伪类选择器	匹配所有启用的表单元素
E:disabled	不可用状态伪类选择器	匹配所有禁用的表单元素
E:first-child	结构伪类选择器	匹配父元素中的第一个子元素E，与E:nth-child(1)相等
E:last:child	结构伪类选择器	匹配父元素中最后一个子元素E，与E:nth-last-child(1)相等
E:nth-child(n)	结构伪类选择器	匹配父元素中第n个子元素E
E:nth-last-child(n)	结构伪类选择器	匹配父元素中倒数第n个子元素E
E:first-of-type	结构伪类选择器	匹配父元素中指定类型的第一个子元素E
E:last-of-type	结构伪类选择器	匹配父元素中指定类型的最后一个子元素E
E:nth-of-type(n)	结构伪类选择器	匹配父元素中指定类型的第n个子元素E
E:only-child	结构伪类选择器	匹配父元素内只包含一个指定子元素E
E:only-of-type	结构伪类选择器	匹配父元素内指定类型E且只包含一个的子元素
E:empty	结构伪类选择器	匹配没有子元素的元素，且该元素不包含任何文本节点
E:not(F)	结构伪类选择器	匹配不包含F选择器，且类型为E的元素

新增伪元素选择器

选择器	类型	描述
E::before	伪元素选择器	在E元素内部的前面插入一个子元素
E::after	伪元素选择器	在E元素内部的后面插入一个子元素
E::first-letter	伪元素选择器	匹配E元素内的第一个字母
E::first-line	伪元素选择器	匹配E元素内的第一行文本
E::selection	伪元素选择器	用于设置浏览器中选中文本后的背景色与前景色

伪元素和元素的区别：

无法通过JS获取DOM
无法通过浏览器开发者工具直接查看
伪元素默认时inline

使用伪元素时注意事项

使用伪元素::before和::after必须设置content
使用::before和::after设置背景图，必须使用display设置为块元素
使用::before和::after设置为块元素时，需要再次设置verical-align:middle

新增属性选择器

选择器	类型	描述
[attribute]	属性选择器	用于选取带有指定属性的每个元素。
[attribute=value]	属性选择器	用于选取带有指定属性和值的每个元素。
[attribute~=value]	属性选择器	用于选取属性值中包含指定词汇的每个元素。
[attribute｜=value]	属性选择器	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	属性选择器	匹配属性值以指定值开头的每个元素。
[attribute$=value]	属性选择器	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	属性选择器	匹配属性值中包含指定值的每个元素。

多列布局Multi-column-Layout

column属性的相关用法：

语法及兼容性

属性名	含义	可取值	说明
`column-count`	列数目	-	-
`column-width`	每列宽度	-	不一定会使用，浏览器将会根据`column-count`及`column-width`作自适应计算
`column-rule`	列分割线的样式	-	不占用真实空间，设置的方式跟`border`一致，可拆分为`column-rule-width`、`column-rule-style`、`column-rule-color`
`column-gap`	各列之间的间隙宽度	-	`column-gap`将占用真实的空间大小
`column-span`	允许一个元素的宽度跨越多列	`none` 、`all`	-

除了上述的几个常用的属性之外，还有

column-fill属性，此属性用于标识分列的高度是否统一。不过博主在Chrome41上实验时貌似还不支持。
break-before、break-after、break-inside属性，这三个属性是用于标识分列之间的行为的。这三个属性目前来说并不常用。

E9及其以下的浏览器是不支持的。而且column目前并不完全支持W3C的标准语法，需要针对不同的浏览器内核添加不同的前缀。（下面的示例中将默认使用-webkit-前缀）

示例

<style>
    div {
        -webkit-column-count: 3;
        -webkit-column-width: 100px;
        -webkit-column-rule: 10px solid red;
        -webkit-column-gap: 20px;
    }
</style>
<div>
    blablabla.....
</div>

注意：其实column-width并不是必须的，浏览器会自动根据column-count和column-width计算出自适应的布局。上面的代码中我们设置column-width为100px，column-count为3列，得到的结果虽然是分成了3列，但是每一列的宽度并不是100px。

我们再来看看column-span属性。此属性目前只能有两个可取值：none或者all，标识某一元素要么不进行跨列要么就跨了所有的列。

简化语法

column-count及column-width属性可以合并起来使用，如下

<style>
div {
    -webkit-columns: 3 15em
}
</style>
<div>
    blablabla......
</div>

其中columns: 3 15em与下面的写法是等效的，

div {
    -webkit-column-count: 3;
    -webkit-column-width: 15em;
}

弹性盒模型布局方式

CSS3引入了弹性盒模型布局方式，该布局方式是是CSS3规范中提出的一种新的布局方案。该布局方案提供了一种更加高效简单的方式来处理容器中的元素布局、对齐、空间分配等操作，即使容器中的元素尺寸未知（或者尺寸大小是动态的）也能工作得很好。目前CSS3提出的此种布局方式也被各大主流浏览器所支持。

FlexBox基本原理

在弹性盒模型布局中，需要事先指定一个容器，后续的所有布局操作都是基于此容器来定义的。其核心是容器会根据布局的需要（动态的）调整其中所包含的子元素（即布局条目）的尺寸、顺序来填充容器的所有可用空间。

当容器的尺寸由于屏幕大小（或者浏览器窗口尺寸）发生变化时，其中包含的布局条目也会自动地进行调整。举个例子，当容器尺寸增大时，包含的条目将会自动拉伸以沾满多余的空白空间；当容器尺寸变小时，条目会自动收缩以适应容器的尺寸防止移除容器的范围。

FlexBox相关概念

它包含如下几个概念：

flex container，即所谓的容器（或者称之为弹性盒、flex容器）。注意这里说的容器并不是单纯的dom元素所指代的容器，而是特指设置了弹性盒布局的dom元素。
flex item，即所谓的条目（或者称之为flex条目）。这里的条目其实就是容器的子元素。比如ul元素为一个flex容器，那么其内部包含的li元素就是flex条目。大部分时候，不同的弹性盒布局真正产生变化的其实就是条目的布局行为发生了变化。
main axis和cross axis，即所谓的主轴和交叉轴（有的翻译文章也称之为侧轴）。这两个属性定义flex布局方向。需要注意的是，主轴和交叉轴并不是固定的，开发人员完全自定义主轴和交叉轴的方向。
1. 在使用flex布局时，一般我们需要首先明确主轴的方向，然后交叉轴的方向也会随之确定下来。因为交叉轴的方向始终是与主轴的方向是垂直的。
2. flex容器中flex条目可以根据布局需要排列成单行或者多行。
3. 主轴main axis的作用是确定每一行上flex条目的排列方向。
4. （当flex条目成多行排列时）交叉轴cross axis的作用是确定行与行之间的排列方向。
main start和main end，即所谓的主轴起点和主轴终点。
1. 明确主轴的方向后（如上所述，不管是主轴还是交叉轴其实只有两种方向，即水平或者垂直），还需要确定他们各自的排列方向。
2. 假如已经明确主轴的方向是水平的，那么其排列方向仍然会有两种可选，一种是从左到右的排列方向（flex条目从左到右依次堆放），另一种是从右到左排列方向（flex条目从右到左依次堆放）。
3. 主轴起点在左主轴终点在右即为从左到右的排列方向。（如上图所示）
4. 主轴起点在右主轴终点在左即为从右到左的排列方向。
cross start和cross end，即所谓的交叉轴起点和交叉轴终点。
1. 跟主轴起点和主轴终点的含义类似，交叉轴起点和交叉轴终点明确了行与行之间的排列顺序。
2. 假如已经明确交叉轴的方向是垂直的，那么其排列方向仍然将会有两种可选，一种是从上到下的排列方向（第二行在第一行的下方），另一种是从下到上的排列方向（第二行在第一行的上方）。
所以，在flex容器进行布局时，在每一行中会把其中的flex条目从主轴起始位置开始，依次排列到主轴结束位置。当flex容器中存在多行时，会把每一行从交叉轴起始位置开始，依次排列到交叉轴结束位置。
main size和cross size，即所谓的主轴尺寸和交叉轴尺寸。对应dom元素在主轴和交叉轴上的大小。
1. 如果主轴方向是水平的（那么交叉轴方向肯定是垂直的），此时主轴尺寸即是dom元素（flex容器）的宽度属性，交叉轴尺寸即是dom元素（flex容器）的高度属性。
2. 如果主轴方向是垂直的，那么主轴尺寸和交叉轴尺寸对应的dom元素宽高属性与之前相反。

FlexBox新旧语法

flex布局先后有两种语法，一种是W3C于2009年发布的旧语法，另一种是W3C最新发布的新语法。

旧语法中，所有的flex属性都以box打头，flex设置为display: box

新语法中，所有的flex属性都以flex打头，flex设置为display: flex。

其中新旧语法中间还有存在一种非官方的过渡语法规范，flex设置为display: flexbox

顺便提一句，关于新旧语法在实际使用时，肯定是推荐使用新语法的，虽然新语法的浏览器支持性不如旧语法，但是毕竟是旧的语法，迟早是要淘汰的，而且新语法的表现也更加一致。

FlexBox属性详解

问题引导

在详细阐述各个属性之前，我们先来抛出一个比较常见的布局问题。问题是这样的，现在有一个无序列表（ul元素），其包含了6个列表项（li元素），如何做可以让列表项（li元素）自适应父容器的尺寸？换句话说，当父容器尺寸足够大时，所有的li元素平铺成一行；当父容器的尺寸减小时，li元素自动换行。

大家都能想到的一种常规做法应该就是给li元素设置浮动。不过这里我们将使用flex布局来实现这种布局需求。html和css代码如下，

<ul class="flex-container">
  <li class="flex-item">1</li> 
  <li class="flex-item">2</li> 
  <li class="flex-item">3</li> 
  <li class="flex-item">4</li> 
  <li class="flex-item">5</li> 
  <li class="flex-item">6</li>  
</ul>

.flex-container { 
   list-style: none; 
   display: flex; 
   flex-direction: row; 
   flex-wrap: wrap; 
 } 
.flex-item { 
   margin: 5px; 
   width: 300px; 
   height: 300px; 
   text-align: center; 
   line-height: 300px; 
   background-color: gold; 
}

`dispalay: flex`

要想使用弹性盒布局必须事先指定一个容器，这个容器就是所谓的flex容器。那么如何指定flex容器呢？很简单，将其display属性设置为flex即可。如下

.flex-container {
   dispaly: flex
}

注意：如果需要在内联场景中使用flex布局，需要设置dispaly: inline-flex。

以下几种属性在flex布局中是不起作用的：

浮动元素float
清除浮动clear
CSS3多列布局columns-*
垂直居中vertical-align
首行首字符选择伪类::first-line;::first-letter

`flex-direction`

flex-direction属性的作用是设置主轴方向。我们之前有说过，一旦主轴方向确定，那么连带的交叉轴的方向也会确定下来。这样就确定了flex条目基本的排列方式。

可选值	含义	备注
row	横向从左到右排列	即左对齐。此为默认值
row-severse	反转横向排列（从右到左拍立）	即右对齐
column	纵向排列（从上到下排列	即设置主轴方向为垂直方向
column-severse	反转纵向排列（从下到上排列)	主轴方向为垂直方向，但是越是后面的flex条目反而在上方

`flex-wrap`

flex-wrap属性用于设置当所有的flex条目的尺寸之和超过flex容器的主轴尺寸时应该采取的行为。这是什么意思呢？

在默认情况下，flex容器中的flex条目会尽量的在一行上占满flex容器的空间。当主轴尺寸大于所有flex条目尺寸之和时，这时并没有什么问题。但是，当主轴尺寸小于所有flex条目尺寸之和时，此时就会出现flex条目之间相互重叠或者换行的情况。所以flex-wrap属性就是专门用来处理这种情况的。

flex-wrap的具体用法，如下表

可选值	含义	备注
nowrap	容器中的条目只占满容器在主轴方向上的一行，此时可能出现条目互相重叠或超出容器范围的现象	此值为默认值
wrap	当容器中的条目超出主轴方向上的一行时，会把条目排列到下一行。而下一行的位置与交叉轴的方向一致	交叉轴的存在感就是在此
wrap-severse	与`wrap`的含义类似，不同的是下一行的位置与交叉轴的方向相反。

`flex-flow`

之前说的两个属性flex-direction和flex-wrap，从某种意义上来说就是设置flex布局的主轴和交叉轴。一旦flex布局的主轴和交叉轴确定下来，基本上整个布局中flex条目的排列方式我们就可以自行脑补出来了。

而flex-flow属性其实就是flex-direction和flex-wrap的复合属性。所以下面两段代码的效果是一致的。

.flex-container {
   flex-direction: row;
   flex-wrap: wrap
}

.flex-contariner {
   flex-flow: row wrap;
}

`order`

前面说的几个属性其实都是针对flex容器的设置。而order属性是针对flex条目的。它的作用是自定义flex容器中条目的顺序。其用法示例如下

.flex-item: last-child {
  order: -1
}

上面的css代码，将导致最后一个li元素反而在第一个展示

order用法如下：

order: <integer>

用整数来定义排列顺序，数值小的排列在前面，默认值为0，且可以设置为负数

flex条目的弹性设置

弹性盒模型的真正牛逼的地方在于flex容器中的flex条目的尺寸是弹性的。这是啥意思呢？个人觉得它包含下面的几层含义

主轴尺寸不够大时，使用flex-wrap可以使flex条目实现换行
主轴尺寸不够大时，还可以设置flex条目缩小
主轴足够大时，还可以设置flex条目扩大

这里我们把重心放在后两点上，即flex容器可以根据本身尺寸的大小来动态地调整flex条目的尺寸。

flex条目尺寸的弹性由三个CSS属性来决定，分别是flex-base、flex-grow和flex-shrink。它们的相关说明如下

属性	可选值	默认值	作用对象	含义	备注
flex-base	`<length>`, `<percentage>`, `auto`	`auto` ，当设置为`auto`时，则实际使用的值是主轴尺寸属性的值。若主轴尺寸也是`auto`，那么使用的值由条目内容的尺寸来确定。	flex条目	设置弹性条目的初始主轴尺寸	这里的初始值表示flex容器调整之前flex条目尺寸的初始值。此属性跟`width`等属性的设置模式是一致的
flex-grow	`<integer>`	1	flex条目	当容器有多余的空间时，这些空间在不同条目之间的分配比例	用于设置flex条目的扩展因子，不能取负值
flex-shrink	`<integer>`	1	flex条目	当容器的空间不足时，各个条目尺寸缩小的比例	此属性的作用与`flex-grow`相反

`flex-grow`

当主轴尺寸足够大时，flex条目在容器内一行就全部排列完了，此时容器的空间还有剩余，那么可用flex-grow扩展flex条目。举个例子，一个容器中有3个flex条目，其flex-grow属性分别如下

.flex-item:nth-child(1) {
    flex-grow: 1;
}
.flex-item:nth-child(2) {
    flex-grow: 2;
}
.flex-item:nth-child(3) {
    flex-grow: 3;
}

同时，flex容器的宽度是800px，每个条目的宽度为200px，所以容器还将剩余200px。由于条目都设置了flex-grow属性，那么此三个条目将按比例分配容器的剩余空间。第一个条目将得到200 1/6 = 33px左右，第二个条目将得到200 2/6 = 66px，第三个条目将得到200 * 3/6 = 99px左右。

`flex-shrink`

flex-shrink在使用上类似flex-grow，不过它使用于设置当主轴尺寸不够大时缩小flex条目。同样的，我们来举个例子，一个容器中有3个flex条目，每个felx条目的尺寸为200px，容器的尺寸为500px。很明显此时容器尺寸已经放不下其中三个flex条目了。我们对每个flex条目设置flex-shrink属性，

.flex-item:nth-child(1) {
    flex-shrink: 1;
}
.flex-item:nth-child(2) {
    flex-shrink: 2;
}
.flex-item:nth-child(3) {
    flex-shrink: 3;
}

如果我们希望flex容器能够刚刚好将三个flex条目放下，我们需要缩小的尺寸为600-500 = 100px。接下来三个条目将根据flex-shrink属性按比例的分摊需要缩小的尺寸，即分别为100 1/6 = 16.6px，100 2/6 = 33.3px，100 * 3/6 = 50px。所以三个flex条目最终的尺寸为200 - 16.6 = 183.4px，200 - 33.3 = 166.7px，200 - 50 = 150px。

<style>
.flex-container {
    width: 999px;
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
}
.flex-item {
    width: 300px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}
</style>
<ul class="flex-container">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
</ul>

这里容器中有4个flex条目，每个条目的宽度为300px，但是容器的尺寸只有999px，明显是不足以放下所有的flex条目的。此时前三个条目将堆放在第一行，第4个条目将单独的被堆放在第二行。此时第一行将会多出99px的空余空间，这99px的空余空间将会平均应用到第一行的三个条目上；第二行因为只有一个条目，此时这个条目将会直接占用剩余的699px。

flex复合属性

它的语法如下： flex: none | auto | [flex-grow] | [flex-shrink] | [flex-base]

其中none的含义为：0 0 auto, 即flex-grow: 0，flex-shrink: 0， flex-basis: auto。
其中auto的含义为：1 1 auto, 即flex-grow: 1，flex-shrink: 1， flex-basis: auto。

当flex-basis被省略时，其值为0%

flex条目对齐

当flex容器中flex条目的尺寸和排列都确定下来之后，我们还可以设置这些flex条目在容器中的对齐方式。

目前有三种对齐方式。

基于`margin: auto`对齐

第一种对齐方式是使用空白边，即margin: auto。在使用自动空白边时，flex容器中额外的空白空间将会由被声明为auto的空白边占据。

基于主轴对齐

第二种对齐方式是基于主轴方向上的对齐策略。可以通过justify-content属性来进行设置。借助此属性，我们可以调整flex条目在主轴方向上的对齐策略。

这种对齐方式的调整发生在修改条目的弹性尺寸和处理自动空白边之后。当容器中的一行中的条目没有弹性尺寸或是已经达到了它们的最大尺寸时，如果此时在这一行上还有额外的空白空间，我们可以使用justify-content来分配这些空白空间。该属性还可以控制当条目超出行的范围时的对齐方式。

我们来看下justify-content属性的基本用法，（注意，justify-content用于设置flex容器）

可选值	含义
`flex-start`	条目集中于该行的起始位置。第一个条目与其所在行在主轴起始方向上的边界保持对齐，其余的条目按照顺序依次排列。
`flex-end`	条目集中于该行的结束方向。最后一个条目与其所在行在主轴结束方向上的边界保持对齐，其余的条目按照顺序依次排列。
`center`	条目集中于该行的中央。条目都往该行的中央排列，在主轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则条目会在两个方向上超出同样的空间。
`space-between`	第一个条目与其所在行在主轴起始方向上的边界保持对齐，最后一个条目与其所在行在主轴结束方向上的边界保持对齐。空白空间在条目之间平均分配，使得相邻条目之间的空白尺寸相同。
`space-around`	类似于`space-between`，不同的是第一个条目和最后一个条目与该行的边界之间同样存在空白空间，该空白空间的尺寸是条目之间的空白空间的尺寸的一半。

基于交叉轴对齐

第三种对齐方式是基于交叉轴方向上的对齐策略。此种方式中，我们有两个属性可以做相关设置，它们分别是align-items和align-self。其中前者是用来设置flex容器的，后者是用来设置flex条目的，这两个属性的作用对象是不同的。在某些场景下，我们可以对flex条目设置align-self来复写flex容器指定的对齐方式。

我们来看看align-items的基本用法，

可选值	含义
`flex-start`	条目与其所在行在交叉轴起始方向上的边界保持对齐。
`flex-end`	条目与其所在行在交叉轴结束方向上的边界保持对齐。
`center`	条目的空白边盒子（margin box）在交叉轴上居中。如果交叉轴尺寸小于条目的尺寸，则条目会在两个方向上超出相同大小的空间。
`baseline`	条目在基准线上保持对齐。在所有条目中，基准线与交叉轴起始方向上的边界距离最大的条目，它与所在行在交叉轴方向上的边界保持对齐。
`stretch`	如果条目的交叉轴尺寸的计算值是`auto`，则其实际使用的值会使得条目在交叉轴方向上尽可能地占满。

align-self的属性基本与align-items一致（用法和含义基本都一样）。不过align-self除了align-items属性可选值之外，还可以设置为auto。当设置为auto时，其值是父节点的属性align-items的值,如果该节点没有父节点，则为stretch。

flex行的对齐

前面说完了flex容器中flex条目的对齐方式。这里我们再来说一下flex行的对齐。什么叫flex行？W3C官方文档中提到了一个名词，叫做Flex Lines。

那么什么叫Flex Lines呢？说的直白点就是多行flex布局时，主轴方向上的每一行就是Flex Lines。

举个例子，

<div id="flex">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

#flex {
    display: flex;
    flex-flow: row wrap;
    width: 300px;
}
.item {
    width: 80px;
}

很明显，上述代码生成的flex容器一行肯定堆放不下所有flex条目的。又因为设置了flex-wrap: wrap，所以其在主轴方向上会发生换行。

此flex布局将分为两行，每一行就是所谓的Flex Lines。

如果一个flex布局容器中不止一行，我们同样可以对行与行之间的对齐方式进行设置。为这一设置提供支持的属性就是align-content。其实此属性的作用和justify-content属性很相似，只不过justify-content是用于在主轴方向上对齐行内的flex条目，而align-content是用于设置行与行之间的对齐策略。

align-content详细的用法如下表，

可选值	含义
`flex-start`	行集中于容器的交叉轴起始位置。第一行与容器在交叉轴起始方向上的边界保持对齐，其余行按照顺序依次排列。
`flex-end`	行集中于容器的交叉轴结束位置。第一行与容器在交叉轴结束方向上的边界保持对齐，其余行按照顺序依次排列。
`center`	行集中于容器的中央。行都往容器的中央排列，在交叉轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则行会在两个方向上超出同样的空间。
`space-between`	行在容器中均匀分布。第一行与容器在交叉轴起始方向上的边界保持对齐，最后一行与容器在交叉轴结束方向上的边界保持对齐。空白空间在行之间平均分配，使得相邻行之间的空白尺寸相同。
`space-around`	类似于`space-between`，不同的是第一行条目和最后一个行目与容器行的边界之间同样存在空白空间，而该空白空间的尺寸是行目之间的空白空间的尺寸的一半。
`stretch`	伸展行来占满剩余的空间。多余的空间在行之间平均分配，使得每一行的交叉轴尺寸变大。

RGBA和透明度

rgba中的r代表红色，g代表绿色，b代表蓝色，三种颜色都可以是正整数或百分比。a代表Alpha透明度，取值在0～1之间。 .box { background: rgba(255, 0, 0, 0.5) }

rgba与opacity之间的区别：

rgba和opacity都能实现透明效果最大的不同在于opacity作用于元素以及元素内的所有内容，而rgba只能作用在元素的颜色或背景色。子元素会继承父元素的opacity属性，而rgba不能被继承

圆角

语法如下：

border-radius: <length>{1,4} | % / <length>{1,4} | %

即可以设置：

1～4个长度值
1～4个百分比
可以设置两组值，用/连接

border-radius跟border属性时很相似的，它是一个复合属性，可分为左上、右上、左下、右下共四个可赋值项。前面说过，border-radius可以赋值1～4个值，

设置1个值时，四个方向都使用同一个值
设置2个值时，左上和右下使用第一个值，右上和左下使用第二个值
设置3个值时，左上使用第一个值，右上和左下使用第二个值，右下使用第三个值
设置4个值时，分别对应左上、右上、左下、右下的顺序进行赋值

当我们使用／设置圆角时，第一组属性为水平半径的赋值，第二组值为垂直半径赋值。且赋值的方向规律与前述一致。

除此之外，CSS3还支持对元素的某个角进行赋值，

border-top-left-radius，左上角
border-top-right-radius，右上角
border-bottom-right-radius，右下角
border-bottom-left-radius，左下角

这四个属性都可以设置1～2个值，如下

.test {
    border-top-left-radius: 10px 20px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

若设置一个值，则表示水平半径和垂直半径相同
若设置两个值，则表示分别按顺序设置水平、垂直半径

兼容性：虽然目前各大主流现代浏览器都支持border-radius属性，不过在具体的实现细节上可能会有所差别，针对不同的浏览器需要添加各自的浏览器兼容前缀

新增背景属性

已有属性：

background-color: 规定要使用的背景色
background-position: 规定背景图像的位置
background-repeat: 规定如何重复背景图像
background-attachment: 规定背景图像是否固定或者随着页面的其余部分滚动
background-image: 规定要使用的背景图像

新增属性：

background-size: 规定背景图像的尺寸
background-clip: 规定背景的绘制区域
background-origin: 规定背景图像的定位区域

已有属性

`background-color`

其语法如下

background-color: <color> | transparent

background-color用于设置元素的背景颜色，其值可以是一个颜色值（可以为多种颜色的表达，比如RGB、十六进制、特定值’red’等）或者为transparent。默认值为transparent，意为透明，即啥颜色也不设置。

`background-position`

其语法如下

background-position: <percentage> || <length> || [left|center|right][,top|center|bottom]

background-position用于设置背景图片的位置参数。它有多种赋值模式，可以形如(0,0)、(0%,0%)，或者是使用’left’，’top’，’center’，’right’，’bottom’等字段进行设置。

在设置background-position属性时，脑子里需要有这样一个概念。以左上角(0,0)的位置为坐标系的原点，向右延伸为X轴，向下延伸为Y轴。所以形如(0,0)、(0%,0%)的赋值其实是表明了背景图像距离坐标系原点的距离。而’left’意为(0%, Y)，’right’意为(100%, Y)，’center’意为(50%, Y)，’top’和’bottom’的含义与其相似。

`background-repeat`

其语法如下

background-repeat: repeat || repeat-x || repeat-y || no-repeat

background-repeat用于设置background-image（背景图片）在元素中的铺放风格的，其默认值为repeat，意为图片沿着右方（X轴方向）和下方（Y轴）同时平铺。

所以，repeat-x意为只沿着X轴方向平铺，repeat-y意为只沿着Y轴方向平铺，no-repeat意为不作任何平铺。

`background-attachment`

其语法如下

background-attachment: scroll || fixed

background-attachment用于设置背景图像是否固定活着随着页面的滚动而滚动。其默认值scroll，表示背景图片会随着页面滚动而滚动；取值为fixed时，背景图片固定不动。

`background-image`

其语法如下

background-image: none || <url>

background-image用于设置元素的背景图片，其默认值为none，<url>为背景图片的地址，可用绝对地址亦可用相对地址。

新增属性

`background-size`

其语法如下

background-size: auto || <length> || <percentage> || cover || contain

background-size属性用于设置背景的大小。其中，auto就是使用图片的原生宽高，<length>和<percentage>就是设置一个具体的值。这三个属性没什么还说的。下面说下cover和contain这两个赋值的含义。

cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

额外补充一点，当使用<length>或者<percentage>进行赋值时，我们可以只赋一个值，比如background-size: 100px，此时相当于background-size: 100px 100px。

兼容性：IE9+、Firefox 4+、Opera、Chrome以及Safari 5+支持background-size属性，所以在实际使用background-size属性时针对不同浏览器需要带上其前缀。

`background-clip`

其语法如下

background-clip ： border-box || padding-box || content-box

background-clip属性用于设置背景的裁剪区域，即控制元素的背景实际显示区域的大小。

border-box，此为默认值，元素背景区域包含border区域及其之内的padding和content区域。
padding-box，元素背景区域包含padding及其之内的content区域。
content-box，元素背景区域仅包含content区域。

兼容性：IE9+、Firefox、Opera、Chrome以及Safari支持background-clip属性，所以在实际使用background-clip属性时针对不同浏览器需要带上其前缀。

`background-origin`

其语法如下

background-origin: padding-box || border-box || content-box

background-origin属性用于设置背景的background-position属性相对什么来定位。

padding-box，此为默认值，相对于内边距（padding的外边沿）来定位。
border-box，相对于边框（border的外边沿）来定位。
content-box，相对于内容（content的外边沿）来定位。

兼容性：IE9+、Firefox 4+、Opera、Chrome以及Safari 5+支持background-origin属性，所以在实际使用background-origin属性时针对不同浏览器需要带上其前缀。

渐变效果

CSS3支持的渐变可分为线性渐变（linear-gradient）、径向渐变（radial-gradient）、重复线性渐变（repeating-linear-gradient）和重复径向渐变（repeating-radial-gradient）

兼容性

由于W3C官方组织尚未对渐变这一块完全定稿，虽然主流的现代浏览器基本都已经对渐变提供了支持，但是具体的实现细节可能不太一致，需要针对不同的浏览器内核添加私有前缀。

线性渐变

什么叫线性渐变？

颜色沿着一条直线过渡，比如从左侧到右侧、从右侧到左右、从顶部到底部、从底部到顶部、从左上角到右下角等等，简单来说渐变方向是一条直线，此直线可以沿着任意轴。如果有过PS、flash等软件或者设计经验的话，应该不难理解。

W3C规定的线性渐变语法如下

background-image: linear-gradient(direction, color-start, ..., color-end);

即，linear-gradient包含如下几个基本参数，

第一个参数为渐变方向
第二个参数为渐变起点
第三个参数为渐变终点

同时，你还可以在渐变起点和渐变终点中间插入任意多个色标来达到多重颜色渐变的目的。

渐变方向

关于渐变方向，我们可以设置为一些常用关键词，比如top、right、bottom、left，以及这四个基本关键词的任意相邻方向的两两组合，比如top left、top right等等。

渐变方向除了可以设置为常用关键词之外，我们还可以设置一个角度值，即0deg～360deg。这个角度值也可以为负值。正负值的区别在于渐变方向相对于默认值的方向是不同的。

⚠️注意，此参数可以省略。当渐变方向省略时，W3C规定的渐变方向默认值为top，即渐变方向从上到下。

渐变起点

线性渐变的渐变起点其实是一个颜色值（后面说到的径向渐变也有渐变起点的概念，但是此起点非彼起点），而且还可以包含一个长度值，此长度值可省略。长度值存在的含义是，可以对渐变起点进行偏移。

渐变终点

渐变终点为一个颜色值，也可以包含一个长度值，此长度值可省略。长度值存在的含义是，可以对渐变终点进行偏移。

重复线性渐变

我们可以使用repeating-linear-gradient来达到重复线性渐变的目的。所谓的重复线性渐变，就是沿着线性渐变线的两个方向上无线延伸重复。在这里需要注意一点就是，我们在设置渐变色标时应该同时给出其偏移量，否则无法实现重复渐变的效果。

让我们来看个简单的例子

.div1 {
    background-image: -webkit-repeating-linear-gradient(top left, pink 50px, green 100px);
}

径向渐变

什么叫径向渐变？

不同于线性渐变，所谓的径向渐变其实就是圆形或者椭圆形渐变，其颜色渐变的轨迹不再是沿着一条直线，而是从一个点开始，向所有方向进行辐射。相对线性渐变要稍微复杂一些。

W3C规定的径向渐变标准语法如下

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

所以，radial-gradient将包含如下几个参数，

第一个参数为渐变起点
第二个参数为渐变形状和渐变大小
第三个参数为渐变起点色标
第四个参数为渐变终点色标

我们可以在渐变起点色标和渐变终点色标之间插入任意多个渐变中间色标。

渐变起点

所谓渐变起点即是径向渐变的的开始坐标。此参数可以使用常用的位置关键词，比如top、right、bottom、left、center，或者是上右下左的两两相邻组合。除此之外还可以赋值为类似background-position属性的值，即使用长度坐标或者百分比坐标。

此参数的默认值为center，且可以省略。

渐变形状

shape定义了渐变形状。径向渐变只有两种渐变形状，一种是椭圆（ellipse）一种是圆形（circle）。其实圆形径向渐变是一种特殊的椭圆径向渐变，因为此时径向渐变的主半径（major-radius）和次半径（minor-radius）是相同的。

此参数的默认值为ellipse，且可以省略。

渐变大小

size定义了渐变大小。其实此参数的本质是设置径向渐变的主渐变半径和次渐变半径。

我们可以为渐变大小size设置一个css允许的度量单位，如px、em等，也可以使用百分比（％）。除此之外，我们还可以设置一些特殊的关键词，如下

closest-side，指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner，指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side，指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner，指定径向渐变的半径长度为从圆心到离圆心最远的角

⚠️注意1：如果我们将渐变起点、渐变形状及渐变大小这几个参数都省略，既都采用默认值，此时径向渐变的最终形状将根据容器的宽高来自动计算确定。

⚠️注意2：需要特别注意的是，渐变形状和渐变大小（即shape和size）的本质其实都是设置径向渐变的最终形状的，所以在某些时候这两个参数可能不能同时设置。

比如有如下的css代码，

background-image: -webkit-radial-gradient(center, circle 50px 100px, pink, green);

那么浏览器将不知道如何渲染，因为你既设置了关键词circle，但是又同时设置了主半径和次半径，而且主次半径还不相同。我们知道主次半径不一致的结果将会呈现出一个椭圆，但是之前又明确设置了circle，此处将会有冲突。

渐变色标

径向渐变的色标跟线性渐变的色标类似。也有两个关键的渐变色标，一个是渐变起点色标，一个是渐变终点色标，且这两个色标都可以设置一个长度值（或者百分比）。

当为渐变起点色标设置长度（或者百分比）时，渐变起点将会发生偏移，偏移点为真正开始渐变的点。
当为渐变终点色标设置长度（或者百分比）时，渐变终点将会发生偏移，偏移点为真正终止渐变的点。
可以在渐变起点色标和渐变终点色标之间插入任意多个色标，来达到多色径向渐变的目的。

阴影和反射效果

CSS3阴影

在CSS3中，与阴影相关的具体属性有text-shadow和box-shadow，分别表示文本阴影和容器阴影。

文本阴影

实际上，text-shadow并不是在CSS3中新增的的新属性，在CSS2.0时就已经有了这个属性了，之后在CSS2.1不知何故被移除了，最终在CSS3中又重新收纳了这个属性。

语法

text-shadow：none | <shadow> = <length>{2,3} && <color>?

其中，<shadow> = <length>{2,3} && <color>?，即<shadow>可以设置为2个（或者3个）的长度单位（只要是CSS中允许的长度标识单位皆可，比如px，em等）加上一个颜色值。其默认值为none。下面是一个使用text-shadow的例子，

text-shadow: 1px 2px 2px #5678AF

参数说明如下，

默认值none，表示没有阴影。
第一个长度值用于设置文本阴影的水平偏移值，可以为负值。
第二个长度值用于设置文本阴影的垂直偏移值，可以为负值。
第三个长度值用于设置阴影的模糊半径，不可为负值。此参数可省略。
颜色值用于标识阴影的具体颜色。

容器阴影

box-shadow用于给容器设置阴影。其用法比text-shadow相比要复杂一点。其具体语法如下

box-shadow：none | <shadow> = inset? && [ <length>{2,4} && <color>? ]

其中，<shadow> = inset? && [ <length>{2,4} && <color>? ]，即<shadow>可设置：是否为内阴影，2个~4个的长度单位加上一个颜色值

参数说明如下，

默认值none，表示没有阴影。
第1个长度值用来设置对象的阴影水平偏移值。可以为负值。
第2个长度值用来设置对象的阴影垂直偏移值。可以为负值。
如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值。
如果提供了第4个长度值则用来设置对象的阴影外延值。
inset用于设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影。

这里对box-shadow的第四个长度参数多叨唠几句。第四个长度参数用于设置阴影的外延值。这个参数经常被忽略，其实在有些场景下还是挺有用处的。此参数的默认值为0，我们将此值赋值为阴影模糊半径的负值来抵消模糊值，从而得到单边阴影的效果。下面是一个例子，

.div1 {
    box-shadow: 0 8px 6px #565656;
}
.div2 {
    box-shadow: 0 8px 6px -6px #565656;
}

多重阴影

无论是text-shadow还是box-shadow，都是支持多重阴影的。就是可以给text-shadow或者box-shadow属性设置多组阴影值。如下，

.text-shadow {
    text-shadow: 1px 1px 5px gold, 5px 5px 2px pink, -2px -2px 6px green;
}
.box-shadow {
    box-shadow: 2px 4px 6px pink, -2px -4px 6px green;
}

兼容性

描述阴影的两个CSS3属性在现代浏览器上表现良好（需要带上不同浏览器内核的私有前缀），但是老旧的浏览器并不支持。

CSS3反射

CSS3中提供反射效果的属性叫做box-reflect，其语法如下，

box-reflect：none | <direction> <offset>? <mask-box-image>?

none，为默认值，表示无反射。
<direction>，反射的方向，可选值为above，below，left，right。
<offset>，表示本体和反射之间的间隔，可设置为长度值也可设置为百分比。此参数可省略，默认为0。
<mask-box-image>，用于设置反射的遮罩，可设置为渐变或者一个图片。此参数可省略。

在应用反射时，有一点需要注意一下，就是我们要为反射的方向（即<direction>参数的方向）预留足够的空间，否则会导致页面看起来无反应，因为没有足够的空间用来展示反射。

CSS3反射可以很简单的解决之前必须使用图片才能解决的倒影问题，不过由于一些浏览器的支持问题，使得这个属性貌似使用的不是很广泛。

变形效果

过渡效果

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是:hover，:active 或者通过 JavaScript 实现的状态变化。

语法：

transition: property duration timing-function delay

值	描述
transition-property	指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。可以是特殊值`all`和`none`
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。`ease｜ease-in｜ease-out｜ease-in-out｜linear｜step-end｜...`
transition-delay	定义过渡效果何时开始。

如下：

//鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果
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;
}

动画效果

@keyframes规则

要创建 CSS 动画，您首先需要了解 @keyframes 规则，@keyframes 规则用来定义动画各个阶段的属性值，类似于 flash 动画中的关键帧，语法格式如下：

@keyframes animationName {    
   from {        
      properties: value;    
   }    
   percentage {        
     properties: value;    
   }    
   to {        
     properties: value;    
   }
}
   // 或者
@keyframes animationName {    
   0% {        
     properties: value;    
   }    
   percentage {        
     properties: value;    
   }    
   100% {        
     properties: value;    
   }
}

animationName：表示动画的名称；
from：定义动画的开头，相当于 0%；
percentage：定义动画的各个阶段，为百分比值，可以添加多个；
to：定义动画的结尾，相当于 100%；
properties：不同的样式属性名称，例如 color、left、width 等等。

下面我们来看一个简单的 @keyframes 规则示例：

@keyframes ball {    
  0% { 
    top: 0px; left: 0px;
  }    
  25% { 
    top: 0px; left: 350px;
  }    
  50% { 
    top: 200px; left: 350px;
  }    
  75% { 
    top: 200px; left: 0px;
  }    
  100% { 
    top: 0px; left: 0px;
  } 
}

动画创建好后，还需要将动画应用到指定的 HTML 元素。要将动画应用到指定的 HTML 元素需要借助 CSS 属性，CSS 中提供了如下所示的动画属性：\

animation-name：设置需要绑定到元素的动画名称；
animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；
animation-timing-function：设置动画的速度曲线，默认为 ease；
animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；
animation-delay：设置动画开始之前的延迟时间，默认为 0；
animation-iteration-count：设置动画被播放的次数，默认为 1；
animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；
animation-play-state：设置动画是正在运行还是暂停，默认是 running；
animation：所有动画属性的简写属性。

animation-name

animation-name 属性用来将动画绑定到指定的 HTML 元素，属性的可选值如下：

值	描述
keyframename	要绑定到 HTML 元素的动画名称，可以同时绑定多个动画，动画名称之间使用逗号进行分隔
none	表示无动画效果，

animation-duration

animation-duration 属性用来设置动画完成一个周期所需要花费的时间，单位为秒或者毫秒。

animation-timing-function

animation-timing-function 属性用来设置动画播放的速度曲线，通过速度曲线的设置可以使动画播放的更为平滑。animation-timing-function 属性的可选值如下表所示：

值	描述
linear	动画从开始到结束的速度是相同的
ease	默认值，动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始，并以低速结束
cubic-bezier(n, n, n, n)	使用 cubic-bezier() 函数来定义动画的播放速度，参数的取值范围为 0 到 1 之间的数值

animation-fill-mode

animation-fill-mode 属性用来设置当动画不播放时（开始播放之前或播放结束之后）动画的状态（样式），属性的可选值如下：

值	描述
none	不改变动画的默认行为
forwards	当动画播放完成后，保持动画最后一个关键帧中的样式
backwards	在 animation-delay 所指定的时间段内，应用动画第一个关键帧中的样式
both	同时遵循 forwards 和 backwards 的规则

animation-delay

animation-delay 属性用来定义动画开始播放前的延迟时间，单位为秒或者毫秒，属性的语法格式如下：\

animation-delay: time;

其中参数 time 就是动画播放前的延迟时间，参数 time 既可以为正值也可以为负值。参数值为正时，表示延迟指定时间开始播放；参数为负时，表示跳过指定时间，并立即播放动画。

animation-iteration-count

animation-iteration-count 属性用来定义动画播放的次数，属性的可选值如下：

值	描述
n	使用具体数值定义动画播放的次数，默认值为 1
infinite	表示动画无限次播放

animation-direction

animation-direction 属性用来设置是否轮流反向播放动画，属性的可选值如下：

值	描述
normal	以正常的方式播放动画
reverse	以相反的方向播放动画
alternate	播放动画时，奇数次（1、3、5 等）正常播放，偶数次（2、4、6 等）反向播放
alternate-reverse	播放动画时，奇数次（1、3、5 等）反向播放，偶数次（2、4、6 等）正常播放

animation-play-state

animation-play-state 属性用来设置动画是播放还是暂停，属性的可选值如下：

值	描述
paused	暂停动画的播放
running	正常播放动画

animation

animation 属性是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 几个属性的简写形式，通过 animation 属性可以同时定义上述的多个属性，语法格式如下：

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

其中每个参数分别对应上面介绍的各个属性，如果省略其中的某个或多个值，则将使用该属性对应的默认值。

开放字体的支持

@font-face CSS at-rule 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数，从用户本地查找指定的字体名称，并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源。

通过允许作者提供他们自己的字体，@font-face 让设计内容成为了一种可能，同时并不会被所谓的"网络-安全"字体所限制(字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体，同时在不依赖网络情况下实现此功能。

在同时使用url()和local()功能时，为了用户已经安装的字体副本在需要使用时被使用，如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。

@font-face 规则不仅仅使用在CSS的顶层，还可以用在任何CSS条件组规则中.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

示例：

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

例子中，用到了用户本地字体"Helvetica Neue Bold"的备份；如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过)，就会用下载的字体"MgOpenModernaBold.ttf"来代替：

媒体查询与响应式网页设计

Media Query（媒体查询）是CSS3中的新增内容，用于定义不同媒体类型在不同CSS属性时的样式表现。比如当改变浏览器窗口的大小时，页面上文本的颜色将会发生变化。

媒体查询的两要素：媒体类型和查询的CSS属性

媒体类型

@media screen and (width: 888px) { 
   p { 
     color: red; 
   } 
}

@media是关键字（可以将其理解成css的一种语法糖，跟@import类似）
screen，这个关键字就是我们所说的媒体类型（这里screen其实就是电脑屏幕）
width: 888px，需要查询的CSS属性

所以上面的CSS Media Query代码要表达的意思就是：当页面在电脑屏幕上展现时，且屏幕的width（宽度）属性为888px时，设置所有的p标签元素的字体颜色为red

除了上面提到的screen，常见有媒体类型如下表,

媒体类型	备注	是否常用
`all`	匹配所有设备	是
`braille`	盲文设备	否
`embossed`	盲文打印	否
`handheld`	手持设备	否
`print`	打印模式	是
`projection`	演示模式、幻灯片等	否
`screen`	电脑屏幕	是
`speech`	演讲	否
`tty`	固定字母间距的网格的媒体，比如电传打字机	否
`tv`	电视媒体	否

看到上面关于媒体类型的表格后，其实我们常用的也就all、print、screen这几种类型。其中screen要属于最常用的媒体类型了。

在具体使用media type时，我们还可以使用not或者only这两个关键字修饰媒体类型，比如

@media only screen and (width: 888px) {
    /* your css code */
}

或者

@media not print and (width: 888px) {
    /* your css code */
}

其中，前者（only修饰词）表示@media设置的样式只对screen类型适用；后者（not修饰词）表示@media设置的样式对除了print类型之外的所有设备类型生效。

媒体查询

媒体查询的语法：

@media screen and (width: 888px) { 
   /* your css code */ 
}

媒体查询中查询两字的含义就体现在screen和width: 888px上（可能更加倾向后者）。换句话说，screen和width: 888px其实都是查询的条件，当有多个条件时，我们使用and将他们连起来。

上面的示例代码中，查询页面的width属性，当其宽度为888px时，将应用特别设置的样式。

不过Media Query所支持的CSS属性是有限的，与一般的CSS属性并不一致，而且会有一些特别的可选项。如下表，

可查询属性	属性值类型	是否可用Max/Min前缀	描述	常用
`color`	整数	是	定义每一组输出设备的彩色原件个数。如果不是彩色设备，则等于0	否
`color-index`	整数	是	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则等于0	否
`width`	长度	是	定义输出设备中的页面可见区域宽度	是
`height`	长度	是	定义输出设备中的页面可见区域高度	是
`device-width`	长度	是	定义输出设备的屏幕可见宽度（设备本身的宽度）	是
`device-height`	长度	是	定义输出设备的屏幕可见高度（设备本身的高度）	是
`orientation`	`portrait`/`landscape`	否	定义`height`是否大于或等于`width`。值`portrait`代表是（竖屏），landscape代表否（横屏）	是
`aspect-ratio`	整数/整数	是	定义`width`与`height`的比率（宽高比）	是
`device-aspect-ratio`	整数/整数	是	定义`device-width`与`device-height`的比率（宽高比）。如常见的显示器比率：4/3, 16/9, 16/10	是
`monochrome`	整数	是	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则等于0	否
`scan`	`progressive`/`interlaced`	否	定义电视类设备的扫描工序	否
`grid`	整数	否	用来查询输出设备是否使用栅格或点阵。只有`1`和`0`才是有效值，`1`代表是，`0`代表否	否
`resolution`	dpi/dpcm	是	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm	否

看过上面的表格之后，我们会发现其实Media Query就是为了不同设备而诞生的。就目前而言，我们常用的查询属性也就那么几个，大部分与宽高有关系（其实就是设置的展现区域大小）。

从上面的表格中，我们可以看出有部分的可查询属性还有添加max-或者min-前缀进行修饰。比如，

@media screen and (min-width: 961px) and (max-width: 1200px) {
    p {
        color: pink;
    }
}

上面代码的含义是指，当展现页面的宽度大于960px且小于1200px时，将p标签的字体颜色设置为粉色。

这个例子中，我们使用了width和height这两个可查询属性，而且还使用了max和min对齐进行修饰，分别表示最小宽度和最大宽度。

自适应网页设计

Responsive Web Design自适应网页设计。我们可以使用CSS3的Media Query做一些自适应的网页设计

比如

<head>
    <link rel="stylesheet" media="screen and (max-width: 480px)" href="tiny.css" />
    <link rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 600px)" href="small.css" />
    <link rel="stylesheet" media="screen and (min-width: 601px) and (max-width: 960px)" href="middle.css" />
    <link rel="stylesheet" media="screen and (min-width: 961px)" href="pc.css" />
</head>

上述代码的含义很明确，查询屏幕的宽度属性，根据不同的宽度加载不同的css文件。

有时候我们为了减少css文件的解析，将所有的媒体查询代码写在同一个css文件中，在html中仅作一次加载。如下

<head>
    <link rel="stylesheet" href="style.css" />
</head>

@media screen and (max-width: 480px) {
    /* your css code */
}
@media screen and (min-width: 481px) and (max-width: 600px) {
    /* your css code */
}
/* more css code */

这两种做法的效果是一致的。

前端笔记之CSS3新特性

CSS3的新特性大致有：

选择器的扩展

新增的层次选择器

新增伪类选择器

新增伪元素选择器

伪元素和元素的区别：

使用伪元素时注意事项

新增属性选择器

多列布局Multi-column-Layout

语法及兼容性

示例

简化语法

弹性盒模型布局方式

FlexBox基本原理

FlexBox相关概念

FlexBox新旧语法

FlexBox属性详解

问题引导

dispalay: flex

flex-direction

flex-wrap

flex-flow

order

flex条目的弹性设置

flex-grow

flex-shrink

flex复合属性

flex条目对齐

基于margin: auto对齐

基于主轴对齐

基于交叉轴对齐

flex行的对齐

RGBA和透明度

rgba与opacity之间的区别：

圆角

新增背景属性

已有属性：

新增属性：

已有属性

background-color

background-position

background-repeat

background-attachment

background-image

新增属性

background-size

background-clip

background-origin

渐变效果

兼容性

线性渐变

渐变方向

渐变起点

渐变终点

重复线性渐变

径向渐变

渐变起点

渐变形状

渐变大小

渐变色标

阴影和反射效果

CSS3阴影

文本阴影

容器阴影

多重阴影

兼容性

CSS3反射

变形效果

过渡效果

动画效果

@keyframes规则

animation-name

animation-duration

animation-timing-function

animation-fill-mode

animation-delay

animation-iteration-count

animation-direction

animation-play-state

`dispalay: flex`

`flex-direction`

`flex-wrap`

`flex-flow`

`order`

`flex-grow`

`flex-shrink`

基于`margin: auto`对齐

`background-color`

`background-position`

`background-repeat`

`background-attachment`

`background-image`

`background-size`

`background-clip`

`background-origin`