属性（长度颜色背景）选择器-盒子模型
1 CSS3 基本语法
1.1 CSS3 浏览器私有前缀
Chorme: -webkit-Safari: -webkit-IE; -ms-Firefox: -moz-Opera: -o-
1.2 CSS3 新增长度单位
rem：根元素字体大小的倍数。注意与 em 的区别。
vw：把视口宽度分为100份，指定占其中的多少份。注意与百分比的区别。
vh：把视口高度分为100份，指定占其中的多少份。
vmax：把视口宽和高中大的分为100份，指定占其中多少份。
vmin：把视口宽和高中小的分为100份，指定占其中多少份。
1.3 CSS3 新增颜色设置方式
rgba()：在rgba的基础上多了不透明度（opacity），取值范围 0 ~ 1 之间的小数（0：完全透明，1：完全不透明）。
hsl()：h:色相（0360）；s：饱和度（0%100%）；l：亮度（0%~100%）。
hsla()：在 hsl 的基础上多了不透明度。
2 CSS3 选择器
2.1 基本选择器（6个）
标签名选择器：
标签名 {}
类名选择器：
.类名 {}
ID选择器：
#ID名 {}
全局选择器：
* {}
并集选择器（多选择器）
选择器1,选择器2,选择器3 {}
交集选择器：
p.item {}.item.current {}
2.2 层级选择器（4个）
后代元素选择器：
选择器1 选择器2 {}
子元素选择器：
选择器1>选择器2 {}选择器1 > 选择器2 {}
选择后面相邻的一个兄弟元素：
选择器1+选择器2 {}
选择后面所有的兄弟元素：
选择器1~选择器2 {}
/* .nav 下除了第一 a，其他都被选择到了 */.nav a+a {border-left: 1px solid #ccc;}
2.3 属性选择器（5个）
[attrName]选择拥有attrName 属性的元素。
[attrName="value"]选择 attrName 属性的值是 value 的元素。
[attrName^="value"]选择 attrName 属性的值以 value 开头的元素。
[attrName$="value"]选择 attrName 属性的值以 value 结尾的元素。
[attrName*="value"]选择 attrName 属性的值中包含 value 的元素。
2.4 伪类选择器
① 动态伪类选择器（5个）
:link选择地址没有被访问过的超链接元素:visited选择地址被访问过的超链接元素:hover选择鼠标悬停在上面的元素。:active选择鼠标在上面并且按键按下不松手的元素:focus选择获取焦点的元素。
② 目标伪类选择器（1个）
:target选择当前锚点指向的元素。
③ 语言伪类选择器 (1个，了解)
lang()根据语言选择元素（lang 属性的值）
④ UI元素伪类选择器（3个）
:enabled选择可以使用的表单控件（没有设置disabled 属性）:disabled选择不可以使用的表单控件（设置了disabled属性）:checked选择到被选中的单选按钮、复选框、下拉选项（option）
⑤ 结构伪类选择器（12个）
:root选择到根元素:empty选择到既不能有文本内容也没有后代元素的元素:first-child所有兄弟元素中的第一个:last-child所有兄弟元素中的最后一个:nth-child(n)所有兄弟元素中的第n个，n是个数字:nth-last-child(n)所有兄弟元素中的倒数第n个，n是个数字:only-child没有兄弟元素的元素:first-of-type所有兄弟元素中同类型的第一个:last-of-type所有兄弟元素中同类型的最后一个:nth-of-type(n)所有兄弟元素中同类型的第n个,n是个数字:nth-last-of-type(n)所有兄弟元素中同类型的倒数第n个，n是数字:only-of-type没有同类型兄弟元素
⑥ 否定伪类选择器（1个）
:not(选择器) 排除满足小括号中选择器的元素
2.5 伪元素选择器（6个）
::first-letter选择元素中第一字母::first-line选择元素中第一行::after给元素动态创建最后一个子元素（必须有content）::before给元素动态创建第一个子元素（必须有content）::placeholder用于设置输入框或文本域中placeholder属性设置的文字的样式::selection用于设置被鼠标选中的文字的样式
2.6 选择器的优先级（权重）
ID选择器 > 类名选择器、伪类选择器、属性选择器 > 标签名选择器、伪元素选择器 > 全局选择器
3 CSS3 新增盒子模型相关样式
① box-sizing 属性
通过设置该属性，决定 width 和 height 设置的是内容的大小还是盒子的总大小。
值：
content-box，默认值，width 和 height 设置的是内容的大小。
border-box, width 和 height 设置的是盒子的总大小。
② 盒子阴影 box-shadow
box-shadow: 3px 2px; /*设置阴影的偏移位置， 颜色默认黑色*/box-shaodw: 3px 3px 5px; /*设置阴影的偏移位置和模糊值*/box-shaodw: 3px 3px 5px #f90; /*设置阴影的偏移位置和模糊值以及颜色*/box-ahdow: 3px 3px 10px 2px #f90; /*2px表示外延*/box-ahdow: 3px 3px 10px inset; /* inset 表示设置内阴影*/box-ahdow: 3px 3px 10px 2px #f90 inset;
/*给元素同时设置 多个阴影*/box-shadow: 3px 0 2px cyan, 0 5px 2px pink,-5px 0 2px green,0 -5px 2px purple;
③ 不透明度 opacity
设置元素整体的不透名度，取值范围是 0 ~ 1 之间的小数，数值越大越不透明，0表示完全透明，1表示完全不透明。
4 CSS3 新增背景属性
4.1 新增属性
background-origin设置背景图调整位置所在坐标系的原点
值：padding-box : 默认值，背景图位置原点在padding区域content-box : 背景图位置原点在内容区域。border-box : 背景图位置原点在边框上。
background-clip裁剪背景图，设置什么范围内的背景图可见
值：border-box : 默认值，边框以及边框以内背景图可见。padding-box : 内边距以及内边距以内背景图可见。content-box : 仅仅内容区域上的背景图可见。text : 只有文字上的背景图可见。需要设置私有前缀。
设置字体颜色是透明色 color: transparent;裁剪背景图片 -webkit-background-clip: text;
background-size调整背景图图片的大小
值：第一种方式： 指定两个长度，第一个是背景图宽度，第二个背景图高度；如果写写了一个长度，被当做宽度，背景图高度根据比例自动算。第二种方式： 使用关键字：contain优先保证背景图全部显示在元素上，可能会造成元素有空白cover 优先保证元素上都会显示背景图，可能会有小部分背景图不可见。推荐使用
3.2 background 复合属性
background: url(../images/bg05.jpg) no-repeat center/300px 300px;
复合属性的相关规则：
background-size 复合到 background 中，需要写在 background-position 值的后面，用
/隔开。background-origin 和 background-clip 值是一样的关键字，设置一个被当做background-origin,设置两个(前面是origin，后面是clip)
3.3 多背景图
CSS3允许一个元素设置多个背景图片。
background: url(../images/bg03.jpg) no-repeat, url(../images/bg04.jpg) no-repeat right top/200px 200px,url(../images/bg05.jpg) no-repeat left center/300px 200px;
