CSS3——知识点总结（学习笔记）

CSS3

Introduction

• reference manual website: http://css.doyoe.com

• Authoritative inquiry website : http://www.caniuse.com

• pre-processor
  e.g. sass/less next-css

• post-processor
  e.g. Autoprefixer

Selector

• Relationship Selectors
  E+F E~F

• Attribute Selectors
  E[attr~=“val”] E[attr |=“val”] E[attr^=“val”] E[attr$=“val”] E[attr*=“val”]

• Pseudo-Element Selectors
  E::placeholder E::selection

• Pseudo-Classes Selectors
  E:not(s) E:root E:target
  E:first-child E:last-child E:only-child E:nth-child(n)
  E:nth-last-child(n) E:first-of-type E:last-of-type E:only-of-type
  E:nth-of-type(n) E:nth-of-last-type(n)
  E:empty E:checked E:enabled E:disabled
  E:read-only E:read-write

• homework

  1. Accrodion List手风琴效果
  2. Tabs 选项卡效果

Border & Background

• border-radius

• box-shadow
  (x-offset,y-offset,blur,spread)

• border-image
  border-image-source | [border-image-slice , border-image-width , border-image-outset ] | border-image-repeat

• background
  background-color,
  background-image(也可以生成渐变色),
  background-repeat(round||space||repeat-x||repeat-y),
  background-position,
  background-origin(border-box||padding-box||content-box),
  background-clip(border-box||padding-box||content-box||text),

  //这里的text值是webkit特有的
  div{
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      text-fill-color:transparent;
  }
  

  background-attachment(scroll||local（相对于内容区）||fixed（相对于整个视口）),
  background-size（cover（单张溢出一些）||contain（单张留白一些））,

• 渐变色
  linear-gradient()，
  radial-gradient()，
  repeating-linear-gradient(),
  repeating-radial-gradient(),

• currentColor(中间值，中转色)
  CSS1 CSS2 border-color:color
  CSS3增加中转 currentColor = color, border-color:currentColor

Text

• text-shadow
  (x-offset,y-offset,blur,color)

//浮雕
color:#ddd;
text-shadow:1px 1px #000,-1px -1px #fff;
//镂刻
color:#ddd;
text-shadow:-1px -1px #000,1px 1px #fff;
//错乱效果//火焰效果等

• text-stroke字体描边

  //chrome实现的，配合字体simsun,70版本以上
  -webkit-text-stroke:1px red;
  font-family:simsun;
  color:transparent;

• font-face(与选择器并列写)

  @font-face{
      font-family:'abc';
      src:url('');
  }
  

• word-break文字截断

• column
  columns(width,count)，只用width不太好用，定宽不太好使，父级宽度变width也变；
  column-rule就等于border的用法；
  column-gap设置列间隙宽度；

  作业：小说左右翻页的效果：父级定宽，子级column-width同宽。（试着实现左右滑动）(实现了监听点击，拖动实现左右滑动)

Box

• W3C standards mode
  boxWidth = width + padding(2) + border(2)

• IE6 quirks mode
  boxWidth = width

• box-sizing:content-box | padding-box | border-box
  border-box需求场景：宽度不固定，但是内边距固定；input框；加border不想变宽等

• overflow：visible | hidden | scroll | auto | clip(都不兼容)
  e.g: 实现横向滑动，只需加overflow-x:auto

• resize:none | both | horizontal | vertical
  必须与overflow同时使用！
  一般不会给用户实现这种可随便调节大小的功能，每次变化都要重构和重排。

• flex
  父级display:flex，开始弹性盒。inline-flex，具备inline属性，同一行后面可以有其他内容。

  • 父级
    • flex-direction:row | row-reverse | column | column-reverse
    • flex-wrap：nowrap | wrap | wrap-reverse（不常用）
    • flex-flow：<’ flex-direction ‘> || <’ flex-wrap '>（复合属性）
    • justify-content：flex-start | flex-end | center | space-between | space-around（基于主轴的对齐方式）
    • align-items：flex-start | flex-end | center | baseline | stretch（默认stretch，未设height时高度会撑满。一般用于单行的侧轴的对齐方式）
    • align-content：flex-start | flex-end | center | space-between | space-around | stretch（默认stretch，未设height时高度会按行数平分撑满。一般用于多行的侧轴的对齐方式）
  • 子级
    • order：< integer >（默认0，按整数值来定义排列顺序，数值小的排在前面。可以为负值。）
    • align-self：auto | flex-start | flex-end | center | baseline | stretch（子项单独在侧轴方向上的对齐方式）
    • flex-grow：< number >（默认0，用数值来定义扩展比率，不允许负值。根据该权重来分配剩余空间。）

    //父级600px,子元素3个100px宽
    //1 : 2 : 3   300px剩余
    //50 100 150  分配
    //150 200 250 = 600px
    

    • flex-shrink：< number >（默认1，用数值来定义收缩比率，不允许负值。根据该权重来收缩多出的空间。）

    //是根据content-width来计算比例，要注意padding，border不参与计算
    //父级600px，子元素3个，分别为200px，200px，400px（真实内容区content-width）
    //权重为1 ： 1 ： 3
    //200*1 + 200*1 + 400*3 = 1600
    // 200 *1 
    //--------  * （800-600）= 25px
    //  1600
    // 200-25 ： 200-25 ： 400-150 
    //   175       175       250  =  600px
    

    • flex-basis：< length > | < percentage > | auto | content
      • 当设置了width时，如果basis有设值，且小于width，则真实宽范围：basis < realWidth < width
      • 当未设置width时，或设置basis大于width，代表元素最小宽度，可被不换行单词撑开。且该被撑开的子元素，不参与shrink压缩。想压缩要设置换行word-break:break-word
    • flex：none | <’ flex-grow ‘> <’ flex-shrink >’? || <’ flex-basis '>
      复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
      • 如果缩写「flex: 1」, 则其计算值为「1 1 0%」
      • 如果缩写「flex: auto」, 则其计算值为「1 1 auto」
      • 如果「flex: none」, 则其计算值为「0 0 auto」
      • 如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值
  • flex作用：
    • 居中
    • 可动态增加的导航栏
    • 等分布局（4等分，2等分，中间可加margin）
    • 其中一个固定宽度的布局（固定一个或多个）
    • 圣杯布局
    • 流式布局
  • 作业：神马搜索明星模块flex布局

Transition & Animation

• transition
  transition：< single-transition>[,]*
  < single-transition> = [ none | < single-transition-property> ] || < time> || < single-transition-timing-function> || < time>
  （过渡属性 | 持续时间 | 过渡动画 | 延迟时间）

  • transition-property：检索或设置对象中的参与过渡的属性
  • transition-duration：检索或设置对象过渡的持续时间
  • transition-timing-function：检索或设置对象中过渡的动画类型
    • linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
    • ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
    • ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
    • ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
    • ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
    • cubic-bezier(< number >, < number >, < number >, < number >)：特定的三次贝塞尔曲线类型，4个数值需在[0, 1]区间内。
      • B(t) = P₀(1 - t)³ + 3P₁t(1 - t)² + 3P₂t²(1 - t) + P₃t³ ,t ∈ [0,1]
      • 设定的4个值，为P1和P2点的坐标。靠这两个控制点控制方向。P1的Y值可以为负，P2的Y值可以大于1。
    • step-start：等同于 steps(1, start)
    • step-end：等同于 steps(1, end)
    • steps(< integer>[, [ start | end ] ]?)
  • transition-delay：检索或设置对象延迟过渡的时间

• @keyframes < identifier > { < keyframes-blocks > }

  • < keyframes-blocks >：[ [ from | to | < percentage > ]{ sRules } ] [ [ , from | to | < percentage > ]{ sRules } ]*
  • from代表0%，to代表100%
  • 过度浏览器版本都要写兼容性写法，加厂商前缀，如-webkit-,-moz-

• animation：< single-animation > [ ,< single-animation > ]*

  • < animation-name >：检索或设置对象所应用的动画名称
  • < animation-duration >：检索或设置对象动画的持续时间
  • < animation-timing-function >：检索或设置对象动画的过渡类型
  • < animation-delay >：检索或设置对象动画延迟的时间
  • < animation-iteration-count >：检索或设置对象动画的循环次数
  • < animation-direction >：检索或设置对象动画在循环中是否反向运动
  • < animation-play-state >：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式。
  • < animation-fill-mode >：检索或设置对象动画时间之外的状态
    • none：默认值。不设置对象动画之外的状态
    • forwards：设置对象状态为动画结束时的状态
    • backwards：设置对象状态为动画开始时的状态
    • both：设置对象状态为动画结束或开始的状态

• steps

  • (< integer >[, [ start | end ] ]?
  • 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
  • end：保留当前帧状态，直到当前这段动画时间结束
  • start：保留下一帧状态，直到当前这段动画时间结束
  • step-end：等同于 steps(1, end)；step-start：等同于 steps(1, start)

• transform

  • scale：

    • scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
    • scalex()：指定对象X轴的（水平方向）缩放
    • scaley()：指定对象Y轴的（垂直方向）缩放
    • scalez()：指定对象的z轴缩放
    • scale3d()：指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
    • 注意：
      • 是在坐标轴的刻度做伸缩；
      • 多个scale可以叠加操作；
      • 雁过留声：在某一个方向上伸缩之后，产生的影响会被一直保留，不会因为其他变换（旋转等）而消失。

  • skew：

    • skew()：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。
    • skewx()：指定对象X轴的（水平方向）扭曲
    • skewy()：指定对象Y轴的（垂直方向）扭曲
    • 注意：
      • 值为角度数（deg）；
      • 倾斜的时候，还会伴有拉伸，且不好得出拉伸倍数。

  • rotate：

    • rotatex()：指定对象在x轴上的旋转角度
    • rotatey()：指定对象在y轴上的旋转角度
    • rotatez()：指定对象在z轴上的旋转角度
    • rotate3d()：指定对象的3D旋转角度。前3个参数x,y,z确定的矢量作为旋转轴，第4个参数表示旋转的角度，参数不允许省略

  • translate:

    • translate()：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
    • translatex()：指定对象X轴（水平方向）的平移
    • translatey()：指定对象Y轴（垂直方向）的平移
    • translatez()：指定对象Z轴的平移
    • translate3d()：指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

  • perspective

    • < length >：指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值
    • 指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大，而「z<0」时则比正常小，大小程度由该属性的值决定。
    • 当该属性值为「非none」时，元素将会创建局部堆叠上下文。
    • 实现原理是根据物体在screen上的投影。
      • 例如，当有translateZ时，且为负，随着perspective越小，图像反而越来越小，用投影原理解释的透彻。
    • 该属性如果写在子元素的transform属性中，必须写在第一位。不推荐，不能调整origin。

  • perspective-origin

    • [ < percentage> | < length> | left | center① | right ] [ < percentage> | < length> | top | center② | bottom ]?
    • 默认值：50% 50%，效果等同于center center
    • 指定透视点的位置。该属性提供2个参数值。如果提供两个，第一个用于横坐标，第二个用于纵坐标。如果只提供一个，该值将用于横坐标；纵坐标将默认为center。

  • transform-origin

    • [ < percentage> | < length> | left | center① | right ] [ < percentage> | < length> | top | center② | bottom ]?
    • 默认值：50% 50%，效果等同于center center
    • 设置或检索对象以某个原点进行转换。
    • 其实这里可以设置第三个值，即圆点在空间中变化位置，旋转轴XYZ轴跟着变化，但是还是平行于原来的XYZ轴。子元素旋转时候，直接用变换后的这个轴更方便。

  • backface-visibility

    • visible | hidden
    • 指定元素背面面向用户时是否可见。

  • matrix

    • 矩阵是transform选中的计算规则
    • matrix()：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
    • matrix3d()：以一个4x4矩阵的形式指定一个3D变换

    /*
    | a,c,e |     | x |      | ax + cy + e |
    | b,d,f |  *  | y |   =  | bx + dy + f |
    | 0,0,1 |     | 1 |      | 0  + 0  + 1 |
    
    matrix(1,0,0,1,e,f); === translate(x, y);
    matrix(a,0,0,d,0,0); === scale(x, y);
    matrix(cos(θ),sin(θ),-sin(θ),cos(θ),0,0); === rotate(θ);
    x1 = cos(θ)x - sin(θ)y + 0
    y2 = sin(θ)x + cos(θ)y + 0
    matrix(1,tan(θy),tan(θx),1,0,0) 
    matrix(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1) 缩放
    matrix(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1) 平移
    */
    /*
    试验：镜像变换
    
    | -1,0,0 |     | x |      | -x |
    |  0,1,0 |  *  | y |   =  |  y |
    |  0,0,1 |     | 1 |      |  1 |
    
    transform:matrix(-1,0,0,1,0,0)
    */
    

    • 作业：transform实现旋转魔方