前端知识点总结——C3

前端知识点总结——C3

1.复杂选择器

1.兄弟选择器

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

 2.通用兄弟选择器
   作用：获取某元素后所有满足条件的兄弟元素
   语法：选择器1~选择器2{}

2.属性选择器

 <input type="text" name="uname" value="" placeholder="">
 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 type="text">
   <input type="password">

    //匹配的是第一个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
    匹配的元素属于其父元素的第一个子元素
<div>
   <p>p1</p>
   <p>p2</p>
   <p>p3</p>
</div>
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
    匹配没有子元素的元素
<div></div>
   
   5.:only-child
    匹配的元素是属于其父元素中的唯一子元素

<div>
      <p id="p1">ppppp1</p>
    </div>

    <div>
      <p id="p2">ppppppppp2</p>
      <span>ssssssss</span>
    </div>

    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
   作用：匹配到某元素的内容区域之前
   <p>(:before)鹅鹅鹅</p>
 2.:after或::after
   作用：匹配到某元素的内容区域之后
   <p>锄禾日当午(:after)</p>
 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=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; //上面的简写

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条件注释来判断浏览器的版本，从而执行不同的代码
  语法：
    <!--[if 条件 IE 版本号]>
     满足条件要执行的HTML代码
<![endif]-->

版本号：6-10
条件：
    1.gt
      只有在大于指定版本的浏览器中执行代码
      ex:
      <!--[if gt IE 6]>
        该段内容只显示在IE6以上版本的浏览器中
      <![endif]-->
    2.gte
      大于等于
    3.lte
      小于等于
    4.lt
      小于
    5.！
      在指定条件以外版本的浏览器中执行操作
    6.省略条件
      只在指定版本的浏览器中执行操作
      判断是否为IE浏览器或IE的指定版本