1.开发的两种模式：
渐进增强(特点：1.实现一个兼容性较好的页面。2.根据需求往上添加新的功能，新的技术)
优雅降级（特点：1.使用最新的技术，最酷炫的效果实现页面，2.根据网站的用户浏览器版本进行针对性兼容性写法）
2.css兼容性问题：
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */ 火狐下需要加的前缀
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
-ms-transform:width 2s; /* IE */
3.属性选着器
这些属性选着器主要用于精灵图的使用。
演示代码：
4.伪类选着器
孩子伪类选着器
E:first-child 作用： 匹配父元素的第一个子元素E。
E:last-child 作用： 匹配父元素的最后一个子元素E
E:nth-child(n) 作用： 匹配父元素的第n个子元素E。
E:nth-last-child(n) 作用： 匹配父元素的倒数第n个子元素E。
种类选着器
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。
E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
区别：
E:last-child是先找到最后一个孩子，如果最后一个孩子不是E标签，则设置的样式无效。
E:last-of-type:是找到所有的E标签，对所有E标签最后设置样式。
代码演示：
北京遇上西雅图
小鬼当家
夏洛特烦恼
神犬小七
湄公河行动
//此标签为红色，有（h3:last-of-type）生效
建国大业
//此标签没有颜色变化
在sublime和webstorm中 快速生成测试文本
使用快捷键: lorem+tab;
5.伪元素选择器(一)
E:first-letter/E::first-letter 设置对象内的第一个字符的样式。
E:first-line/E::first-line 设置对象内的第一行的样式。
E::placeholder 设置对象文字占位符的样式。但是兼容性 奇差无比。
E::selection 设置对象被选择时的颜色。
注意：
- 我们不建议使用 一个冒号的的伪元素选着器，最好使用两个冒号伪元素选。
- placeholder的兼容性极差，在谷歌浏览器上需要使用-webkit-input-placeholder，否者无效
- selection只能改变color ,background-color, text-shadow.其他的不能改变。
input::-webkit-input-placeholder {
color: #999;
}
input:-ms-input-placeholder { // IE10+
color: #999;
}
input:-moz-placeholder { // Firefox4-18
color: #999;
}
input::-moz-placeholder { // Firefox19+
color: #999;
}
5.伪元素选着器（二）
E:before/E::before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
代码演示：
/* 通过 伪元素选择器的方式 为其 添加新的 '元素''
能够在 不添加 其他标签的情况下 新增一个元素
*/
div::before{
/* 必须设置 content属性 只是需要拥有这个属性 即可 属性值 是什么 无所谓*/
content: '';
/* before伪元素 默认是行内元素 为了能够设置宽高 需要变成块 */
display: block;
/* width: 50px; */
width: 100%;height: 50px;border: 1px solid black;position: absolute;
bottom: 0px;left: 0px;background-color: hotpink;
}
/* after 跟before 基本一样 除了 名字不同而已 */
div::after{
content: '';display: block;
/* width: 50px; */
width: 100%;height: 50px;border: 1px solid orange;position: absolute;
top: 0px;left: 0px;background-color: skyblue;
}
注意事项：
- 伪元素选择器 只能够设置一个元素 其内部 无法再添加 后代元素
- 伪元素选择器 只能够添加给 双标签元素
- before 跟 after 只是名字不同而已 用法一样
- 双标签元素 只支持 这两个伪元素
使用案例：
6.Color(颜色)
颜色的设置方法：
- 单词（red, green....）
- 十六进制（#fff 或#ffffff）
- rgb(red,green,blue)
- rgba(red,green,blue,alpha)
- hsl (色相，饱和度，明度) //hue,saturation,luminance
- hsla() //使用方法一样
注意：
opacity:透明度会被继承， 其他的rgba,hsla中的透明度不会被继承。
7.text-shadow(文字阴影)
属性：
/* 文字阴影
阴影的大小 默认是跟 文字一样大
方向
x的正方向是 右边
y的正方向是 下边
颜色的模糊
会直接放大影子
颜色
默认的颜色是黑色
x y 模糊 颜色
如果要设置多个 直接使用 逗号分隔 继续往后写即可
*/
text-shadow: 0px 0px 10px yellow,
0px 0px 20px red;
8.box-shadow(盒子阴影)
属性
/* 设置盒子阴影
影子默认跟元素的大小一样
(影子发散的方向 默认是 往外)
inset
影子的方向
影子的颜色
影子的模糊
直接放大影子
不是模糊的 视觉效果上 较差
(方向 x y 模糊 放大 color)
方向 的 x跟y 是必须设置的 不能省略 但是 模糊 跟 影子放大 可以省略
如果想要
只设置模糊 可以 0 0 10px orange
只设置放大 0 0 0 10px orange
*/
/* box-shadow: 1px 1px hotpink,
-1px -1px orange; */
/* box-shadow: 0px 0px 0px 10px yellow; */
/* box-shadow: inset 0px 0px 0px 0px yellow; */
box-shadow: 100px 100px 100px yellow;
9.box-sizing(盒模型)
属性:
- content-box : ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型
- border-box：( Element width = width ) 此属性表现为怪异模式下的盒模型。
注意：如果设置成border-box,那么padding也不会撑大盒子
10.background(背景)
background-size:contain,或者cover;(80px 60px;)
注意:
1.contain 图片两边等比例拉伸 知道 某一边 顶格 停止拉伸
2.cover 图片等比例拉伸 保证 两边 都顶格 可能会出去
可以进行多背景设置：
background-image:url('images/gyt.jpg'),url('images/robot.png'); //如果有重复部分，前面的背景会覆盖后面的背景
background-size: 300px 100px,400px 200px;
/* 设置多张图片的 位置
如果不想使用 字母的方式进行设置 想要精确修改
*/
/* background-position: top left,bottom right; */
background-position: top left,100px 200px;
background-origin:(背景图开始的位置)
属性：
- border-box,content-box,和padding-box.
background-clip:(背景图切割的位置)
属性：
- content-box,和padding-box.
演示代码：
11.渐变
1.线性渐变(linear-gradient())
2.径向渐变（radial-gradient()）
使用方法（linear-gradient）：
linear-gradient(angle,color ,color percentage)
例子：
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);
注意:角度也可以用位置设置
to left： 设置渐变为从右到左。相当于: 270deg
to right： 设置渐变从左到右。相当于: 90deg
to top： 设置渐变从下到上。相当于: 0deg
to bottom： 设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
使用方法(radial-gradient())： 使用方法：
radial-gradient(shape at position,color percentage,color percentage)
示例代码：
background:radial-gradient(100px 100px at 20px 30px ,red, green 30%，yellow);
//解释： 100px 100px 表示 直径，分别表示横直径，和纵直径，两个值相同的话表示是圆，
如果不相同，则表示的是椭圆，这两个值也可以用单词代替。（circle，ellipse）
示例:
background:radial-gradient(circle或者ellipse at 20px 30px ,red, green 30%，yellow);
//解释： 20px 30px 表示径向渐变中心点的位置，也可以使用单词来代替
（left,center,right || top，center,bottom）
示例：
background:radial-gradient(circle或者ellipse at left top ,red, green 30%，yellow);
其他形参值不做介绍。
注意：
在使用单词（circle,ellipse）可以添加如下内容：
closest-side： 指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side： 指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner： 指定径向渐变的半径长度为从圆心到离圆心最远的角 、
示例代码：
radial-gradient(circle farthest-corner, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);
效果自行演示，就可以明白他们的区别了。