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

第四章: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兼容性

Ubuntu 18.04 手动编译Clang 环境配置

配环境跟我八字不合

Effective Cpp 学习笔记

学习程序语言根本大法是一回事,学习如何以某种语言设计并实现高效程序则是另一回事。这种说法对C++尤其适用。

编译原理实验

找回了写代码最初的快乐

html基础

基础知识篇:

webpack

模块化编程中,开发者将程序分解为功能离散的 chunk,并称之为 模块

每个模块都拥有小于完整程序的体积,使得验证、调试及测试变得轻而易举。 精心编写的 模块 提供了可靠的抽象和封装界限,使得应用程序中每个模块都具备了条理清晰的设计和明确的目的。

本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle

css-training

只 能 多 写!

冲了朋友们!

状态管理的what why how

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

微信小程序与H5的差异

在面试当中被问到的问题,自己只说了个没有跨域、生态比较差感觉多捞噢,写个文档记录下。

几种鉴权方案

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

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

Your browser is out-of-date!

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

×