前端基础CSS3

　　知识点1：CSS3
　　CSS3是CSS语言的最新版本，旨在扩展CSS2。1，它增加了许多新特性与新的布局方式。
　　为了加快那些已经确认没有问题的特性的标准化速度，CSS3划分了一系列相互独立的模块，按照各自进度来进行标准化。因此现在标准CSS包括修订后的CSS2。1以及完整模块对它的扩充，模块的level数并不一致。W3C会定期发布snapshots（快照），列出CSS2。1和成熟的模块。
　　有的CSS模块已经十分稳定，使用时也不必添加前缀，其状态为CSSWG规定的三个推荐品级之一：候选推荐、建议推荐或推荐。不稳定的特性应以浏览器引擎为前缀并谨慎使用。
　　知识点2：颜色模块Level3
　　1。增加opacity属性，用于指定元素透明度，可为0。01。0。被应用元素和其子元素会被当成一个整体看待，具有相同透明度，即便子元素有不同opacity值；
　　2。可使用hsl（）、hsla（）、rgba（）、rgb（）来创建color值；
　　3。transparent颜色目前是真彩色而且是rgba（0，0，0，0。0）的别名。
　　知识点3：选择器Level3
　　1。增加子串匹配的属性选择器，E〔attributevalue〕，E〔attributevalue〕，E〔attributevalue〕；
　　2。增加新的伪类，如：enabled，：disabled，：checked，：nthchild，：nthoftype，：empty，：not等；
　　3。伪元素使用两个冒号而不是一个冒号来表示；
　　4。新的普通兄弟选择器，用于选择某元素后所有同级的指定元素。
　　知识点4：媒体查询
　　使用media媒体查询，可以针对不同的设备定义不同的样式。其包含一个可选的媒体类型和零或多个媒体特性表达式（表达式要用括号），语法为：mediamediatypeandnotonly（mediafeature）｛CSSC｝，也可以在link中使用mediamediatypeandnotonly（mediafeature）属性来针对不同媒体使用不同样式表。
　　可以使用not（对整个媒体查询取反）、and（同时满足）和only（防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式）来构建复杂的媒体查询。若使用了not或only则必须指定一个媒体类型。也可以将多个媒体查询以逗号分隔放在一起，相当于or。
　　常见媒体查询有：
　　宽高比为16：9或者16：10的宽屏设备
　　mediascreenand（deviceaspectratio：169），screenand（deviceaspectratio：1610）｛CSSCode｝
　　向显示在设备最大宽度800px的屏幕上的文档应用样式表
　　设备处于竖屏模式
　　mediaalland（orientation：portrait）｛CSSCode｝
　　可视区域的宽度在500到800px之间的屏幕
　　mediascreenand（minwidth：500px）and（maxwidth：800px）｛CSSCode｝
　　知识点5：背景与边框模块Level3
　　1。支持多背景图片，例：backgroundimage：url（bgflower。gif），url（bgflower2。gif）；
　　2。新增属性backgroundsize规定背景图片的尺寸，例：backgroundsize：63px100
　　3。新增属性backgroundorigin规定背景图片的定位区域，例：backgroundorigin：
　　4。支持圆角边框：borderradius，该属性是一个简写属性，也可分别设置四个属性：bordertopleftradius、bordertoprightradius、borderbottomrightradius、borderbottomleftradius。例：borderradius：25
　　5。支持图片创建边框：borderimage，该属性是一个简写属性，用于设置borderimagesource图片路径、borderimageslice图片边框向内偏移、borderimagewidth图片边框宽度、borderimageoutset图像区域超出边框的量、borderimagerepeat是否平铺铺满或拉伸。例：borderimage：url（border。png）3030
　　6。支持元素阴影：boxshadow。例：boxshadow：10px10px5px888888；前两个值必须，为水平阴影与垂直阴影的位置。
　　知识点6：值和单位模块Level3
　　1。initial（最初值）和inherit（从父元素继承值）关键字能被用于任意CSS属性中；
　　2。定义了新的相对字体长度单位：rem和ch。rem相对于html的fontsize，而1ch1英文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：设置元素的边框（widthstylecolor）四边宽度，四边样式，四边颜色
　　borderwidth：设置元素边框的宽度、像素值
　　borderstyle：设置元素边框的样式none：无（默认）solid（单实线）dashed（虚线）dotted（点线）double（双实线）
　　bordercolor：设置元素边框的颜色
　　7。01、单独设置元素上边框
　　bordertop：宽度样式颜色
　　bordertopwidth：宽度
　　bordertopstyle：样式
　　bordertopcolor：颜色
　　7。02、单独设置元素右边框
　　borderright：宽度样式颜色
　　borderrightwidth：宽度borderrightstyle：样式borderrightcolor：颜色
　　7。03、单独设置元素的下边框
　　borderbottom：宽度样式颜色
　　borderbottomwidth：宽度
　　borderbottomstyle：样式
　　borderbottomcolor：颜色
　　7。04、单独设置元素的左边框
　　borderleft：宽度样式颜色
　　borderleftwidth：宽度
　　borderleftstyle：样式
　　borderleftcolor：颜色
　　7。05、综合设置边框
　　像border，bordertop等这样，能够一个属性定义元素的多种样式，在CSS中称之为复合属性。
　　常用的复合属性有font、border、margin、padding和background等。
　　复合属性可以简化代码，提高页面的允许速度，但是如果只有一项值，最好不要用复合属性，以免样式不被兼容。
　　Tips：
　　a。表单的边框通常改为0；
　　Border：0兼容所有浏览器
　　b。表格的细线边框
　　Table｛bordercollapse：｝
　　c。轮廓（链接有虚线和文本框有蓝色边框）
　　Outlinestyle：
　　Padding属性用于设置内边距，也是复合属性，相关设置如下：
　　Paddingtop：上内边距
　　Paddingright：右内边距
　　Paddingbottom：下内边距
　　Paddingleft：左内边距
　　Padding：上内边距、右内边距、下内边距、左内边距
　　内边距是享有背景色的
　　7。06、外边距属性
　　Margin属性用于设置外边框，也是复合属性，相关设置如下：
　　Margintop：上外边距
　　Marginright：右外边距
　　Marginbottom：下外边距
　　Marginleft：左外边距
　　Margin：上外边距右外边距下外边距左外边距
　　Margin相关属性的值，以及符合属性margin取14个值得情况与padding相同
　　外边距可以使用负值，使相邻元素重叠
　　对块元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局，实例代码如下：
　　。header｛width：960margin：0auto｝；
　　为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：
　　｛padding：0清除内边距
　　Margin：0；清除外边距｝