站点：前端开发文档原文：CSSSelector原文：CSSInheritanceProperties原文：CSS3CoreModule原文：CSSBoxModel原文：CSSBackgroundImage原文：CSSClearFloat原文：CSSPositioningCSSSelectorUnion：分组选择器，分组选择器可以共享相同的声明。用逗号分隔需要分组的选择器。h1,h2,h3,h4,h5,h6{}的交集{}：两个属性属于同一个元素p.name{},p#id{},.name1.name2{}后代（derived）：根据位置元素的关系定义样式，以空格隔开，后代选择器尽量不要超过3个，每一层不必一一列出，写重点即可listrong{}Children：只能被选为一个元素的子元素,只选择子元素，不选择h1>strong{}siblingsandadjacentsiblingsforfuturegrandchildren：选择紧跟在另一个元素之后的，并且都具有相同的父元素h1+p{}属性：pairwithStyleHTML元素with指定属性，权重10属性选择器：使用title属性设置所有元素的样式，[title]{}属性和值选择器：使用title="name",[title=name]{}设置所有元素的样式设置表单的样式：input[type="text"]{}伪类：：active：激活元素：focus：具有键盘输入焦点的元素：hover:mouseover:link:notVisitedlink:visited:visitedlink:first-child:element:lang:具有指定lang属性的元素weight:div(1)class/classselector(10)id(100)结构选择器(新伪类(面试题)):not:excluded:nth-child(n):元素个数从1开始设置:nth-child(2n):偶数元素从0开始设置:nth-child(2n+1):奇数元素:nth-of-type(n):一个元素下同类型元素的个数:nth-last-child:倒数第二个元素:first-child->:nth-child(1)::fisrt-of-type:同级第一个兄弟元素:last-of-type:同级最后一个兄弟元素:nth-of-type(n):兄弟元素的个数：last-child:最后一个子元素:only-child:只有一个子元素:only-of-type:只有一个相同类型的子元素:empty:空内容:checked:selected主要用于输入表单元素属性选择器E[attr=val]:E[attr|=val]:只能等于val或startwithval-E[attr*=val]:containsvalstringE[attr~=val]:有多个属性值，其中一个是valE[attr^=val]:startwithvalE[attr$=val]:endwithval目标伪类选择器：target():用于匹配url指向的目标元素（样式效果只有在有是指向匹配元素的URL才会生效)伪元素::first-line:匹配文本的第一行，仅用于块级元素:first-letter:匹配第一个字符:before/:after:插入DOM元素前后附加内容遇到伪元素前/后，添加content=''display:block;:独占行显示:inline-block;:不独占行CSS继承属性非继承属性显示:指定类型元素应该生成的box的ofText属性：vertical-align:垂直文本对齐text-decoration:添加文本装饰text-shadow:文本阴影效果white-space:空白处理unicode-bidi:设置文本Box的方向模型属性：width,heightmargin,margin-top/right/bottom/leftborder,border-top/right/bottom/leftborder-style,border-top/right/bottom/left-styleborder-width,border-top/right/bottom/left-widthborder-color,border-top/right/bottom/left-colorpadding,padding-top/right/bottom/leftBackground属性：backgroundbackground-colorbackground-imagebackground-repeatbackground-positionbackground-attachmentPositioning属性：floatclearpositiontop/right/bottom/leftmin-width/min-height,max-width/max-heightoverflowclipz-indexgenerate内容属性：contentcounter-resetcounter-increment轮廓样式属性：outline-styleoutline-widthcounter-coloroutline具有继承属性fontfamily属性font：组合字体font-family：字体家族font-weight：字体粗细font-size：字体大小font-style：字体样式font-variant：小写字母转换为大写，以及字体大小较大小字体拉伸：所有主流浏览器都不支持当前字体系列的拉伸和变形。font-size-adjust：为元素指定aspect值，保留首选字体的x-height文本系列属性text-indent：文本缩进text-align：文本水平对齐line-height：行高word-spacing：wordspacingletter-spacing：字符间距text-transform：控制文字大小写方向：文字书写方向color：文字颜色元素visibility：表格布局属性caption-sideborder-collapseborder-spacingempty-cellstable-layoutlist布局属性list-style-typelist-style-imagelist-style-positionlist-style生成的内容属性：quotescursor属性：光标页面样式属性pagepage-break-insidewindowsorphansCSS3核心模块transitionanimationtransition：过渡动画transition-property：transition属性all[attr]transition-duration：Transitiontimetransition-delay：延迟时间transition-timing-function：操作类型ease：（逐渐减速）默认值linear：匀速ease-in：加速ease-out:slowdowncubic-bezier:贝塞尔曲线过渡动画效果思路步骤:找到transition属性找到transition属性的startvalue和endvalue将transition属性添加到合适的位置2Dtransformationtransform:deformation属性rotate():rotationfunctiondeg:degreetransform-origin:旋转基点skew():倾斜函数skewX()skewY()scale():缩放函数默认值为1scaleX()scaleY()translate():位移函数translateX()translateY()animation-declarationofkeyframesKeyframes-@keyframes类似于flash定义动画中各阶段的样式，即帧动画关键帧的时间单位数：0%、25%、100%等（设置某段时间任意点的样式）字符：from(0%),to(100%):格式@keyframes:动画名称{动画状态}animation-调用动画必备属性animation-name：动画名称（关键帧名称）animation-duration：动画执行时间可选属性：animation-timing-functionlinear：匀速ease：bufferease-in：从慢到快ease-out：从fasttoslowease-in-out：从慢到快再慢ease-bezier(num,num,num,num)：具体贝塞尔曲线类型，4个值需要在区间[0,1]动画-delay：动画延迟animation-iteration-count：重复次数animation-direction：动画运行的方向normal|reverse|alternate|alternate-reverseanimation-play-state：动画状态running|pausedanimation-fill-mode：动画结束后的状态none|forwards|backwards|both3D变换transform-style:flat|preserve-3d:3D空间显示perspective:景深效果transform:perspective(800px):直接作用于子元素transform:newfunctiontranslate3d(tx,ty,tz):translateX()translateY()translateZ()rotate3d(rx,ry,rz,a):rotateX()rotateY()rotateZ()scale3d(sx,sy,sz):sacleX()sacleY()sacleZ()filletborder-radiusborder-radius:1-4digits/1-4digits水平半径/verticalradius四位数方向分别为左上、右上、右下、左下，no/则水平半径与垂直半径相同border-radius:10px/5px;border-radius:60px40px30px30px/30px20px10px5px示例：圆椭圆半圆扇形线性渐变linear-gradientlinear-gradient:([<起点>||<角度>,]?<点>,<点>...)只能用于背景上的颜色沿线性轴变化参数startingpoint:startgradientdirectionangle:startgradientanglepoint:渐变点的颜色和位置repeatlineargradientradialgradientradial-gradientradial-gradientcolorgradient从“一点”到multipledirectionsshape:ellipse,circleorsetthehorizo??ntalradius,verticalradiussize:渐变的大小，即渐变停止的位置:closet-side:最左边farthest-side:最远的边close-corner:最近的cornerfarthest-corner:最远的角（默认）position:keyword|价值|percentageRepeatedradialgradientbackground-originpadding-box:displayborder-boxfrompaddingarea:displaycontent-boxfromborderarea:displaybackground-clippadding-boxfromcontentarea:border-boxiscropedoutwardfromthepaddingarea:content-背景-boxiscropoutwardfromborderarea:textiscropoutwardfromthecontentareatext:textiscropedbackground-size100%100%:percentage10px10px:valuecontain:按原比例缩小，背景图片完整，但不一定coveringtheentirecontainercover:按原比例缩小，背景图可能显示不全，但覆盖了整个容器box-shadow:hvblurspreadcolorinset;h:水平偏移v:垂直偏移blur:模糊半径spread:扩展半径color:colorinset:内阴影，默认为外阴影text-shadow:xyblurcolorx轴偏移y轴偏移创建立体文字效果，设置多种颜色，中间用逗号分隔文字，添加边框text-stroke:2pxblue通过设置1px的透明边框，可以改变文字将平滑颜色设置为透明来创建空心字体过滤器-webkit-filter:normal;:normal-webkit-filter:grayscale(1);:灰度，取值范围0-1-webkit-filter:brightness(0);:亮度，取值范围0-1-webkit-过滤器：invert(1);：反色，取值范围0-1，0为原图，1为完全反色-webkit-filter:sepia(0.5);：叠加棕色，取值范围0-1-webkit-filter：hue-rotate(30deg);:色调（按色相圈旋转，顺时针方向）（红-橙-黄-黄-绿-绿-蓝-绿-蓝-蓝-紫-紫-紫-红）这里为叠加黄色filter-webkit-filter:saturate(4);：饱和度，取值范围0-*，0为无饱和度，1为原图，值越高饱和度越大-webkit-filter:contrast(2);：对比度，取值范围0-*，0为无对比度（灰色），1为原图，值越大对比度越大-webkit-filter:opacity(0.8);：透明度，取值范围0-1，0为全透明，1为原图遮罩mask-image:mask-position:mask-repeat:CSSboxmodelborderbordertrianglearrow:正方形任意两条相邻边，然后旋转一定角度得到我们Arrowborder,border-width,border-style,border-color三角形任意方向需要：border的3个属性：border-width/border-style/border-color，宽高均为0，设置三角形箭头方向设置颜色，设置颜色其他方向是透明的。marginmarginoverlaps：取较大的值，不是两者之和，传递margin-top：大框嵌套小框，小框加上margin-top值，传递给大框，造成整体向下移动。解决margin:float:left的兼容性问题；溢出：隐藏；填充顶部：0/1px；border-top:1pxsolidtransparent;CSS背景图片背景背景主要属性：background-color：背景颜色，简称background不能继承，默认为transparentinherit指定背景颜色，从父元素继承background-image：背景图片url：图片URL地址节点：defaultvalueNoimageisplacedonthebackgroundinherit：指定从父元素继承的背景图一个元素可以引入多张背景图；指定要使用的一张或多张背景图像。默认情况下，background-image放置在元素的左上角，并在垂直和水平方向上重复。属性不能继承background-repeat：background默认重复background-image的垂直和水平方向repeatdefaultrepeat-xonlyhorizo??ntalpositionrepeatrepeat-yonlyverticalpositionrepeatno-repeatnotrepeat从父元素background-position继承：背景定位设置背景图片的起始位置x，y水平位置，垂直位置。左上角为0。单位(px,keyword,percentage)关键字成对出现leftrighttopbottomcenter，只指定一个关键字，其他值将center只设置x轴方向，默认y-axisiscenterinherit从父元素继承background-attachment:背景关联设置背景图像固定或随页面其余部分滚动defaultfixedfixedinherit从父元素继承background-size:背景图像的大小
