欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3——知识点总结(学习笔记)

程序员文章站 2024-03-25 16:41:28
...

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实现旋转魔方
相关标签: CSS3 学习笔记