前端知识点总结——C31.复杂选择器1.兄弟选择器兄弟元素：具有相同父元素的兄弟元素称为兄弟元素。1.相邻兄弟选择器作用：获取紧跟在一个元素之后的兄弟元素语法：selector1+selector2{}注意：兄弟选择器只能向后查找，不能向前查找2.概述兄弟选择器的作用：获取所有的兄弟元素后满足条件的元素语法：selector1~selector2{}2.属性选择器1.该角色允许通过附加到元素的属性及其值来匹配元素type="text"2.语法1.基本语法[attr]//属性功能：匹配页面中所有具有attr属性的元素ex:1.[id]匹配页面中所有具有id属性的元素2.[class]匹配页面中所有具有class属性的元素页面2.elem[attr]elem:表示任意元素attr:表示任意属性具有attr属性的elem元素ex:div[id]匹配页面中所有具有id属性的div元素input[type]匹配所有具有type的input元素page.text[placeholder]中的属性匹配页面中的所有占位符属性3.[attr1][attr2]作用：匹配同时具有多个属性的元素ex:div[id][class]4.[attr=value]function:matchattrattributevaluevalueex的元素：//匹配第一个input元素（以下三种写法均可）input[type="text"]input[type=text]input[type='text']3.伪类选择器1.伪类学习链接伪类：:link(notyetvisited):visited(已访问)动态伪类::hover(mouseHover):active(activatedstate):focus(acquirefocus)2.Target伪类功能：高亮激活的HTML锚元素，匹配被激活活锚语法：selector:target{...}div:target{...}#d1:target{...}3.结构伪类函数：通过元素的结构关系（上下嵌套结构）匹配元素1.:first-child匹配的元素属于其父元素的第一个子元素ex:p:first-child{...}//找到父元素的第一个子p元素(p1)2.:last-child匹配的元素是属于其父元素的最后一个子元素ex:p:last-child{...}//找到父元素的最后一个子元素(p3)3.:nth-child(n)匹配元素为其父元素表的第n个子元素tr:nth-child(2)匹配表格第二行的数据4.:empty匹配一个没有子元素的元素5.:only-child匹配一个属于其父元素p:only-child{color:red;}//改变的是p1的颜色4.否定伪类会排除满足指定选择器的元素(no,exclude)语法::not(selector)ex:tabletr:not(:first-child){字体大小:24px;}除第一行外所有行的文字大小变为24px4。伪元素选择器1.:first-letter或::first-letter作用：匹配某个元素的第一个字符2.:first-lineor::first-line功能：匹配元素的第一行（firstline）注意：当第一行与第一个字符冲突时，以第一个字符为准3.::selection匹配元素选中的内容用户注意：只能修改文本颜色或背景颜色2.内容生成1.什么是内容生成使用CSS动态插入一段内容到元素中2.伪元素选择器1.:beforeor::before作用：匹配一个元素之前的内容区域(:before)goosegoose
2.:afteror::after功能：匹配一个元素的内容区域之后Heheridangnoon(:after)
3.Attribute属性：content功能：给匹配的位置添加content值：1.String：用""括起来（普通文本）2.url()：生成图片4.解决问题1.解决div浮动问题：之后{内容：“”；显示：块；清除：两者；}2.子元素上边距溢出问题div:before{content:"";显示：表格；}3。弹性布局（FlexibleLayout）1.什么是弹性布局？灵活布局是一种布局方式，注重解决一个元素中“子元素”的布局方式，为布局提供最大的灵活性二、弹性布局相关概念1、弹性布局的容器弹性布局的容器简称“容器”（子元素的父元素称为容器）2、弹性布局的项弹性布局的项简称为“item”（将实现布局效果的子元素称为“item”）3.主轴item排列方向上的一个轴称为主轴。如果项目沿x轴排列（水平排列），则x轴是主轴。如果物品按照y轴排列（垂直排列），那么y轴就是主轴4.与主轴交叉且与主轴交叉的轴就是交叉轴。如果主轴是x轴，那么y轴就是横轴。如果主轴是y轴，那么x轴就是横轴。三、语法1.flexcontainer将一个元素变成flex容器后，所有的子元素都会变成flexitem，都可以弹性布局。如何将元素变成弹性容器？属性：display取值：1.flex：将fast-level元素转为容器2.inline-flex：将inline元素转为容器注：1.元素设置为flex容器后，float、vertical-align、clearofchildelements将无效2.容器的text-align将无效2.容器的属性1.flex-direction作用：指定容器的主轴及其排列方向。.row-reverse主轴为x轴，起点在末尾3.column主轴为y轴，起点在上4.column-reverse主轴为y-axis，起点在底部2.flex-wrap作用：当一个主轴无法排列时对于所有item，指定子item如何包裹：1.nowrap默认值，即没有时空间足够，item不会wrap，item会自动收缩2.wrapwrap3.wrap-reversewrapreverse3.flex-flow功能：是flex-direction和flex-wrap的缩写取值：1。rownowrap默认值2.directionwrap4.justify-content功能：定义item在主轴上的对齐方式值：1.flex-start在主轴上对齐起点2.flex-end在终点对齐主轴3.space-between两端对齐（常用）4.center主轴上居中对齐5.space-around每个item两端的距离相同5.align-items功能：定义item在横轴上的对齐方式取值：1.flex-start对齐横轴起点2.flex-end对齐横轴的终点3.center对齐横轴的中心4.baseline横轴上的基线对齐5.stretch如果item没有设置size，会占用横轴上的所有空间3.item属性这组属性只能在某个item元素上设置，只控制一个item，不影响容器和其他item的效果1.order功能：定义item的排列顺序，值越小，越靠近起点，默认值为0Value：整数，无单位2.flex-growfunction：定义item的放大比例。如果容器有足够的剩余空间，项目将被放大。value：整数，无单位，默认值0，不放大，值越大，占用的剩余空间越多3.flex-shrinkfunction:定义item的缩小比例，即当item缩小时如何缩小容器空间不足。value：默认值为1，当空间不足时，按比例缩小值为0，不缩小该值（常用）4.align-self函数：定义当前item在十字上的对齐值axis:1.flex-start2.flex-end3.center4.baseline5.stretch6.auto（继承自父元素的align-items属性）4.Transformation1.什么是transformation一种改变的方式页面上元素的位置、大小、角度和形状。2D变换：只发生在x轴和y轴上的变换效果3D变换：增加z轴上的变换效果transform-function表示一个或多个变换函数。如果有多个变换函数，用空格隔开。2.变换原点属性：transform-origin取值：数字/百分比/关键字2个值：表示原点在3个值中为x轴和y轴上的位置：表示原点在坐标轴上的位置x轴、y轴和z轴。默认原点在元素的中心(centercenter)(50%50%)3.2D转换1.Displacement1.什么是displacement改变页面上元素的位置2.语法属性：transformValue:1.translate(x)指定元素在x轴上的位移距离为正，元素向右移动的值为负，元素向左移动2.translate(x,y)指定元素在x轴和y轴上的位移距离x：同上y：值为正，元素向下移动，值为负，元素向上移动3.translateX(x)上的位移x轴4.translateY(y)在y轴上的位移二、缩放1、什么是缩放改变页面上元素的大小2、语法属性：transform值：1.scale(value)值：horizo??ntal或垂直缩放值：默认值为1>1：放大<1：缩小负数：放大（水平和垂直翻转180度）2.scale(x,y)x：水平缩放y：垂直缩放3.单向缩放函数scaleX(x)scaleY(y)3.旋转1.什么是旋转改变页面上元素的角度2.语法属性：transformValue:rotate(ndeg)n:value如果是正数,顺时针旋转n:若为负数,则逆时针旋转注:1.转换原图点会影响最终的变换效果2.旋转与坐标轴一起旋转，会影响旋转后的位移效果2.语法属性：变换值：1.skewX(xdeg)使元素向x轴倾斜direction，实际改变的是y轴的倾斜角度值x：值为正，y轴逆时针倾斜。x：值为负值，y轴顺时针倾斜。倾斜效果，实际改变x轴的倾斜角度值y：值为正，x轴顺时针倾斜y：值为负，x轴逆时针倾斜3.skew(x)等价toskewX(xdeg)4.skew(x,y)4.3D转换1.Perspectivedistance模拟人眼与3D转换元素（z轴）的距离属性：perspective注意：parent要加这个属性3D转换元素的元素2.3D旋转属性：transform值：1.rotateX(xdeg)以x轴为中心轴，旋转元素的角度为正，顺时针旋转2.rotateY(ydeg)以以y轴为中心，旋转元素的角度3.rotateZ(zdeg)以z轴为中心，旋转元素的角度不参与旋转rotate3D(1,0,0,45deg)only在x轴上旋转45度roatate3d(1,1,1,0deg)5.Transition1.什么transition让css属性的值在一段时间内平滑变化Effect2.Transitionsyntax1.Specifytransitionproperty属性：transition-property值：1.所有的transition属性都可以使用，所有的transitions都用来体现。2.具体的属性名称ex:transition-property:background当背景的属性发生变化时，使用Transition-property:border-radius来体现transition-property:border-radius；transition-property:all用于反映边框切角变化时的过渡：1.颜色属性（背景、文字、边框颜色、阴影颜色)2.值为数字的属性（高度、宽度、内外边距等）3.变换属性（位移、旋转、缩放、倾斜）4.阴影属性5.渐变属性6.可见性属性2.指定transitiondurationfunction：指定多久完成transitionoperation属性：transition-durationvalue:valueinsorms1000ms=1s3。指定过渡速度时间曲线函数属性：transition-timing-function取值：1.ease默认值慢开始，快速度，慢结束2.线性匀速3.ease-in慢开始，加速结束4.ease-outfaststart,slowend5.ease-in-outslowstartandend,中间先加速再减速4.指定transition延迟时间属性：transition-delayValue:以s或ms为单位的值5.写入位置transition属性1.将transition放在元素声明的style中并进行管理。回到2.把transition放在触发的操作中（hover）就行了，不要回到6.transition转换的简写形式：propertydurationtiming-functiondelay；ex:transition:background2sease,border-radius2s;过渡：全2；//以上简称6.动画1.什么是动画让一个元素从一种风格逐渐变成另一种风格，也就是把多个转场效果放在一起？动画使用“关键帧”来控制每一个动画一步关键帧：1.定义动画执行的时间点2.这个时间点是什么风格2.使用动画的步骤1.声明动画，定义关键帧frame为动画名称2.指定元素调用的动画为元素调用动画的名称及各参数属性3.定义动画（声明动画）@keyframes动画名称{/*定义动画中的所有关键帧*/0%{/*动画开始时元素的样式*/}25%{/*动画执行到1/4时的样式*/}50%{/*动画执行到一半时的样式*/}75%{/*动画执行到3/4时的样式*/}100%{/*执行结束时的动画样式*/}}4.动画调用（动画属性）1.animation-name功能：指定要调用的动画名称2.animation-duration功能：指定动画执行一个循环的时长值：s或ms中的值3.animation-timing-function功能：指定动画的速度和时间Curve函数取值：ease,linear,ease-in,ease-out,ease-in-out4.animation-dealy函数：指定动画的延迟时间取值：以秒或毫秒为单位的值5.animation-iteration-count函数：指定动画的播放次数值：1.具体次数2.infinite无限次播放6.animation-diretion函数：指定动画的播放方向值：1.normal默认值，normalplay0%-100%2.reverse反向播放100%-0%3.alternateCarousel播放奇数次，正向播放偶数次，反向播放7.Animation速记动画：namedurationtiming-函数延迟迭代计数方向；8.animation-fill-mode作用：指定动画播放前或播放后的状态。取值：1.none默认值2.forwards动画播放完后，保持最后一帧状态3.backwards动画播放前，delay一定时间内，动画保持第一帧状态frame4.向前和向后结合9.animation-paly-state功能：指定动画是播放还是暂停。值：1.paused暂停2.running播放7.CSSHack1。解决问题解决IE浏览器兼容性问题解决方法：针对不同的浏览器编写不同的CSS代码2.CSSHack的原理利用CSS样式的优先级来解决兼容性问题3.CSSHack的实现1.在CSS类Hack内部添加前缀以及样式属性名或属性值前的后缀，方便不同浏览器的识别+:IE6,7前缀-:IE6前缀\0:IESuffixesof8,9,10\9\0:SuffixesofIE9,102.CSSSelectorHack在选择器前添加前缀以识别不同的浏览器*:识别IE6**+:识别IE7div~div{}*div~div{IE6recognition}*+div~div{IE7recognition}3.HTMLheaderreferenceHack使用IE条件注释判断浏览器版本，从而执行不同的代码语法：版本号：6-10条件：1.gt只在指定版本以上的浏览器执行代码ex:2.gte大于等于3.lte小于等于4.lt小于5.!在指定条件以外的浏览器版本执行操作6.省略条件，只在指定版本浏览器执行操作判断是IE浏览器还是指定版本的IE
