CSS布局系列：Flex 和 Grid 布局详解
前言在现代前端开发中，CSS 布局是构建网页界面的基础技能。随着 Web 技术的发展，CSS 布局方式也经历了从传统的浮动布局、定位布局到现代的 Flexbox 和 Grid 布局的演进。这两种现代布局方式极大地简化了复杂布局的实现，提供了更直观、更强大的布局能力。
在之前的CSS 基础温故一文中，我们简单介绍了几种常见的布局方式，本文将深入探讨 Flexbox 和 Grid 这两种现代布局方式的各种参数和使用场景。
Flexbox 布局Flexbox（弹性盒子布局）是一维布局模型，旨在提供一种更加有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小是未知的或动态的。
基本概念Flexbox 布局由两个主要组件构成：
Flex 容器（Flex Container）：通过设置display: flex或display: inline-flex创建
Flex 项目（Flex Items）：Flex 容器的直接子元素
Flex 容器属性1. display123.container { display: flex; /* 或 inline-flex */ ...
10分钟教你如何拥有属于自己的马赛克萌妹
前言这么可爱的萌妹子不想拥有一个吗。学起来，自定义一个抱回家
一、前期准备初始化HTML，利用通配符 * 去除默认样式
1234567891011121314151617181920<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="divport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *,*::before,*::after{ padding: 0; margin: 0; box-s ...
javascript 事件循环
事件循环
学习事件循环 首先就要了解一下浏览器的进程模型
浏览器的进程模型何为进程?
如果要运行一个程序 就要属于他自己的内存空间 可以把这块内存空间简单理解为进程
什么对象,函数啥啥啥的 都是放在内存里面的 所以就需要开辟一块内存空间让这个程序自己去使用
总结 : 进程 == 开辟出的这块内存空间
每一个应用 至少也要有一个进程 进程之间相互独立 即使要通讯 也需要双方同意才行比如qq进程崩溃了 肯定是不会影响到微信的 所以每一个进程是完全独立的
何为线程?
有了进程后 就可以运行程序的代码了
运行代码的人称之为线程
一个进程至少有一个线程 所以在进程开启后会自动创建一个线程来运行代码 该线程称之为主线程
如果程序需要同时执行多块代码 主线程就会启动更多的 线程来执行代码 所以一个进程中可以包含多个线程
浏览器有哪些进程和线程浏览器是一个多进程多线程的应用程序
浏览器内部工作极其复杂
为了避免相互影响 为了减少连环崩溃的几率 当浏览器启动后 它会开启多个进程
可以在浏览器的任务管理器中查看当前的所有进程
其中最主要的进程有
浏览器进程 : 主要负责页面的显示 用户 ...
vue3.0 + ts 生成带二维码的海报
生成带有二维码的海报 背景需求：生成一个带二维码的海报，可实现分享助力。
插件
qrcodejs2 或者 qrcode.vue （生成二维码）
html2canvas （生成海报图）
安装使用
qrcodejs2
12345678910111213141516// 安装插件 npm install --save qrcodejs2// 页面引入import QRCode from "qrcodejs2";// 方法调用 <div id="qrcode" ref="qrcode"></div> const createQrCode = (dom: any, width: number, height: number， qtext: string) => { return new QRCode(dom, { width: width, height: height, text: qtext, colorDark: ...
vue路由传参的几种方式
路由跳转的两种方式1. 声明式导航123456789101112131415161. 使用router-link的to属性进行路由跳转 to的值是要跳转到的那个路由// 1.1 to后直接跟路由<router-link to="/home">to home</router-link> // 1.2 to后跟一个配置对象path属性是要跳转到的那个路由<router-link :to="{ path: '/home' }">to home</router-link> // 1.3 to后跟一个配置对象，使用命名路由的name进行跳转<router-link :to="{ name: 'homeIndex' }">to home</router-link>2. 查询字符串形式 路由传参 to的值是一个配置对象 以查询字符串形式携带 url?id=123// 2.1 以 url?i ...
前端面试分享
盒子模型包括内容区域、内边距区域、边框区域和外边距区域。
box-sizing: content-box（W3C盒子模型）：元素的宽高大小表现为内容的大小。
box-sizing: border-box（IE盒子模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。
IE5.x和IE6在怪异模式中使用非标准的盒子模型，这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
如何实现左侧宽度固定，右侧宽度自适应的布局1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162<div class="box"> <div class="box-left"></div> <div class="box-right"></div></d ...
什么是BFC
什么是BFC BFC 全称为块级格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。可以说BFC就是一个作用范围，把它理解成是一个独立的容器，并且这个容器里box的布局与这个容器外的box毫不相干。
触发BFC的条件
根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属 ...
vue-cli 3/4兼容Android低版本白屏问题
问题描述： 运行很久的H5页面，突然大量用户反馈打开页面白屏，根据多方问题排查 最终确定是Android版本导致的 目前已知Android6.0运行是OK的 Android5.0环境允许白屏 ，具体原因是低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性，所以报错。
根目录下新建 .babelrc 文件
1234567{ "presets": ["@babel/preset-env"], "plugins": [ "@babel/plugin-transform-runtime" ]}
修改 babel.config.js
1234567891011121314module.exports = { presets: [ [ '@vue/app', { useBuiltIns: 'entry', polyfills: [ 'es6.promise ...
CSS八种让人眼前一亮的HOVER效果
CSS八种让人眼前一亮的HOVER效果本文不是原创，原文链接请戳文末链接。
一.发送效果HTML1234567<div id="send-btn"> <button> // 这里是一个svg的占位 Send </button></div>复制代码
CSS1234567891011121314151617181920212223242526272829303132333435363738394041#send-btn{ display: flex; align-items: center; justify-content: center; height: 100vh;}button { background: #5f55af; border: 0; border-radius: 5px; padding: 10px 30px 10px 20px; color: white; text-transform: uppercase; font-weight: ...
es6实用小技巧
元素交换（利用数组结构）1234let a = 'world', b = 'hello'[a, b] = [b, a]console.log(a) // -> helloconsole.log(b) // -> world
单条语句123456// 寻找数组中的最大值const max = (arr) => Math.max(...arr);max([123, 321, 32]) // outputs: 321// 计算数组的总和const sum = (arr) => arr.reduce((a, b) => (a + b), 0)sum([1, 2, 3, 4]) // output: 10
数组拼接123456const one = ['a', 'b', 'c']const two = ['d', 'e', 'f']const three = ['g', 'h ...
