当前位置： 首页 > news >正文

高级特效开发阶段学习总结

news 来源：原创 2024/4/30 9:50:50

目录

一、css预编译工具

一、npm方式下载

二、 基本语法

三、编译生成css文件

四、监视文件变化(自动编译生成css文件)

五、监视目录变化

六、进阶语法

二、元素的固定宽高比等比例缩放

一、原理

二、具体步骤

三、屏幕自适应大小

一、什么是rem布局

二、rem的作用

三、应用场景

五、总结：

四、bootstrap

一、bootstrap的安装方式

一、下载方式

二、引入项目

布局

一、响应式布局

二、断点

三、布局容器

四、网格布局

单选框和多选框

一、单选框(radio)

二、多选框(checkbox)

三、开关按钮

四、按钮式单选框

float-position-flex

一、float浮动

二、position定位

三、flex弹性盒子

文本的操作

1、对齐方式

2、换行和溢出

3、字体大小

4、粗细和加斜

5、行高

6、文本装饰线

size-space-stack

一、size(元素大小操作)

二、space

三、stack间距

gird网格布局

一、网格布局基本用法

二、横向纵向排列方式

三、单元格的偏移

四、单元格间距

五、指定每一行显示多少列

五、react

React的引入

一、React简介

二、环境搭建

条件渲染和循环渲染

一、条件渲染

二、循环渲染

受控组件

一、受控组件是什么

二、屏蔽默认事件

状态提升

一、理论原理

二、操作方法

一、css预编译工具

一、npm方式下载

npm install -g sass

二、 基本语法

定义变量：

语法：

$varName :value

$color:red

访问变量：

.content{

color: $color

}

三、编译生成css文件

语法：sass <inputPath> <outputPath>

<inputPath>：要编译的sass或scss文件路径

<outputPath>：编译完的css文件的输出路径

sass main.scss ./css/main.css

四、监视文件变化(自动编译生成css文件)

添加--watch 标识 可以让sass自动监视文件变化 然后自动输出到指定路径

sass --watch main.scss ./css/main.css

五、监视目录变化

路径参数变成 <inputDir>:<outputDir> 这样就可以监视文件夹中任一文件的变化并输出到对应文件夹

sass --watch ./sass:./css

六、进阶语法

1、嵌套

嵌套的本质就是后代选择器

ul{
    background-color:#f00;
    li{
        border:1px solid  black;
    }
}

2、混合(类似函数)

定义一个混合：

@mixin fn($a:50px,$b:orange){
    height:$a;
    width:$a;
    background-color:$b;
}

调用混合：

.box{
    //不带参数调用混合
    @include fn;
    //带指定参数
    @include fn($b:red)
    //按顺序传参
    @includ fn(50px,blue)
}

3、样式的继承

声明父样式

%parent{
​
    width:200px;
​
    height:200px;
​
    background-color:red
​
}

继承父样式：

.box{
    @extend %parent
}

4、四则运算

// 四则运算
.box4 {
    // 加减法需要相同单位进行运算
    // width: 1px + 1em;
    width: 100px + 100px;
    width: 200px - 100px;
    width: 100% - 50%;
​
    // 乘除
​
    // 乘法只能用一个带单位的值乘以一个不带单位的数字
    width: 5px * 10;
    // width: (50rem/25rem) * 1px;
    // 除法只能使用 calc 计算函数
    width: calc(50rem / 25rem) * 1px;
}

二、元素的固定宽高比等比例缩放

一、原理

一个父元素中的第一个子元素，其padding-top的百分比大小是参照的父元素的宽度

例如：padding-top：25%，则子元素上侧内边距就是父元素宽度的25%

如此以来只要不设置父元素的高度，则父元素的高度就是第一个子元素的高度，从而让父元素宽高成比例

二、具体步骤

1、创建一个等比例的比例盒，作为要填充元素的父元素使用

2、创建不同比例尺的伪元素例如：.box_3x4::before 并在其中使用padding-top来达成固定高宽比

3、给所有box的子元素添加绝对定位和100%宽高

4、给box填入需要固定宽高比的子元素

注意：如果需要固定宽高比的盒子，则参考屏幕自适应大小.md

三、屏幕自适应大小

屏幕自适应大小一、什么是rem布局二、rem的作用三、应用场景五、总结：

一、什么是rem布局

rem是浏览器描述长度的单位，含义为：相对于 html 的字体大小的单位。1rem = html 根节点上1个字符的宽度

二、rem的作用

使用 rem 单位设置的元素尺寸，会在不同的设备屏幕宽度下（例如：手机屏幕和平板屏幕）等比例缩放

三、应用场景

当页面元素需要在不同屏幕宽度下保证元素的比例大小不变时，则可以使用 rem

五、总结：

  1. 确立参考系，定义标准设备的屏幕宽度和字体大小

  2. 比例公式（等式左右两边比例尺相同，从而达到等比例缩放的目的）：标准屏幕宽度 / 标准字体大小 = 新的屏幕宽度 / 新的屏幕字体大小

  3. 将页面样式中的 px 单位换算并替换为 rem，方法是 ?rem = 元素的尺寸 / 标准字体大小

  4. 绑定窗口的 resize 和 load 事件，触发事件时计算出新的屏幕宽度时的字体大小，设置 html 的字体大小 原屏幕宽度/根节点字体大小 = 新屏幕宽度/根节点字体大小

    新根节点字体大小 = 新屏幕宽度/（原屏幕宽度/根节点字体大小）

四、bootstrap

一、bootstrap的安装方式

一、下载方式

npm安装：

初始化npm：npm init -y

下载bootstrap：npm i bootstrap

官方地址：Breakpoints · Bootstrap v5.2

二、引入项目

导入bootstrap文件

引入bootstrap.css文件

布局

布局一、响应式布局二、断点三、布局容器四、网格布局

一、响应式布局

响应式布局就是根据屏幕宽度，切换不同页面布局的一种布局方式

bootstrap是使用断点来完成响应式布局的。

二、断点

断点是bootstrap面向不同屏幕宽度，预制好的媒体查询

通常的将，断点，代表的就是不同屏幕宽度

bootstrap中如何体现断点，在class中，添加不同断点的名称，可以采用不同断点的样式

 xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px

三、布局容器

通常是页面的根节点，可以使用class = "container"来设置容器

布局容器受断点影响，可以设置不同断点上的容器。

四、网格布局

将内容进行行列分布的布局方式就叫网格布局

bootstrap中网格布局的灵魂样式就是行：row，列：col

单选框和多选框

单选框和多选框一、单选框(radio)二、多选框(checkbox)三、开关按钮四、按钮式单选框

一、单选框(radio)

将input输入框的type设置为radio，再将多个input框的name设置为一样的，这样就是一组单选框了

代码：

<div>
     <div class="form-check">
         <input class="form-check-input" type="radio" name="sex" value="male" id="male">
         <label class="form-check-label" for="male">男</label>
     </div>
     <div class="form-check">
         <input class="form-check-input" type="radio" name="sex" value="female" id="female">
         <label class="form-check-label" for="female">女</label>
     </div>
     <div class="form-check">
         <input class="form-check-input" type="radio" name="sex" value="other" id="other">
         <label class="form-check-label" for="other">其他</label>
     </div>
</div>

二、多选框(checkbox)

将input输入框的type设置为checkbox，再将多个input框的name设置为一样的，这样就是一组多选框了

代码：

<div>
     <div class="form-check-inline">
          <input type="checkbox" class="form-check-input" id="sing" name="hobbies" value="sing">
          <label class="form-check-label" for="sing">唱</label>
     </div>
     <div class="form-check-inline">
          <input type="checkbox" class="form-check-input" id="dance" name="hobbies" value="dance">
          <label class="form-check-label" for="dance">跳</label>
     </div>
     <div class="form-check-inline">
          <input type="checkbox" class="form-check-input" id="rap" name="hobbies" value="rap">
          <label class="form-check-label" for="rap">rap</label>
     </div>
     <div class="form-check-inline">
          <input type="checkbox" class="form-check-input" id="dlq" name="hobbies" value="dlq">
          <label class="form-check-label" for="dlq">打篮球</label>
      </div>
</div>

三、开关按钮

form-switch 是开关 只要给普通的 checkbox 添加该类名即可

  <!-- form-switch 是开关 只要给普通的 checkbox 添加该类名即可 -->
<div class="form-check form-switch">
       <input class="form-check-input" type="checkbox">
       <label class="form-check-label">某某协议</label>
</div>

四、按钮式单选框

输入框类btn-check

label类btn btn-outline-{value} value取值颜色

<div class="form-check-inline">
                    <!-- input 中添加 btn-check -->
                    <input id="a" class="btn-check" type="radio" value="a" name="btn">
                    <!-- label 中添加 btn btn-outline-{color} -->
                    <!-- 注意: 为了能够勾选成功 必须给label添加for 给 input 添加id -->
                    <label for="a" class="btn btn-outline-warning">a</label>
                </div>

float-position-flex

float-position-flex一、float浮动二、position定位三、flex弹性盒子

一、float浮动

  <!-- float浮动 -->
    <!-- clearfix 清除浮动 -->
    <div class="clearfix">
        <div class="box bg-danger float-start"></div>
        <div class="box bg-success float-start"></div>
        <div class="box bg-warning float-end"></div>
        <div class="box bg-secondary float-end"></div>
    </div>
    <div class="box bg-info"></div>

二、position定位

    <!-- position定位 -->
    <div style="height: 500px; width: 500px;" class="d-flex bg-success position-relative">
        <div class="box bg-danger position-absolute"></div>
        <div class="box bg-danger position-absolute top-50 translate-middle-y"></div>
        <div class="box bg-danger position-absolute bottom-0"></div>
        <div class="box bg-danger position-absolute bottom-0 start-50 translate-middle-x"></div>
        <div class="box bg-danger position-absolute bottom-0 end-0"></div>
        <div class="box bg-danger position-absolute top-0 end-0 "></div>
        <div class="box bg-danger position-absolute top-50 end-0 translate-middle-y"></div>
        <div class="box bg-danger position-absolute start-50 translate-middle-x"></div>
        <div class="box bg-danger position-absolute start-50 top-50 translate-middle"></div>
    </div>
​

三、flex弹性盒子

 <!-- flex 弹性盒子 -->
    <div style="width: 500px; height:500px; margin-top:15px" class="bg-success d-flex flex-wrap">
        <div class="box bg-warning"></div>
        <div class="box bg-warning"></div>
        <div class="box bg-warning"></div>
        <div class="box bg-warning"></div>
        <div class="box bg-warning"></div>
        <div class="box bg-warning"></div>
        <div class="box bg-warning"></div>
    </div>

文本的操作

文本的操作1、对齐方式2、换行和溢出3、字体大小4、粗细和加斜5、行高6、文本装饰线

1、对齐方式

语法：text-{value}

value值：

start

center

end

2、换行和溢出

语法：

text-{value}（换行） value值：wrap nowrap ​ overflow-{value}（溢出）value值：scroll hidden

3、字体大小

语法： fs-{value}

value值：

1、2、3、4、5、6

4、粗细和加斜

语法：

粗细： fw-{value} value值：bold、bolder、semibold、normal、light、lighter

加斜：fst-italic

5、行高

语法：lh-{value}

value取值：

1

sm

base

lg

6、文本装饰线

语法：text-decoration-{value}

value取值：

underline 下划线

line-through 穿过文本线

none 无

size-space-stack

size-space-stack一、size(元素大小操作)1、w-{value} h-{value}2、vh vw 是相对视口大小二、space1、内边距2、外边距三、stack间距1、元素间的间距

一、size(元素大小操作)

1、w-{value} h-{value}

官方文档：Sizing · Bootstrap v5.2

语法：w-{value}（设置宽） 或则 h-{value} （设置高）

value取值：

25

50

75

100

auto

2、vh vw 是相对视口大小

语法:vh-100 或 vw-100

{value}只能取100

二、space

1、内边距

使用 p- 开头

语法：

p-{value} 设置四周的内边距

pt-{value} 设置上内边距

pe-{value} 设置右内边距

pb-{value} 设置下内边距

ps-{value} 设置左内边距

2、外边距

与内边距写法一样

使用 m- 开头

语法：

m-{value} 设置四周的外边距

mt-{value} 设置上外边距

me-{value} 设置右外边距

mb-{value} 设置下外边距

ms-{value} 设置左外边距

三、stack间距

1、元素间的间距

官方地址：Stacks · Bootstrap v5.2

vstack 竖直方向产生间距

hstack 水平方向产生间距

gap-{value} 间距的大小

gird网格布局

gird网格布局一、网格布局基本用法二、横向纵向排列方式纵向：横向：三、单元格的偏移四、单元格间距五、指定每一行显示多少列

一、网格布局基本用法

行：row

列：col

语法：col-{breakpoints}-{value}

例如：col-sm-3 col-lg-12

value:取值范围在1~12

bootstrap中 一行 row 被等份为12份，所以col的value值代表的是占多少份

例如：col-3代表此单元格占 3/12 份

示例：

 <div class="container">
        <!-- 行 -->
        <div class="row">
            <!-- 列
                col 语法: col-{breakpoints}-{value}
                例如: col-sm-3 col-lg-12
                value: 范围在 1~12
                bootstrap 中 一行 row 被等分为 12 分 那么col的value值代表的是占多少份
                例如: col-3 此单元格占 12分之3份
            -->
            <div class="col">
                <div class="bg-primary">1</div>
            </div>
            <div class="col">
                <div class="bg-primary">2</div>
            </div>
            <div class="col">
                <div class="bg-primary">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-8">
                <div class="bg-primary">1</div>
            </div>
            <div class="col">
                <div class="bg-primary">2</div>
            </div>
            <div class="col">
                <div class="bg-primary">3</div>
            </div>
        </div>
    </div>

二、横向纵向排列方式

纵向：

在 row 上可以使用flex 的 align-items 来进行竖直方向的排列

语法：align-items-{value}

横向：

在row上可以使用flex 的justify-content 来进行水平方向的排列

语法：justify-items-{value}

三、单元格的偏移

通过offset 来设置单元格左侧的偏移量 数字代表的含义和col相同

语法：offset-{value}

例如：offset-3

四、单元格间距

添加单元格间距使用 gutter 的首字母g

可以使用 g-{value} 或 gx-{value} 或 gy-{value}

g-{value} 水平和竖直间距

gx-{value} 水平间距

gy-{value} 竖直间距

五、指定每一行显示多少列

让一行显示多少列

语法：row-cols-{breakpoints}-{value}

例如：row-cols-lg-3

五、react

React的引入

React的引入一、React简介二、环境搭建

一、React简介

中文官网：React 官方中文文档 – 用于构建用户界面的 JavaScript 库

特点：

声明式：

也就是js中的数据决定页面最终渲染的结果

声明式不是响应式，但往往都是同时出现共同作用页面

响应式：数据变化页面会立即更新

组件化：

一个包含所有外观和行为的，独立可以运行的模块，称为组件

组件化的思想可以将复杂页面，化繁为简的进行设计

组件可提高代码复用性

一次学习，跨平台编写

使用React可以开发 桌面web页面，移动端页面，移动app，桌面app等

二、环境搭建

使用cdn在html引入react

<!-- react 需要引入 react 核心库 和 react-dom 库 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
​
<!-- 为了更方便书写 react 通常会使用 jsx 语法，为了支持该语法 需要引入 babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

然后可以在body中加入如下代码：

<body>
    <div id="root"></div>
​
    <!-- 采用 jsx 语法 需要在 type 处加上 text/babel -->
    <script type="text/babel">
​
        ReactDOM.render(
            <h1>Hello World</h1>,
            document.getElementById('root')
        );
​
    </script>
</body>

这里需要介绍几个概念：

  • react.js 这是框架核心库，用于解析 react 语法

  • react-dom.js 这个库是用于 react 元素(也就是react的文档对象模型)的创建

  • babel.js 这个库用来将 jsx 语法翻译为普通的 js

  • 条件渲染和循环渲染

    条件渲染和循环渲染一、条件渲染二、循环渲染

    一、条件渲染

    使用三元运算符 按条件显示不同的内容

      {/* 使用三元运算符 按条件显示不同的内容 */}
            {sex === 'male' ? <div style={{color: '#00f'}}>男</div> :
                sex === 'female' ? <div style={{color: 'pink'}}>女</div> :
                    <div style={{color: '#ff0'}}>其他</div>
            }

    二、循环渲染

     ReactDOM.createRoot(document.querySelector('#root')).render((
        <div>
            <ul>
                {/* 循环渲染，使用一个数组的map函数 返回一个由 react-dom 充当成员形成的一个新数组 */}
                {students.map(item => <li>姓名: {item.name}; 性别: {item.sex === 'male' ? '男' :
                    item.sex === 'female' ? '女' : '不详'
                }; 年龄: {item.age}</li>)}
            </ul>
        </div>
    ))

  • 受控组件

    受控组件 一、受控组件是什么二、屏蔽默认事件

    一、受控组件是什么

    被React 的 state状态 控制显示和输入的表单元素称为受控组件

    控制显示则需要 调用 setState 方式

    参考state状态：组件状态

     <input type="text" value={name} onInput={onNameInput}/>

    二、屏蔽默认事件

     react 中 所有的事件都不能通过 return false 来屏蔽默认事件
 如果需要屏蔽默认事件则需要通过preventDefault方法
 function submit(ev) {
            ev.preventDefault()
        }

    // 挂载 
         constructor()    //
         static getDerivedStateFromProps() 
         render()
         componentDidMount()
    // 更新
         static getDerivedStateFromProps(props, state)=>{[key: string]: any} 每次调用渲染函数render前调用，返回值是希望改变的状态对象
         shouldComponentUpdate(props, state)=>boolean 判断是否应该更新，返回一个布尔值
         render()
         getSnapshotBeforeUpdate(prevProps, prevState)=>{[key: string]: any} 每次更新前调用，返回值将被传递给 componentDidUpdate 充当第三个参数
         componentDidUpdate(prevProps, prevState, snapshot)
    // 卸载
         componentWillUnmount()
    // 异常捕获
         static getDerivedStateFromError()
         componentDidCatch()
//应用场景
     其中 挂载和卸载的 生命周期用得比较多
     constructor() 常用于初始化组件，拉取远程数据
     componentDidMount() 用于页面第一次渲染完成后，查询页面元素
     componentWillUnmount() 卸载组件时对事件的解绑等需要处理的事
//卸载组件
     root.unmount()

状态提升

状态提升一、理论原理二、操作方法

一、理论原理

参考地址：状态提升 – React

组件可以利用自身props属性将自身状态提升到上级组件

上级组件只要绑定事件（本质是提供一个回调函数）接受参数即可

二、操作方法

1、父组件中，给子组件添加props属性，并分配一个函数值，该函数接受子组件的状态值作为参数

     // 此函数的参数用于接收子组件状态
    function onCountChange(args) {
       console.log(args)
    }
    
    return(
         <div>
            {/* 给子组件分配一个函数 用于接收组件状态 */}
            <Child countChange={onCountChange}></Child>
         </div>
    )

2、子组件中，调用父组件提供的 props ，并将自身状态作为参数传入父组件提供的函数

 props.countChange(count)

子组件的状态依赖于父组件传入的 props
由于 props 是只读的
所以要修改 props 子组件只能通知父组件更新数据
这个过程就会用到组件间的通信方法

相关文章：

  • WPF 简单的ComboBox自定义样式。
  • Servlet 规范和 Servlet 容器
  • 切面的优先级、基于XML的AOP实现
  • 【Java面试宝典】常用类中的方法重写|equals方法与逻辑运算符==的区别
  • 重构的原则
  • Restyle起来！
  • 【Unity3D日常BUG】Unity3D中出现“unsafe code 不安全的代码”的错误时的解决方法
  • Node中实现一个简易的图片验证码流程
  • java-Lambda表达式
  • Robotics System Toolbox中的机器人运动（7）--RRT规划避障路径
  • 和一个海归的博士聊人生
  • 移动端布局介绍——css像素/物理像素/设备像素比
  • redis简介及八种数据类型
  • GAN Step By Step -- Step1 GAN介绍
  • vue纯前端结合css动画实现模拟导航效果
  • 【译】理解JavaScript：new 关键字
  • docker容器内的网络抓包
  • If…else
  • JavaScript工作原理（五）：深入了解WebSockets，HTTP/2和SSE，以及如何选择
  • Javascript设计模式学习之Observer(观察者)模式
  • laravel with 查询列表限制条数
  • LeetCode刷题——29. Divide Two Integers（Part 1靠自己）
  • PV统计优化设计
  • session共享问题解决方案
  • 产品三维模型在线预览
  • 初识MongoDB分片
  • 你真的知道 == 和 equals 的区别吗？
  • 浅谈Golang中select的用法
  • 学习使用ExpressJS 4.0中的新Router
  • ​水经微图Web1.5.0版即将上线
  • $.extend({},旧的,新的)；合并对象，后面的覆盖前面的
  • （02）vite环境变量配置
  • (1)Map集合 (2)异常机制 (3)File类 (4)I/O流
  • (13)Hive调优——动态分区导致的小文件问题
  • (C++17) std算法之执行策略 execution
  • (cljs/run-at (JSVM. :browser) 搭建刚好可用的开发环境!)
  • (MonoGame从入门到放弃-1) MonoGame环境搭建
  • （笔试题）合法字符串
  • （入门自用）--C++--抽象类--多态原理--虚表--1020
  • (四)库存超卖案例实战——优化redis分布式锁
  • （转）GCC在C语言中内嵌汇编 asm __volatile__
  • **PHP分步表单提交思路（分页表单提交）
  • .desktop 桌面快捷_Linux桌面环境那么多，这几款优秀的任你选
  • .md即markdown文件的基本常用编写语法
  • .NET Core实战项目之CMS 第十二章 开发篇-Dapper封装CURD及仓储代码生成器实现
  • .Net MVC4 上传大文件，并保存表单
  • .NET命令行（CLI）常用命令
  • .NET使用存储过程实现对数据库的增删改查
  • [ solr入门 ] - 利用solrJ进行检索
  • [ vulhub漏洞复现篇 ] ThinkPHP 5.0.23-Rce
  • []我的函数库
  • [Angular] 笔记 6：ngStyle
  • [C++]——带你学习类和对象
  • [C++随笔录] 红黑树
  • [flask]http请求//获取请求体数据