CSS3主要内容1.CSS选择器CSS3选择器规范地址：https://www.w3.org/TR/2011/RE...CSS3最新选择器规范：https://www.w3.org/TR/selectors!---问题---！1、CSS全称是什么？层叠样式表2、样式表的组成：CSS选择器+CSS声明块：（一一CSS声明：属性名+属性值）3、浏览器读取和编译CSS的顺序？CSS选择器的解析顺序：从右到左。这样做是为了减少无效匹配的数量，使匹配更快，性能更好。1.基本选择器*,html,.,#,space,>,+,~,,(1)通配符选择器：*{}(2)元素选择器：body{}任何HTML元素(3)类选择器：..list{}(4)ID选择器：##list{}(5)后代选择器：space.listli{}(6)选择器分组：使用逗号分隔每个选择器h1,h2,h3{color:pink;}这里的逗号称为组合基本选择器扩展（7）子元素选择器：>，又称为直系后代选择器，这类选择器只能匹配到直系后代，不能匹配到深后代元素。#wrap>.inner{color:pink;}(8)相邻兄弟选择器：+，只会匹配紧跟其后的兄弟元素。#wrap#first+.inner{color:#f00;}(9)通用兄弟选择器：~，它将匹配所有兄弟元素（无需跟）。#wrap#first~div{border:1pxsolid;}2.属性选择器（1）存在且取值属性选择器[attr]：该选择器选择所有包含attr属性的元素，不管attr的值是多少。[attr=val]：这个选择器只选择所有attr属性被赋值为val的元素。[attr~=val]：该选择器只选择attr属性的值中包含val值的所有元素（多个值用空格分隔），比如多个class中的一个用空格分隔kind。(2)子串值属性选择器[attr|=val]：选择attr属性值为val（含val）或以val-开头的元素。[attr^=val]：选择attr属性值以val开头（包括val）的元素。[attr$=val]：选择attr属性值以val结尾（包括val）的元素。[attr*=val]:选择attr属性值包含字符串val的元素。3.伪类和伪元素选择器(1)链接伪类：注意：link,:visited,:target作用于链接元素！:link：表示所有超链接的锚点，指向未访问的地址。:visited:代表所有的锚点，它们是超链接并指向一个访问过的地址。:target：表示一个特殊元素，其id为URI的片段标识符。(2)Dynamic伪类：注意:hover和:active基本可以作用于所有元素！:hover：表示悬停在元素上。:active：匹配被用户激活的元素（点击并按住）。由于a标签的:link和:visited可以覆盖所有a标签的状态，当:link、:visited、:hover、:active同时出现在a标签上时，:link和:visited不能放在最后！！！Privacyand:visitedselector:只有以下属性可以应用于visitedlinks:colorbackground-colorborder-color(3)表单相关伪类:enabled:匹配可编辑表单:disable:匹配禁用表单:checked:匹配选中的表单:focus:匹配聚焦的表单(4)结构伪类索引的值从1开始计数！！！！index可以是变量n（只能是n）index可以是偶数，奇数#wrapele:nth-child(index):表示匹配#wrap中index的子元素，这个子元素必须是ele#wrapele:nth-of-type(index)：表示匹配#wrap中index的ele子元素另外，:nth-child和:nth-of-type还有一个重要的区别！！:nth-of-type以元素为中心！！！:nth-child(index)系列：first-child:last-child:nth-last-child(index):only-child（相对于：first-child:last-child或:nth-child(1):nth-last-child(1)):nth-of-type(index)series:first-of-type:last-of-type:nth-last-type(index):only-of-type（相对于:first-of-type:last-of-typeor:nth-of-type(1):nth-last-of-type(1)):not:empty（内容必须为空，没有空格，有attr无所谓)(5)伪元素::after::before::firstLetter::firstLine::selection4.CSS语句的优先级(1)选择器的特异性选择器的特异性由选择器本身的组成部分决定，特异性值表示为4个部分，比如0,0,0,0a的具体特异性selector确定如下：1.对于选择器中给出的ID属性值，添加0,1,0,02。对于选择器中给出的每个类属性，属性选择，或者伪类，添加0,0,1,03.对于选择器中给定的元素和伪元素，添加0,0,0,14。通配符选择器的特殊性是0,0,0,05。组合对选择器的特异性没有贡献6.内联声明的特异性都是1,0,0,07。继承没有特殊性。特异性1,0,0,0大于所有以0开头的特异性（无进位）选择器的特异性最终会被授予其对应的声明如果多个规则匹配同一个元素，并且某些声明相互冲突,specificity越大越显性注意区分：id选择器和属性选择器div[id="test"](0,0,1,1)和#test(0,1,0,0)(2)Importantstatement有时某条语句比其他所有语句都更重要，css2.1称为importantstatement，允许在这些声明的结束分号前插入!important，表示必须准确放置!important或声明是无效的。!important总是放在声明的末尾，分号之前。标记为!important的声明没有特殊的特异性值，但与非重要声明分开考虑。几乎所有重要声明都由浏览器分组，重要声明之间的冲突在内部解决。不重要的声明也归为一组，与不重要声明的冲突在其中解决。如果一个重要的陈述与一个不重要的陈述相冲突，那么重要的陈述总是获胜。(3)继承继承没有特殊性，甚至不是0特殊性。0特异性强于无特异性。(4)SourceCSS样式的来源大致有3种：CreatorReaderUser-AgentWeight:Reader'sImportantStatementCreator'sNormalStatementReader'sNormalStatementUser-AgentStatement(5)Cascading1.找到所有相关规则，其中每一个包含一个选择器。2.计算语句的优先级是先按来源排序，再按选择器的特殊性，最后依次排序2.自定义字体@font-face：允许网页开发者为他们的网页指定在线字体。通过作者自己的字体这种方式，可以消除对用户电脑字体的依赖。font-family：指定的字体名称将用于font或font-family属性。src：字体资源。注意：@font-face不能在CSS选择器中定义。3.新的UI方案1.新的文字样式(1)opacityopacity属性规定了一个元素的透明度。默认值：1.0，不可继承。(2)新颜色样式rgba(3)文字阴影(text-shadow)text-shadow用于给文字添加阴影，可以添加多层，阴影值之间用逗号分隔。（当有多个阴影时，第一个阴影在最上面）默认值：none，不可继承。(4)文字描边(-webkit-text-stroke)只有webkit内核支持：-webkit-text-stroke(准确的说不能算是CSS3，但要知道)。(5)文字排版方向：控制文字的方向，必须与unicode-bidi:bidi-override;配合使用。text-overflow：确定如何用信号通知未向用户显示的溢出内容。可以裁剪显示一个省略号('...')2.boxmodel的新样式(1)Boxmodelshadowbox-shadowbox-shadow是一个逗号分隔的列表，用来描述一个或多个阴影效果，它几乎可以用于任何元素。如果元素也有border-radius集，阴影也会有圆角。多个阴影与多个文本阴影具有相同的规则（第一个阴影在顶部）。默认值：none，不可继承。（2）Reflection-webkit-box-reflect-webkit-box-reflect设置元素的反射（准确的说不能算是CSS3，但是需要知道）。默认值：无，不可继承。(3)resizeresizeCSS属性允许您控制元素的大小调整。（必须与overflow:auto一起使用）默认值：none，不可继承。(4)box-sizingbox-sizing属性用于改变默认的CSS盒模型，用于计算元素的宽度和高度。此属性可用于模拟不正确支持CSS框模型规范的浏览器的行/列行为。默认值：content-box，不可继承。3.新的UI风格(1)圆角border-radiusborder-radius默认值：0，不可继承。(2)borderimageborder-imageborder-image：CSS属性允许在元素的边框上绘制图像。这样可以更轻松地绘制复杂的外观组件。使用border-image时，会替换border-style属性设置的边框样式。默认值：不可继承border-image-source:noneborder-image-slice:100%border-image-width:1border-image-outset:noneborder-image-repeat:stretch(3)backgroundbackground(4)gradientCSSgradientyesCSS3ImageModule中新增的图像类型；使用CSSGradient在两种颜色之间创建平滑的渐变效果。使用它代替图像可以加快页面加载时间并减少带宽使用。同时，由于渐变是由浏览器直接生成的，在页面缩放时效果优于图片，可以更灵活方便地调整页面布局。浏览器支持两种渐变：线性渐变（linear）、径向渐变（radial）由linear-gradient函数定义，由radial-gradient函数定义。4.布局扩展1.flex布局CSS3弹性盒（FlexibleBox或Flexbox），是一种布局模式，用于在页面上排列元素，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行/列.对于许多应用程序，弹性盒模型提供了对块模型的改进，因为它不使用浮动，弹性容器的边缘也不会与其内容的边缘一起折叠。弹力盒模型，分为旧版和新版：旧版通常称为`box`，新版通常称为`flex`。主轴和侧轴由`flex-direction`/`-webkit-box-orient`确定有新版本为什么还要旧版本？（新版比老版强大很多）很多手机浏览器内核版本超低。(1)旧版容器设置显示为webkit-box（注意：items总是排列在主轴上）-webkit-box-orient属性本质上决定了哪个主轴是水平的：x轴垂直：y轴（注意：项目总是沿主轴的正方向排列）-webkit-box-direction属性实质上改变了主轴的方向-webkit-box-direction:normal;-webkit-box-方向：反向；丰富的空间管理（主轴）startendcenterjustify-webkit-box-pack:start;不会给项目区分配空间，只会确定富空间管理的富空间（侧轴）startendcenter-webkit-box-align:center的位置；不会分配项目区空间，只是确定丰富空间的位置弹性空间管理：将丰富空间按比例分配给每个item-webkit-box-flex:1;默认值：0，不可继承(2)新版容器的布局方向flex-direction:row;弹性方向：列；容器排列方向flex-direction:row-reverse;弹性方向：列反转；更强大的丰富空间管理（主轴）justify-content:flex-start；flex-startflex-endcenterspace-betweenspace-around(box没有)更强大丰富的空间管理(侧轴)align-items:stretch;flex-startflex-endcenterbaseline(box没有)stretch(box没有)elasticspacemanagementflex-grow:12.新的flex布局详解https://developer.mozilla.org...3.响应式布局核心：媒体查询选择器CSS3媒体查询是响应式解决方案的核心。(1)媒体类型all:所有媒体braille:brailletactiledevicesembossed:brailleprintersprint:handhelddevicesprojection:printpreviewscreen:colorscreenspeech:"auditory"类似媒体设备tty:不应用像素的设备tv:电视（2）Mediacharacteristics（媒体属性）width（可加maxmin前缀）height（可加maxmin前缀）min-width：分辨率宽度大于设定值时识别max-width：分辨率宽度时识别小于设置值device-width（可加maxmin前缀）device-pixel-ratio：像素比（可加maxmin前缀，webkit前缀是必须的）orientation：portrait：竖屏orientation：landscape：横屏(3)operators,keywordsand:ConnectionmediapropertiesConnectionmediaattributes,connectionmediatypesAllconnectionoptionsmustmatchsuccessfultoapplytheruleor:类似于and，只要所有连接选项都匹配成功，则rulescanbeappliednot:Excludethespecifiedmediatypeonly:指定特定的媒体类型可防止不支持具有媒体属性的查询的旧浏览器应用于给定样式。@mediaonlyscreenand(min-width:800px){rules;rules}@mediascreenand(min-width:800px){rules;rules}@mediaonly--->因为没有onlyintheoldbrowserForthisdevice,therulesareignored.@mediascreen--->因为有screen这样的设备，旧的浏览器会忽略带有media属性的查询。建议只在每次写媒体查询时包含。4.多列布局（columnlayout）（1）列宽column-width指定每列的宽度（这是多列布局的第一种方法）（2）列数column-count指定需要多少列（这是多列布局的第二种划分方式）（3）列距column-gap（4）列间隔线column-rule过渡2d/3d变形动画
