字学校园-前端基础课程笔记

第四章:CSS高级

  1. transform:
  • 平移translate

    translate(100px,100px)向右向上100px

    translateX/Y(100px)向X/Y方向平移100px

    translate(100%,100%) 向右向上移动自身高度的距离

  • 旋转rotate

    rotate(90deg)默认顺时针旋转,锚点为中心点

    rotate(0.5turn)顺时针旋转半圈

    transform-origin:0 0 将锚点改为左上角

  • 缩放scale

    scale(2)放大两倍

    scale(3,0.5) X轴方向放大为3倍,Y轴方向缩放为0.5倍

    scaleY/Xtransform-origin同样适用

  • 错切skew:

    skew(30deg,20deg)skewX(30deg)skewY(20deg)

  • 3D变换:

    perspective(100px)设置视角(人眼距离屏幕距离z

    rotateYtranslate3d(10px,10px,20px)在3d空间内旋转平移

  1. transition:

属性:

  • property : 指定哪个css属性需要过渡
  • duration : 指定持续时间
  • timing-function : 变化速度函数
    • linear
    • ease-in
    • ease-out
    • ease
    • ease-in-out
    • step
  • delay : 指定延迟
  1. animation

属性:

  • name 动画名
  • duration 持续时间
  • timing-fucntion 速度函数
  • delay延迟
  • iteration-count 次数
  • direction 正反

使用

  • 定义关键帧@keyframes name{from{} 50%{} to{}}

  • 使用animation: name 1s ease infinite

  • 循环animation-direction:alternate/reverse/normal 正反交替播放/反向循环播放/正向循环播放

  1. 响应式
  • 设置视口viewport
1
2
<meta name = "viewport"
content = "width=device-width, initial-scale=1.0">

在布局页面时使用和设备同样的宽度

  • 图片尺寸设置
1
2
3
img{
max-width:100%
}

大屏:正常展示(img比容器小)

小屏:自动缩小到容器大小(img比容器大)

  • 背景图

background-size:content/cover:content-图片大端充满/cover-图片小端充满

  • 媒体查询

@media screen and (max-width:480px){xxx}

屏幕最大宽度(小于)为480px时xxx

  • 使用不同尺寸图片

    srcset配合sizes属性:

    1
    2
    3
    4
    5
    <img srcset="/img/large.jpg 1200w
    /img/normal.jpg 800w
    /img/small.jpg 400w"
    sizes= "(max-width 320px) 400px,
    (max-width 640px) 800px">
  • css兼容性

html基础

基础知识篇:

css-training

只 能 多 写!

冲了朋友们!

状态管理的what why how

当你遇到无法解决的问题时,再使用状态管理,否则无需使用。

几种鉴权方案

鉴权也叫身份验证(Authentication),是指验证用户是否拥有访问系统的权利。在日常的生活中,身份验证随处可见,比如:进入高铁站候车室、机场候机楼需要检查票据和身份证件;游玩主题乐园、名胜风景区需要购买门票,并由入口处人员鉴定有效后方可拥有进入园区游玩的权利。

面试时提到但经常叙述不清,开个专栏记录下。

浏览器渲染过程

导航过程完成之后,浏览器进程把数据交给了渲染进程,渲染进程负责tab内的所有事情,核心目的就是将HTML/CSS/JS代码,转化为用户可进行交互的web页面。那么渲染进程是如何工作的?面试中被问到无数次的问题,系统学习下。

React学习笔记

React 中的响应式设计思想

只需要关注数据变化,而不用关注dom变化;

react自动感知数据变化,自动修改dom(自动响应(React));

数据需要定义在组件的状态中;

mobx-react踩坑

哦吼快看这个托更博主终于更博了(雾)

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×