前端基础CSS3

　　知识点1：CSS3
　　CSS3是CSS语言的最新版本，旨在扩展CSS2.1，它增加了许多新特性与新的布局方式。
　　为了加快那些已经确认没有问题的特性的标准化速度，CSS3划分了一系列相互独立的模块，按照各自进度来进行标准化。因此现在标准CSS包括修订后的CSS2.1以及完整模块对它的扩充，模块的level数并不一致。W3C会定期发布snapshots（快照），列出CSS2.1和成熟的模块。
　　有的CSS模块已经十分稳定，使用时也不必添加前缀，其状态为CSSWG规定的三个推荐品级之一：候选推荐、建议推荐或推荐。不稳定的特性应以浏览器引擎为前缀并谨慎使用。
　　知识点2：颜色模块Level3
　　1.增加opacity属性，用于指定元素透明度，可为0.0~1.0。被应用元素和其子元素会被当成一个整体看待，具有相同透明度，即便子元素有不同opacity值；
　　2.可使用hsl()、hsla()、rgba()、rgb()来创建color值；
　　3.transparent颜色目前是真彩色而且是rgba(0, 0, 0, 0.0)的别名。
　　知识点3：选择器Level3
　　1.增加子串匹配的属性选择器，E[attribute^=＂value＂]，E[attribute$=＂value＂]，E[attribute*=＂value＂]；
　　2.增加新的伪类，如:enabled，:disabled，:checked，:nth-child，:nth-of-type，:empty，:not等；
　　3.伪元素使用两个冒号而不是一个冒号来表示；
　　4.新的普通兄弟选择器~，用于选择＂某元素后所有同级的指定元素＂。
　　知识点4：媒体查询
　　使用@media媒体查询，可以针对不同的设备定义不同的样式。其包含一个可选的媒体类型和零或多个媒体特性表达式（表达式要用括号），语法为：@media mediatype and|not|only (media feature) {CSS-Code;}，也可以在link中使用media=＂mediatype and|not|only (media feature)＂属性来针对不同媒体使用不同样式表。
　　可以使用not（对整个媒体查询取反）、and（同时满足）和only（防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式）来构建复杂的媒体查询。若使用了not或only则必须指定一个媒体类型。也可以将多个媒体查询以逗号分隔放在一起，相当于or。
　　常见媒体查询有：
　　//宽高比为16:9或者16:10的宽屏设备
　　@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { CSS-Code }
　　//向显示在设备最大宽度800px的屏幕上的文档应用样式表
　　//设备处于竖屏模式
　　@media all and (orientation: portrait) { CSS-Code }
　　//可视区域的宽度在500到800px之间的屏幕
　　@media screen and (min-width: 500px) and (max-width: 800px) { CSS-Code }
　　知识点5：背景与边框模块Level3
　　1.支持多背景图片，例：background-image:url(bg_flower.gif),url(bg_flower_2.gif);
　　2.新增属性background-size规定背景图片的尺寸，例：background-size:63px 100px;
　　3.新增属性background-origin规定背景图片的定位区域，例：background-origin:content-box;
　　4.支持圆角边框：border-radius，该属性是一个简写属性，也可分别设置四个属性：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。例：border-radius:25px;
　　5.支持图片创建边框：border-image，该属性是一个简写属性，用于设置border-image-source图片路径、border-image-slice图片边框向内偏移、border-image-width图片边框宽度、border-image-outset图像区域超出边框的量、border-image-repeat是否平铺铺满或拉伸。例：border-image:url(border.png) 30 30 round;
　　6.支持元素阴影：box-shadow。例：box-shadow: 10px 10px 5px #888888;前两个值必须，为水平阴影与垂直阴影的位置。
　　知识点6：值和单位模块Level3
　　1.initial（最初值）和inherit（从父元素继承值）关键字能被用于任意CSS属性中；
　　2.定义了新的相对字体长度单位：rem和ch。rem相对于html的font-size，而1ch=1英文=1数字=0.5汉字。
　　3.定义了相对视口长度单位：vm，vh，vmax和vmin。vw为可视区域宽度，总宽度为100vw，vh为可视区域高度，总高度100vh，vmin在可视区域宽度和高度取小，vmax则取大。
　　知识点7  . 盒模型
　　7.01 、盒子模型的概念
　　所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容，内边距(padding)，边框(border)和外边距(margin)组成。
　　a、网页就是多个盒子嵌套排列的结果
　　b、内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中
　　c、外边距是该元素与相邻元素之间的距离
　　d、如果给元素定义边框属性，边框将出现在内边距和外边距之间
　　注意:虽然盒子模型拥有内边距，边框，外边框，宽和高这些基本属性，但是并不是要求每个元素都必须定义这些属性。
　　2 . 边框属性
　　border：设置元素的边框（width stylecolor）/四边宽度，四边样式，四边颜色
　　border-width：设置元素边框的宽度、像素值
　　border-style：设置元素边框的样式 none：无(默认)/solid(单实线)/dashed(虚线)/dotted(点线)/double(双实线)
　　border-color：设置元素边框的颜色
　　7.01、单独设置元素上边框
　　border-top ：宽度/样式/颜色
　　border-top-width ：宽度
　　border-top-style ：样式
　　border-top-color：颜色
　　7.02、单独设置元素右边框
　　border-right：宽度/样式/颜色
　　border-right-width：宽度 border-right-style：样式 border-right-color：颜色
　　7.03、单独设置元素的下边框
　　border-bottom：宽度/样式/颜色
　　border-bottom-width：宽度
　　border-bottom-style：样式
　　border-bottom-color：颜色
　　7.04、单独设置元素的左边框
　　border-left：宽度/样式/颜色
　　border-left-width：宽度
　　border-left-style：样式
　　border-left-color：颜色
　　7.05、综合设置边框
　　像border，border-top等这样，能够一个属性定义元素的多种样式，在CSS中称之为复合属性。
　　常用的复合属性有font、border、margin、padding和background等。
　　复合属性可以简化代码，提高页面的允许速度，但是如果只有一项值，最好不要用复合属性，以免样式不被兼容。
　　Tips:
　　a. 表单的边框通常改为0;
　　Border：0 none；//兼容所有浏览器
　　b. 表格的细线边框
　　Table{border-collapse：collapse；}
　　c. 轮廓(链接有虚线和文本框有蓝色边框)
　　Outline-style：none；
　　Padding属性用于设置内边距,也是复合属性,相关设置如下:
　　Padding-top：上内边距
　　Padding-right：右内边距
　　Padding-bottom：下内边距
　　Padding-left：左内边距
　　Padding：上内边距、右内边距、下内边距 、左内边距
　　内边距是享有背景色的
　　7.06、外边距属性
　　Margin属性用于设置外边框,也是复合属性,相关设置如下：
　　Margin-top：上外边距
　　Margin-right：右外边距
　　Margin-bottom：下外边距
　　Margin-left：左外边距
　　Margin：上外边距/右外边距/下外边距/左外边距
　　Margin相关属性的值，以及符合属性margin取1~4个值得情况与padding相同
　　外边距可以使用负值，使相邻元素重叠
　　对块元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局,实例代码如下：
　　.header{width:960px;margin:0 auto};
　　为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：
　　*{padding:0 /*清除内边距*/
　　Margin:0; /*清除外边距*/}