坚持以下原则：
（1）渐进增强
（2）添加私有前缀
（3）考虑用户群体
【 选择器 】css3 在之前的基础上面扩展了三种类型的选择器
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;">（获取到一个元素有多重方式，我们要控制页面上面的元素，必须先得到页面上面的元素,假设你的页面的层级结构比较复杂的时候）</pre>
（1）属性选择器
a[href] 所有的a 标签，这个a需要有 href 属性
a[href='demo'] 所有的a 标签，这个a需要有 href=demo
a[href*='demo'] 包含demo
a[href^='demo'] 以demo 开始
a[href$='demo'] demo 结束
（2）伪类选择器
a:active a:link a:hover a:visited
新增:
li:first-child
li:last-child
li:nth-child() 根据n 去取值,索引是从1开始计算
li:nth-last-child 从后向前计算，倒着算
n 的用法. 取值0,1,2,3,4...
empty 空的.
div:empty 选中没有子元素的div
div:target 结合锚点进行使用，处于当前锚点的元素会被选中；
（3）伪元素选择器
我们的伪元素选择器是:: 两个
before: 想元素里面添加一个子元素，这个资源在最前面（它默认是一个行内元素，我们需要转换成一个块元素，必须设置content:''）
after: 想元素里面添加一个子元素，这个资源在最后面
first-letter 选中第一个字或者字母。
first-line 选中第一行
::selection 可改变选中文本的样式；
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">1 //选中.demo 的父元素下面的第二个子元素，并且这个子元素有一个class 属性，它的的值是demo 2 .demo:nth-child(2){ 3 }</pre>
（4）有两种新增方式可以表示颜色
rgba （ red，green，blue，Alpha 透明通道）
hsla（Hue 色调，Saturation 饱和度，Lightness 亮度，Alpha 透明度）
如果给父盒子设置了透明度，子盒子会继承父盒子的透明度；新增的颜色的标识方式里面，支持设置透明，而且设置的透明不会影响到子盒子；我想实现半透明的效果，我就可以使用 rgba,hsla 颜色的表示方式.
（5）text-shadow 可以设置文本阴影，实际上就是给文本添加影子..
text-shadow:1px 1px 1px red;
第一个1px 向右移动，负值的是向左移动（正值向右偏移，负值向左偏移）
第二个1px 向下移动 ，负值是向上移动(正值是向下偏移，负值向上偏移)
第三个1px 向下移动 代表的是模糊度，，不能为负数，值越大，越模糊（模糊度，不能为负数，值越大，模糊度越高）
第四个red 代表模糊的颜色. 影子的颜色.
text-shadow:1px 1px 1px red,-1px -1px 1px red
// 可以为文本添加多个影子
（6）盒子模型
我们可以改变盒子计算宽高的方式，通过设置盒子的这个属性
box-sizing:content-box/border-box
content-box 盒子的高度以及宽度 盒子的宽度=width+padding+border
border-box 盒子的高度以及宽度 盒子的高度以及宽度=width
【 边框圆角 】
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;">border-radius:
1:正圆
2：椭圆 x 轴 ，y 轴的概念.
3:android 机器人
4:小机器猫.
box-shadow 边框阴影；可以设置边框的阴影，外阴影，内阴影.
border-image:
1:我们可以为边框设置图片，之前设置的都是背景色</pre>
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;">而现在我们可以为四个边设置边框图片。
我们只需要一张图，浏览器会自动帮我们进行裁剪。然后我们还可以指定宽度
指定边框图片的平铺方式.</pre>
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;"> 1：border-image-source 边框图片的路径
2：border-image-slice 裁剪的方式
3: border-image-width 边框的宽度
4: border-image-repeat:round,stretch,repeat
【 渐变 】
线性渐变:
liner-gradient(
135deg, 需要有一个角度. (顺时针方向)
yellow 25%, 起始颜色
green 50% 终止颜色
)
径向渐变：一个中心点，朝着四周进行渐变
radius-gradient(
100px at center center 半径 at 中心点的位置
yellow 起始颜色
green 终止颜色
)
【 背景 】
背景尺寸：
我们可以为一个div 设置背景，
1：假设我的背景图片的大小超过了盒子的大小.
我们显示的背景不全面
我们这个时候可以设置背景的大小与盒子的大小一致.
但是我们不能做到盒子变大，背景变大
background-size:contain cover
contain: 背景图片始终完全显示，等比例缩放.
cover: 也会缩放，背景始终填充整个区域</pre>
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;"> ** 背景原点:**
background-origin: 可以设置背景图片的位置.
background-origin:border-box,padding-box,content-box;</pre>
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;"> border-box 背景的原点在border 上面
padding-box 背景的原点在内边距上面
content-box 背景的远在content 内容区域</pre>
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;"> 背景裁剪：
background-clip: border-box,padding-box,content-box;
多重背景：
url("images/bg1.png") left top no-repeat,
url("images/bg2.png") right top no-repeat,
url("images/bg3.png") right bottom no-repeat,
url("images/bg4.png") left bottom no-repeat,
url("images/bg5.png") center center no-repeat;
【 2D转换】可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式
1、移动 translate(x, y) 可以改变元素的位置，x、y可为负值；
2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；
4、旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；
5、倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜
【 过渡 】 我们要完成过渡，我们需要使用一个transition这样的一个属性
过渡 当触发的时候会有过渡的效果
1.transition-property:none|all|某一个属性值
2.transition-duration：多少秒 也就是说过渡效果执行多长时间 默认的是0s
3.transition-timing-function:ease|linear|ease-out|ease-in|ease-in-out|贝塞尔曲线的参数值cubic-bezier(number，number，number，number)|steps（走几步，start|end）
ease：两头慢，中间快
Linear：匀速
Ease-in：开始慢
Ease-out：结束慢
Ease-in-out：开始结束慢
Ease和ease-in-out的区别就是ease-in-out的幅度更大一点
4.transition-delay:延迟多少秒; 默认的是0s
5.transition合写
例如：transition:left 2s ease 1s
【 过渡 】 不用触发自己执行，而且可以做多贞的动画
1.animation-name：none|自己命名
2.animation-duration：动画多长时间
3.animation-timing-function 运动轨迹和过渡的参数是一模一样的，同上
4.animation-iteration-count：infinite|动画执行的次数 默认是1次
5.animation-direction：normal|reverse|alternate|alternate-reverse 方向
alternate往返
alternate-reverse相反的往返
6.animation-play-state：running|paused 让动画暂停或者是继续播放
7.animation-delay延迟
8.animation-fill-mode：none|backwards|forwards|both
动画在开始的时候是否要保持第一针的设置，动画在结束的时候是否保持结束时的状态
None：不做设置
Backwards动画开始在第一贞的状态
forwards结束的时候保持动画最后那贞的状态
Both开始的时候保持第一贞的状态，结束的时候保持结束时候的状态
9.合写 animation
animation：abc 2s ease 0s 1 normal none running
1 播放次数
Normal 方向 direction
None fill-mode
Running 播放状态
动画贞两种书写方式
@-webkit-keyframes abc{
0%{left:0;top:0;}
50%{left:250px;top:100px;}
100%{left:500px;top:0;}
}
@-webkit-keyframes abcd{
0%{color:#fff;}
100%{color:#000;}
}
@-webkit-keyframes abcde {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
1、伸缩布局
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
如下图：
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
（1）必要元素：
1.flex-direction
决定主轴的方向，即项目排列的方向，有四个可能的值：row(默认)|row-reverse|column|column-reverse
row:主轴为水平方向，项目沿主轴从左至右排列
column：主轴为竖直方向，项目沿主轴从上至下排列
row-reverse：主轴水平，项目从右至左排列，与row反向
column-reverse：主轴竖直，项目从下至上排列，与column反向
2、flex-wrap
默认情况下，item排列在一条线上，即主轴上，flex-wrap决定当排列不下时是否换行以及换行的方式，可能的值nowrap(默认)|wrap|wrap-reverse
nowrap：自动缩小项目，不换行
wrap：换行，且第一行在上方
wrap-reverse：换行，第一行在下面
3、flex-flow
是flex-direction和flex-wrap的简写形式，如：row wrap|column wrap-reverse等。默认值为row nowrap，即横向排列 不换行。
4、justify-content
决定item在主轴上的对齐方式，可能的值有flex-start（默认），flex-end，center，space-between，space-around。当主轴沿水平方向时，具体含义为
flex-start：左对齐
flex-end：右对齐
center：居中对齐
space- between：两端对齐
space-around：沿轴线均匀分布
5、align-items
决定了item在交叉轴上的对齐方式，可能的值有flex-start|flex-end|center|baseline|stretch，当主轴水平时，其具体含义为
flex-start：顶端对齐
flex-end：底部对齐
center：竖直方向上居中对齐
baseline：item第一行文字的底部对齐
stretch：当item未设置高度时，item将和容器等高对齐
6、align-content
该属性定义了当有多根主轴时，即item不止一行时，多行在交叉轴轴上的对齐方式。注意当有多行时，定义了align-content后，align-items属性将失效。align-content可能值含义如下（假设主轴为水平方向）：
flex-start：左对齐
flex-end：右对齐
center：居中对齐
space- between：两端对齐
space-around：沿轴线均匀分布
stretch：各行将根据其flex-grow值伸展以充分占据剩余空间
四、flex item属性详述
item的属性在item的style中设置。item共有如下六种属性
1、order
order的值是整数，默认为0，整数越小，item排列越靠前
<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><div class="wrap">
<div class="div" style="order:4"><h2>item 1</h2></div>
<div class="div" style="order:2"><h2>item 2</h2></div>
<div class="div" style="order:3"><h2>item 3</h2></div>
<div class="div" style="order:1"><h2>item 4</h2></div>
</div></pre>
2、flex-grow
定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例，如
<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><div class="wrap">
<div class="div" style="flex-grow:1"><h2>item 1</h2></div>
<div class="div" style="flex-grow:2"><h2>item 2</h2></div>
<div class="div" style="flex-grow:3"><h2>item 3</h2></div>
</div></pre>
即当有多余空间时item1、item2、和item3以1：2:3的比例放大。
3、flex-shrink
定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同item的缩小比例。flex-grow
4、flex-basis
表示项目在主轴上占据的空间，默认值为auto。如下代码
<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><div class="wrap">
<div class="div" style="flex-basis:80px"><h2>item 1</h2></div>
<div class="div" style="flex-basis:160px"><h2>item 2</h2></div>
<div class="div" style="flex-basis:240px"><h2>item 3</h2></div>
</div></pre>
5、flex
flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和。
6、align-self
align-self属性允许item有自己独特的在交叉轴上的对齐方式，它有六个可能的值。默认值为auto
auto：和父元素align-self的值一致
flex-start：顶端对齐
flex-end：底部对齐
center：竖直方向上居中对齐
baseline：item第一行文字的底部对齐
stretch：当item未设置高度时，item将和容器等高对齐
3、Web字体
3.1 字体格式
不同浏览器所支持的字体格式是不一样的，所以我们有必要了解一下有关字体格式的知识。
1、TureType(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
2、OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
3、Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
4、Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
5、SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。
推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体
3.2 字体图标
下载自定义图标放到项目中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试字体图标的使用</title>
<!-- 1.引入字体图标样式 -->
<link rel="stylesheet" href="iconfont.css">
<style type="text/css">
@font-face {
/* 1.首先指定字体的系列,我们指定为字体图标 */
font-family: "iconfont";
/* 2.接下来的代码指定了字体图标的路径,兼容了各种移动端浏览器和PC端浏览器,你可以根据自己的需要,删除不必要的兼容 */
src: url('iconfont.eot?t=1541904002925'); /* IE9*/
src: url('iconfont.eot?t=1541904002925#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.ttf?t=1541904002925') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1541904002925#iconfont') format('svg'); /* iOS 4.1- */
}
/* 3.这里设置字体图标的默认样式,你可以更改默认样式 */
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 4.下面的代码就是我们的字体图标使用时引入的代码,通过伪元素 :before 引入的 */
.icon-guangpan:before { content: "\e604"; }
.icon-zanting:before { content: "\e64b"; }
.myfontcss{
font-weight:900;font-size:30px;
}
</style>
</head>
<body>
<!-- 3.使用时,需要引入2个class类,iconfont是必须引入的,另外一个是指定字体图标的名称 -->
<!-- 另外我们可以给每个字体图标另外的样式 -->
<span class='myfontcss iconfont icon-guangpan'></span>
<span class='iconfont icon-guangpan'></span>
</body>
