前端知识点总结——C3

1.复杂选择器

1.兄弟选择器

兄弟元素：具备相同父元素的平级元素之间称为兄弟元素。 1.相邻兄弟选择器   作用：获取紧紧挨在某元素后的兄弟元素   语法：选择器1+选择器2{}   注意：兄弟选择器，只能向后找，不能向前找 2.通用兄弟选择器   作用：获取某元素后所有满足条件的兄弟元素   语法：选择器1~选择器2{}

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元素   .text[placeholder] 匹配页面中所有带有placeholder属性，并有text类选择器的元素     3.[attr1][attr2]     作用：匹配同时附带多个属性的元素 ex:   div[id][class]      4.[attr=value]     作用：匹配attr属性值为value的元素 ex:          //匹配的是第一个input元素(以下三种写法均可)   input[type="text"]    input[type=text]   input[type='text']

3.伪类选择器

1.已学过的伪类   链接伪类：      :link(尚未访问)  :visited(访问过的)   动态伪类：      :hover(鼠标悬停)  :active(激活状态) :focus(获取焦点) 2.目标伪类   作用：突出显示活动的HTML锚点元素，匹配被激活的锚点。   语法：     选择器:target{...} div:target{...} #d1:target{...}  3.结构伪类  作用：通过元素的结构关系来匹配元素（上下级嵌套结构）   1.:first-child    匹配的元素属于其父元素的第一个子元素
    
   
     
p1
   
     
p2
   
     
p3
    
ex：  p:first-child{...} //找父元素的第一个子p元素(p1)   2.:last-child    匹配的元素是属于其父元素的最后一个子元素    ex:     p:last-child{...}//找父元素的最后一个子元素（p3）      3.:nth-child(n)     匹配的元素是属于其父元素中第n个子元素     table tr:nth-child(2) 匹配表格第二行数据       4.:empty    匹配没有子元素的元素
    
      5.:only-child    匹配的元素是属于其父元素中的唯一子元素

    
      
     
ppppp1
    
    
    
    
      
     
ppppppppp2
      
     ssssssss    
    
    p:only-child{color:red;}//改变的是p1的颜色     4.否定伪类      将满足指定选择器的元素给排除出去（不要了，排除）      语法：

:not(selector)   ex: table tr:not(:first-child){   font-size:24px; }     除第一行以外所有行的文字大小变为24px

4.伪元素选择器

1.:first-letter或::first-letter   作用：匹配某个元素的首字符 2.:first-line 或::first-line   作用：匹配某个元素的首行（第一行）   注意：首行与首字符冲突时，以首字符为准 3.::selection   匹配被用户选取的内容   注意：只能修改文本颜色或背景颜色

2.内容生成

1.什么是内容生成

使用CSS动态的向某元素中插入一段内容

2.伪元素选择器

1.:before或::before   作用：匹配到某元素的内容区域之前   
(:before)鹅鹅鹅
 2.:after或::after   作用：匹配到某元素的内容区域之后   
锄禾日当午(:after)
 3.属性   属性：content   作用：向匹配到的位置处增加内容   取值：       1.字符串：用""引起来（普通文本）   2.url()：生成一副图像 4.解决问题   1.解决浮动问题     div:after{   content:"";   display:block;   clear:both; }   2.子元素上外边距溢出问题     div:before{   content:"";   display:table; }

3.弹性布局（Flexible Layout）

1.什么是弹性布局

弹性布局，是一种布局方式，注意解决某元素中“子元素”的布局方式，为布局提供最大的灵活性。

2.弹性布局的相关概念

1.弹性布局的容器  弹性布局的容器 简称为"容器"（子元素的父元素，称为容器）2.弹性布局的项目  弹性布局的项目 简称为"项目"(要实现布局效果的子元素，称"项目")3.主轴  项目们排列方向的一根轴，就称为主轴  如果项目们按x轴排列（横向排列），那么x轴就是主轴  如果项目们按y轴排列（纵向排列），那么y轴就是主轴4.交叉轴  与主轴交叉的一根轴就是交叉轴  如果主轴是x轴，那么y轴就是交叉轴  如果主轴是y轴，那么x轴就是交叉轴

3.语法

1.flex容器  将元素变为flex容器后，那么所有的子元素将变为flex项目，都允许按照弹性布局的方式排列  如何将元素变为flex容器？  属性：display  取值：     1.flex:将快级元素变为容器 2.inline-flex:将行内元素变为容器注意：  1.元素设置为flex容器之后，子元素的float,vertical-align,clear将失效  2.容器的text-align将失效2.容器的属性  1.flex-direction    作用：指定容器的主轴及其排列方向取值：  1.row 默认值，即主轴为x轴，起点在左端  2.row-reverse 主轴为x轴，起点在有端  3.column 主轴为y轴，起点在顶端  4.column-reverse 主轴为y轴,起点在底端  2.flex-wrap   作用：当一个主轴排列不下所有项目时，指定子项目如何换行   取值：      1.nowrap 默认值，即空间不够时，也不换行，项目会自动缩小  2.wrap 换行  3.wrap-reverse 换行反转  3.flex-flow   作用：是flex-direction和flex-wrap的缩写形式   取值：      1.row nowrap 默认值  2.direction wrap  4.justify-content   作用：定义项目在主轴上的对齐方式   取值：     1.flex-start   在主轴的起点对齐 2.flex-end   在主轴的终点对齐 3.space-between   两端对齐（常用） 4.center   在主轴上居中对齐 5.space-around   每个项目两端间距相同  5.align-items   作用：定义项目在交叉轴上的对齐方式   取值：      1.flex-start    交叉轴的起点对齐  2.flex-end     交叉轴的终点对齐  3.center    交叉轴居中对齐  4.baseline    交叉轴上基线对齐  5.stretch    如果项目未设置尺寸，在交叉轴上将占满所有空间3.项目的属性  该组属性只能设置在某一项目元素上，只控制一个项目，是不影响容器以其其它项目的效果。  1.order    作用：定义项目的排列顺序，值越小，越靠近起点，默认值为0取值：整数数字，无单位  2.flex-grow    作用：定义项目的放大比例，如果容器由足够的剩余空间，项目将放大取值：  整数数字，无单位  默认值0，不放大  取值越大，占据的剩余空间就越多  3.flex-shrink    作用：定义项目的缩小比例，即容器空间不足时，项目该如何缩小取值：   默认值为1，空间不足时，则等比缩小   取值为0，则不缩小（常用）  4.align-self    作用：定义当前项目在交叉轴上的对齐方式取值：   1.flex-start   2.flex-end   3.center   4.baseline   5.stretch   6.auto (继承自父元素的align-items属性)

4.转换

1.什么是转换

改变元素在页面中的位置，大小，角度以及形状的一种方式。  2D转换:只在x轴和y轴上发生的转换效果  3D转换:增加在z轴的转换效果

2.转换属性

1.转换属性  属性：transform  取值：     1.none 默认值，无任何转换效果 2.transform-function   表示1个或多个转换函数   如果是多个转换函数的话，中间用空格隔开2.转换原点  属性：transform-origin  取值：数字/百分比/关键字       2个值：表示原点在x轴和y轴上的位置   3个值：表示原点在x轴,y轴,z轴上的位置  默认的原点在 元素的中心位置处     (center center) (50% 50%)3.2D转换  1.位移    1.什么是位移  改变元素在页面中的位置2.语法 属性：transform 取值：    1.translate(x)      指定元素在x轴上的位移距离      取值为正，元素向右移      取值为负，元素向左移    2.translate(x,y)      指定元素在x轴和y轴的位移距离      x:同上      y:取值为正，元素向下移        取值为负，元素向上移    3.translateX(x)      在x轴上的位移    4.translateY(y)      在y轴上的位移  2.缩放    1.什么是缩放  改变元素在页面中的尺寸2.语法  属性：transform  取值：     1.scale(value)       value:横向或纵向的缩放比例       value:默认值为1             >1: 放大         <1: 缩小        负数：放大（水平和垂直都翻转180度）     2.scale(x,y)       x:横向的缩放比例       y:纵向的缩放比例     3.单向缩放函数       scaleX(x)       scaleY(y)  3.旋转    1.什么是旋转  改变元素在页面上的角度2.语法  属性：transform  取值：     rotate(ndeg)        n：取值为正，顺时针旋转    n：取值为负，逆时针旋转    注意：   1.转换原点会影响最后的转换效果   2.旋转是连同坐标轴一起旋转的，会影响旋转后的位移效果2.语法  属性：transform  取值：     1.skewX(xdeg)       让元素向着x轴的方向产生倾斜效果，实际上改变的是y轴的倾斜角度值       x：取值为正，y轴逆时针倾斜       x：取值为负，y轴顺时针倾斜     2.skewY(ydeg)       让元素向着y轴的方向产生倾斜效果，实际上改变的x轴的倾斜角度值       y:取值为正，x轴顺时针倾斜       y:取值为负，x轴逆时针倾斜     3.skew(x)        等同于skewX(xdeg)     4.skew(x,y)   4.3D转换  1.透视距离    模拟人的眼睛到3D转换元素之间的距离（z轴）属性：perspective注意：该属性要加在3D转换元素的父元素上  2.3D旋转    属性：transform取值：  1.rotateX(xdeg)    以x轴为中心轴，旋转元素的角度    取值为正，顺时针旋转  2.rotateY(ydeg)    以y轴为中心，旋转元素的角度  3.rotateZ(zdeg)    以z轴为中心，旋转元素的角度  4.rotate3D(x,y,z,ndeg)    x,y,z取值大于0的数字时，表示该轴要参与旋转，取值为0则不参与旋转    rotate3D(1,0,0,45deg)只在x轴旋转45度    roatate3d(1,1,1,0deg)

5.过渡

1.什么是过渡

使得css属性值，在一段时间内平缓变化的效果

2.过渡语法

1.指定过渡属性  属性：transition-property  取值：     1.all 能使用过渡的属性，一律用过渡体现 2.具体属性名   ex:   transition-property:background   当背景的属性在发生变化时用过渡给体现出来   transition-property:border-radius;   当边框倒角在发生改变时用过渡体现出来   transition-property:all    允许设置过渡效果的属性：      1.颜色属性（背景,文字,边框颜色,阴影颜色）      2.取值为数字的属性（高宽，内外边距等）      3.转换属性（位移，旋转，缩放，倾斜）      4.阴影属性      5.渐变属性      6.visibility属性2.指定过渡时长  作用：指定在多长时间内完成过渡操作  属性：transition-duration  取值：    以s或ms为单位的数值1000ms=1s3.指定过渡速度时间曲线函数  属性：transition-timing-function  取值：     1.ease 默认值，慢速开始，快速变快，慢速结束 2.linear 匀速 3.ease-in 慢速开始，加速结束 4.ease-out 快速开始，慢速结束 5.ease-in-out 慢速开始和结束，中间先加速后减速4.指定过渡延迟时间  属性：transition-delay  取值：以s或ms为单位的数值5.过渡属性的编写位置  1.将过渡放在元素声明的样式中    既管去，又管回  2.将过渡放在触发的操作中（hover）    只管去，不管回6.过渡的简写形式  transition:property duration timing-function delay;  ex:    transition:background 2s ease,border-radius 2s;    transition:all 2s; //上面的简写

6.动画

1.什么是动画

使元素从一种样式逐渐变为另一种样式即将多个过渡效果放下一起动画是通过"关键帧"，来控制动画的每一步关键帧：   1.定义动画执行的时间点   2.在该时间点上的样式是什么

2.动画的使用步骤

1.声明动画  为动画起名  定义关键帧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    作用：指定动画的速度时间曲线函数取值：ease,linear,ease-in,ease-out,ease-in-out  4.animation-dealy    作用：指定动画的延迟时间取值：以s或ms为单位的数值  5.animation-iteration-count    作用：指定动画的播放次数取值：  1.具体数字  2.infinite 无限次数播放  6.animation-diretion    作用：指定动画的播放方向取值：  1.normal     默认值，正常播放0%-100%  2.reverse    逆向播放 100%-0%  3.alternate    轮播播放     奇数次数播放时，正向播放     偶数次数播放时，逆向播放  7.动画的简写方式    animation:name duration timing-function delay iteration-count direction;  8.animation-fill-mode    作用：规定动画在播放前或播放后的状态取值：  1.none 默认值  2.forwards     动画播放完成后，将保持在最后一个帧状态  3.backwards    动画播放前，延迟时间内，动画保持在第一个帧的状态上  4.both    forwards与backwards的合体  9.animation-paly-state    作用：指定动画处于播放还是暂停的状态取值：   1.paused 暂停   2.running 播放

7.CSS Hack

1.解决问题

解决IE浏览器兼容性问题解决办法：针对不同浏览器编写不同CSS代码

2.CSSHack 的原理

使用CSS样式的优先级解决兼容性问题

3.CSSHack的实现方式

1.CSS类内部Hack  在样式属性名称前或属性值后增加前后缀，以便于识别不同浏览器  +:IE6,7的前缀  -:IE6的前缀  \0:IE8,9,10的后缀  \9\0:IE9,10的后缀2.CSS选择器Hack  在选择器前增加前缀以便识别不同的浏览器  *:识别IE6  *+：识别IE7  div~div{}  *div~div{IE6识别}  *+div~div{IE7识别}3.HTML头部引用Hack  使用IE条件注释来判断浏览器的版本，从而执行不同的代码  语法：    
    版本号：6-10条件：    1.gt      只有在大于指定版本的浏览器中执行代码      ex:      
        2.gte      大于等于    3.lte      小于等于    4.lt      小于    5.！      在指定条件以外版本的浏览器中执行操作    6.省略条件      只在指定版本的浏览器中执行操作      判断是否为IE浏览器或IE的指定版本