前端知识点总结——C3

摘要：前端知识点总结复杂选择器兄弟选择器兄弟元素具备相同父元素的平级元素之间称为兄弟元素。

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
   匹配被用户选取的内容
   注意：只能修改文本颜色或背景颜色
 

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;
 }

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属性)

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)

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=1s
3.指定过渡速度时间曲线函数
  属性：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; //上面的简写

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 播放
  

1.解决问题

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

2.CSSHack 的原理

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

3.CSSHack的实现方式

1.CSS类内部Hack
  在样式属性名称前或属性值后增加前后缀，以便于识别不同浏览器
  +:IE6,7的前缀
  -:IE6的前缀
  :IE8,9,10的后缀
  9: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的指定版本