复习：css3核心属性——选择器、盒子模型、多列布局、响应式布局、动画特效

CSS3 被划分为模块。

其中最重要的 CSS3 模块包括：

1、选择器

<1>派生选择器（后代选择器）

li a {
text-decoration: none;
}
目前非常常用的css选择器，用于选取X元素下子元素Y，这里有个要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况 是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。
使用此子孙选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。
这种子孙选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。

<2>id选择器

#+id名，这是日常常用的css选择器，用于匹配id为XXX的元素，id选择器的优势是精准，高优先级（优先级基数为100，远高于class的 10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用 id选择器的地步？
#container {
width: 960px;
margin: auto;
}

<3>类选择器

.+class名，标准的样式选择器，与id选择器的区别是样式选择器可以选择多个元素。样式选择器是提倡使用的选择器，我想也是日常前端人员用到最多的选择器了。
.error {
color: red;
}

<4>属性选择器（标签选择器）

a { color: red; }
ul { margin-left: 0; }
标签选择器，优先级仅仅比*高，常用于css reset。

<5>通配符选择器

*通配符选择器，经常用于css reset，即样式重置，清理标签的默认样式，但现在一般不提倡直接使用*了，主要是*会匹配所有标签，相当耗资源。*在css的优先级中是最低的。
* {
margin: 0;
padding: 0;
}
也可以用*来匹配某一元素下的所有子元素：
#container * {
border: 1px solid black;
}

2、框模型

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：背景应用于由内容和内边距、边框组成的区域。

（1）内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
<1>padding属性：
padding 属性接受长度值或百分比值，但不允许使用负值。
单边内边距属性也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left
内边距的百分比数值
可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。
注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

（2）边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。

<1>border-style(边框风格)
默认值：    not specified
值           描述
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 规定应该从父元素继承边框样式。

<2>border-width
border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。
默认值：    medium
值           描述
thin    定义细的边框。
medium  默认。定义中等的边框。
thick   定义粗的边框。
length  允许您自定义边框的宽度。
inherit 规定应该从父元素继承边框宽度。

<3>border-color
border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。
border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。
要记住，边框的样式不能为 none 或 hidden，否则边框不会出现。
注释：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
默认值：    not specified
值               描述
color_name  规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number  规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number  规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent 默认值。边框颜色为透明。
inherit     规定应该从父元素继承边框颜色。

（3）外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
说明:
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。
默认值：    0
值               描述
auto    浏览器计算外边距。
length  规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%       规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。

（4）外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
注释：只有普通文档流中块框的垂直外边距(块状元素)才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

3、背景和边框

（1）边框

<1>设置边框为圆角，值为圆的半径
默认值：0
单位为：px、em、%
border-radius:25px;
border-radius: 1-4 length|% / 1-4 length|%;
length  定义圆角的形状。
%   以百分比定义圆角的形状。
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
按此顺序设置每个 radii 的四个值。
如果省略 bottom-left，则与 top-right 相同。
如果省略 bottom-right，则与 top-left 相同。
如果省略 top-right，则与 top-left 相同。

<2>添加阴影
默认值
box-shadow: 10px 10px 5px #888888;
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：必需。水平阴影的位置。允许负值。(px)
v-shadow：必需。垂直阴影的位置。允许负值。(px)
blur：可选。模糊距离。(px)
spread：可选。阴影的尺寸。（px）
color：可选。阴影的颜色。请参阅 CSS 颜色值。
inset：可选。将外部阴影 (outset) 改为内部阴影。
<3>设置边框图形
默认值：none 100% 1 0 stretch
border-image:url(border.png) 30 30 round;（增加图片个数适应边框颜色）
border-image:url(/i/border.png) 30 30 stretch（图形拉伸适应边框长度）

border-image 属性是一个简写属性，用于设置以下属性：
border-image-source 用在边框的图片的路径。
border-image-slice  图片边框向内偏移。
border-image-width  图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

（2）背景

<1>规定背景图片的尺寸(background-size)
background-size 属性规定背景图片的尺寸。
默认值：auto
在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

background-size:63px 100px;
background-size:35% 100%;
语法
background-size: length|percentage|cover|contain;
值           描述
length      设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。

percentage  以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。

cover       把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。

contain     把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

<2>规定背景图片的定位区域(background-origin )
默认值：padding-box
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

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

<3>规定背景的绘制区域(background-clip)
默认值：border-box

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

4、文本效果

只列举出常用的几个：

（1）文本阴影（text-shadow）

默认值：none
语法：text-shadow: h-shadow v-shadow blur color;
注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
值                   描述
h-shadow    必需。水平阴影的位置。允许负值。
v-shadow    必需。垂直阴影的位置。允许负值。
blur        可选。模糊的距离。
color       可选。阴影的颜色。参阅 CSS 颜色值。

（2）长单词分割换行（word-wrap）

默认值：normal
语法：word-wrap: normal|break-word;
值               描述
normal      只在允许的断字点换行（浏览器保持默认处理）。
break-word  在长单词或 URL 地址内部进行换行。

（3）规定当文本溢出包含元素时发生的事情（text-overflow）

默认值：clip
语法：text-overflow: clip|ellipsis|string;
值               描述
clip        修剪文本。
ellipsis    显示省略符号来代表被修剪的文本。
string      使用给定的字符串来代表被修剪的文本。

（4）规定自动换行的处理方法

通过使用 word-break 属性，可以让浏览器实现在任意位置的换行
默认值：normal
语法：word-break: normal|break-all|keep-all;
值               描述
normal      使用浏览器默认的换行规则。
break-all   允许在单词内换行。
keep-all    只能在半角空格或连字符处换行。

5、2D/3D 转换

（1）2D转换

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。

<1>translate()
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
translate(50px,100px) 把元素从左侧向右移动 50 像素，从顶端向下移动 100 像素。

<2>rotate()
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
rotate(30deg) 把元素顺时针旋转 30 度。

<3>scale()
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

<4>skew()
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

<5>matrix()
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
matrix(x1,x2,x3,x4,x5,x6)
x5:水平偏移，x6：垂直偏移

（2）3D转换

<1>rotateX()
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
<2>rotateY()
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

<3>规定如何在 3D 空间中呈现被嵌套的元素(transform-style属性)
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
注释：该属性必须与 transform 属性一同使用。
默认值：flat
语法：transform-style: flat|preserve-3d;
值               描述
flat        子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。

<4>定义 3D 元素距视图的距离(perspective 属性)
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
默认值：    none
语法perspective: number|none;
值               描述
number  元素距离视图的距离，以像素计。
none    默认值。与 0 相同。不设置透视。

<5>定义 3D 元素所基于的 X 轴和 Y 轴(perspective-origin 属性)
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。
注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。
默认值：    50% 50%
语法:perspective-origin: x-axis y-axis;
值               描述
x-axis  定义该视图在 x 轴上的位置。默认值：50%。
可能的值：
left
center
right
length
%
y-axis  定义该视图在 y 轴上的位置。默认值：50%。
可能的值：
top
center
bottom
length
%

<6>定义当元素不面向屏幕时是否可见(backface-visibility属性)
backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。
默认值：    visible
语法：backface-visibility: visible|hidden;
值           描述
visible 背面是可见的。
hidden  背面是不可见的。

<7>3D Transform方法：
函数                          描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)    定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)      定义 3D 转化。
translateX(x)           定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)           定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)           定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)          定义 3D 缩放转换。
scaleX(x)               3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)               定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)               定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)   定义 3D 旋转。
rotateX(angle)          定义沿 X 轴的 3D 旋转。
rotateY(angle)          定义沿 Y 轴的 3D 旋转。
rotateZ(angle)          定义沿 Z 轴的 3D 旋转。
perspective(n)          定义 3D 转换元素的透视视图。

（3）设置旋转元素的基点位置（transform-origin）

transform-origin 属性允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
注释：该属性必须与 transform 属性一同使用。
默认值：    50% 50% 0
语法：transform-origin: x-axis y-axis z-axis;

值       描述
x-axis  定义视图被置于 X 轴的何处。可能的值：
left
center
right
length
%
y-axis  定义视图被置于 Y 轴的何处。可能的值：
top
center
bottom
length
%
z-axis  定义视图被置于 Z 轴的何处。可能的值：
length

6、动画

（1）什么是 CSS3 中的动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

（2）CSS3 @keyframes 规则

当在 @keyframes 中创建动画时，要把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称
规定动画的时长
语法：@keyframes animationname {keyframes-selector {css-styles;}}
值                           描述
animationname       必需。定义动画的名称。
keyframes-selector  必需。动画时长的百分比。
合法的值：
0-100%
from（与 0% 相同）
to（与 100% 相同）
css-styles          必需。一个或多个合法的 CSS 样式属性。

实例：
@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

（3）animation 属性：

animation 属性是一个简写属性，用于设置六个动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
默认值：none 0 ease 0 1 normal
语法：animation: name duration timing-function delay iteration-count direction;
值                               描述
animation-name              规定需要绑定到选择器的 keyframe 名称。。
animation-duration          规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function   规定动画的速度曲线。
animation-delay             规定在动画开始之前的延迟。
animation-iteration-count   规定动画应该播放的次数。
animation-direction         规定是否应该轮流反向播放动画
<1>animation-name:
animation-name 属性为 @keyframes 动画规定名称。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
默认值：    none
语法:animation-name: keyframename|none;
值                       描述
keyframename    规定需要绑定到选择器的 keyframe 的名称。
none            规定无动画效果（可用于覆盖来自级联的动画）。
<2>animation-duration:
animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。
默认值：  0
语法:animation-duration: time;
值                           描述
time    规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。
<3>animation-timing-function:
animation-timing-function 规定动画的速度曲线。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。
默认值：    ease
语法:animation-timing-function: value;
animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。能够在该函数中使用自己的值，也可以预定义的值：
值                           描述
linear                  动画从头到尾的速度是相同的。
ease                    默认。动画以低速开始，然后加快，在结束前变慢。
ease-in                 动画以低速开始。
ease-out                动画以低速结束。
ease-in-out             动画以低速开始和结束。
cubic-bezier(n,n,n,n)   在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
<4>animation-delay :
animation-delay 属性定义动画何时开始。
animation-delay 值以秒或毫秒计。
提示：允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
默认值：0
语法:animation-delay: time;
值                                   描述
time    可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。1
<5>animation-iteration-count:
animation-iteration-count 属性定义动画的播放次数。
默认值：    1
语法:animation-iteration-count: n|infinite;
值                   描述
n           定义动画播放次数的数值。
infinite    规定动画应该无限次播放。
<6>animation-direction:
animation-direction 属性定义是否应该轮流反向播放动画。
如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
注释：如果把动画设置为只播放一次，则该属性没有效果。
默认值：    normal
语法:animation-direction: normal|alternate;
值                   描述
normal      默认值。动画应该正常播放。
alternate   动画应该轮流反向播放。

7、多列布局

（1）column-count:

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

（2）column-gap:

column-gap 属性规定列之间的间隔
注释：如果列之间设置了 column-rule，它会在间隔中间显示。
默认值：    normal
语法:column-gap: length|normal;
值                   描述
length  把列间的间隔设置为指定的长度。
normal  规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。

（3）column-rule：

column-rule 属性设置列之间的宽度、样式和颜色规则。
column-rule 属性是一个简写属性，用于设置所有 column-rule-* 属性。
默认值：    medium none black
语法：column-rule: column-rule-width column-rule-style column-rule-color;
值                   描述
column-rule-width   设置列之间的宽度规则。
column-rule-style   设置列之间的样式规则。
column-rule-color   设置列之间的颜色规则。
div
{
-moz-column-rule:3px outset #ff0000;    /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;

<1>column-rule-width
column-rule-width 属性规定列之间的宽度规则。
默认值：    medium
语法:column-rule-width: thin|medium|thick|length;
值           描述
thin    定义纤细规则。
medium  定义中等规则。
thick   定义宽厚规则。
length  规定规则的宽度。

<2>column-rule-style
column-rule-style 属性规定列之间的样式规则。
默认值：    none
语法: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 规则。该效果取决于宽度和颜色值。
}

（4）columns 属性
columns 属性是一个简写属性，用于设置列宽和列数。
默认值：    auto auto
语法：columns: column-width column-count;
值           描述
column-width    列的宽度。
column-count    列数。

8、用户界面

（1）resize

在 CSS3，resize 属性规定是否可由用户调整元素尺寸。
resize 属性规定是否可由用户调整元素的尺寸。
注释：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
默认值：    none
语法：resize: none|both|horizontal|vertical;
值               描述
none        用户无法调整元素的尺寸。
both        用户可调整元素的高度和宽度。
horizontal  用户可调整元素的宽度。
vertical    用户可调整元素的高度。

（2）box-sizing

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
默认值：    content-box
语法：box-sizing: content-box|border-box|inherit;
值                           描述
content-box     这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box      为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit         规定应从父元素继承 box-sizing 属性的值。

（3）outline-offset

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：
轮廓不占用空间
轮廓可能是非矩形
默认值：0
语法：outline-offset: length|inherit;
值                   描述
length      轮廓与边框边缘的距离。
inherit     规定应从父元素继承 outline-offset 属性的值。

（4）appearance 属性：

appearance 属性允许您使元素看上去像标准的用户界面元素。
默认值：    normal
语法：appearance: normal|icon|window|button|menu|field;
值               描述
normal  将元素呈现为常规元素。
icon    将元素呈现为图标（小图片）。
window  将元素呈现为视口。
button  将元素呈现为按钮。
menu    将元素呈现为一套供用户选择的选项。
field   将元素呈现为输入字段。

9.响应式布局

第一：正确理解响应式布局

响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，当我们需要把沙发放到一个角落的时候，此刻沙发就好比div吧，而角落里的某个地方就好比父元素，由于父元素空间的改变，我们不得不调整div,让它能够依然放在角落里。在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够兼容多个终端。

第二：响应式设计的步骤

1.布局及设置meta标签

当创建一个响应式网站，或者非响应式网站变成响应式的时候，首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局，页面固定宽度大小，我觉得这个对在座的各位没有任何难度。如果完成了非响应式那么我在去添加媒体查询（Media Query)和响应式代码。这种操作更容易实现响应式特性。

当你完成当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的代码到和标签之间。这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。

2.通过媒体查询来设置样式media query

media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写

@media screen and (max-width:980px){
#head { … }
#content { … }
#footer { … }
}这里面的样式会覆盖掉之前所定义的样式。

3.设置多种视图宽度

假如我们要兼容ipad和iphone视图，我们可以这样设置：

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}

3.字体设置

到目前为止，开发人员用到的字体单位大部分都是像素，虽然像素在普通网站上是Ok的，但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。

css3引入了新的单位叫做rem,和em类似但对于Html元素，rem更方便使用。

rem是相对于根元素的，不要忘记重置根元素字体大小：

html{font-size:100%;}
完成后，你可以定义响应式字体：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}
不理解rem的童鞋，在这里给大家推荐一篇写的不错的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)
4.响应式设计需要注意的问题

1.宽度不固定，可以使用百分比

#head{width:100%;}
#content{width:50%;}
2.图片处理

图片处理的万能方法，就是图片液态化。大家都知道水无形 能适合很多容器，那么假如我们把图片当做水 是不是就可以实现图片自适应问题了呢？

在html页面中的图片，比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的最大宽度，如：

#wrap img{
max-width:100%;
height:auto;
}
如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。
除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片：

#log a{display:block;
width:100%;
height:40px;
text-indent:55rem;
background-img:url(logo.png);
background-repeat:no-repeat;
background-size:100% 100%;
}
background-size是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值，那么另一个值默认为auto。
background-size:cover; 等比扩展图片来填满元素
background-size:contain; 等比缩小图片来适应元素的尺寸
最后我们来总结下响应式布局的实现原理
首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）

1.响应式布局
1.Meta标签定义
2.使用Media Queries适配对应样式
2.响应式内容
1.响应式图片

响应式布局的基础概念

响应式布局的核心思想就是通过一套HTML代码屏幕不同的前提下，对应不同的CSS代码，从而达到响应页面的效果。好了，废话不多说，我们就来讲讲响应式布局中的关键---媒体查询

媒体查询(media query)

这里我们使用的是CSS3中增加的属性 @media,因为这是一个CSS3新增加的属性，所以会对低版本的浏览器造成不能兼容的问题，我们可以通过使用css3-mediaqueries.js来解决这个问题

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

同时我们还要注意，响应式主要是针对移动端的，所以需要支持HTML5的一些语法，这样也是会导致低版本的浏览器无法兼容，我们可以使用 html5.js 来解决这个问题

<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

PS：position:fixed不适用与移动浏览器布局，具体的解决方案是引入：iscroll.js。

media query的基本语法如下所示：

@media only screen and (max/min-width/height: 960px) {
/* 样式定义 */
}
only screen参数表示限定当访问环境（媒体类型）为彩色屏幕设备时才生效。

该参数可选值为 all | aural | braille | handheld | print | projection | screen | tty | tv | embossed

注释：媒介类型名称对大小写不敏感。
媒介类型    描述
all         用于所有的媒介设备。
aural       用于语音和音频合成器。
braille     用于盲人用点字法触觉回馈设备。
embossed    用于分页的盲人用点字法打印机。
handheld    用于小的手持的设备。
print       用于打印机。
projection  用于方案展示，比如幻灯片。
screen      用于电脑显示器。
tty         用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv          用于电视机类型的设备。

第二个参数指的是限制最大最小高度宽度

在上面我们讲过响应式是通过一个HTML对应多个CSS样式，但是我们的做法是把所有的CSS写在同一个文件中，然后通过@media去查询套用的样式，除了这样做我们还可以把要套用的不同的样式分别写在不同的CSS文件中，这种方法我称之为标签化

<link rel="stylesheet" media="only screen and (max-width: 800px)" href="small_screen.css" />

大概写法也就是这样的

我们来写一个简单的响应式DEMO来巩固一下：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式练习</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="pink"></div>
<div id="content">
<div id="yellow"></div>
</div>
<div id="blue"></div>
</body>

CSS代码：

*{
margin:0px;
padding:0px;
/* height:100%; */
}
html,body{
height:100%;
}
.hide{
display:none;
}
#pink{
background:#FF9772;
}
#yellow{
background:#FFD34C;
}
#blue{
background:#72B9FF;
}
@media only screen and (max-width:600px){
#pink{
width:100%;
margin-bottom:15px;
height:10%;
}
#content{
width:100%;
height:100%;
margin-top: 20px;
/* padding:0 auto; */
/* padding-left:20px;
padding-right:20px; */
}
#yellow{
height:100%;
width:90%;
margin:0 auto;
margin-bottom:20px;
}
}
@media only screen and (max-width:1000px) and (min-width:600px){
#pink{
width:20%;
height:100%;
margin-left:4%;
margin-top: 2%;
margin-bottom: 4%;
float:left;
}
#content{
margin-left:2%;
margin-right:4%;
width:70%;
height:100%;
margin-top: 2%;
margin-bottom:4%;
float:left;
}
#yellow{
height:100%;
width:100%;
}
}
@media only screen and (min-width:1000px){
#pink{
width:100%;
height:10%;
display:block;
}
#content{
width:70%;
height:100%;
margin-left:4%;
margin-top: 2%;
margin-bottom:4%;
float:left;
}
#yellow{
height:100%;
width:100%;
}
#blue{
float:right;
margin-left:2%;
margin-right:4%;
margin-top: 2%;
margin-bottom:4%;
width:20%;
height:100%;
}

}