flex: 1 的作用总结flex: 1 等同于 flex: 1 1 auto 等同于 flex-grow: 1，flex-shrink: 1，flex-basis: auto在使用 Flexbox 布局时，flex: 1 是一个非常常用的简写属性，它可以让子元素自动伸缩以填充容器的剩余空间。简介flex 属性用于控制 Flex 容器中子元素如何伸缩。它是一个简写属性，可以同时设置以下三个属性：f
什么是CSS初始化？CSS初始化是指重设浏览器的样式且每个网页都必须进行初始化。1.清除所有标签的内外边距清零* { margin: 0; padding: 0; }* { padding: 0; margin: 0; border: 0; } 2.li标签：去除样式符号li { list-style: none; }3.图片标签：取消图片底侧有空白缝隙问题img {
重置 CSS 的发展进程作为 Web 开发者（特别是CSSer）对于 重置 CSS （Reset CSS） 并不会感到陌生，而且在社区和团队都有着不同的版本的重置 CSS，最为粗暴的应该是下面这种样的：* { margin: 0; padding: 0; }或者是：* { margin: 0; padding: 0; box-sizing
前言在日常应用中，验证码是防止恶意GJ的重要手段。其中滑动拼图验证码的用户体验更好。本文将详细介绍如何仅使用HTML、CSS和JavaScript实现一个纯前端的滑动拼图验证码功能，无需后端支持即可完成验证。1. 实现效果和思路1.1 效果展示1.2 实现思路我们实现的滑动拼图验证码包含两个主要部分：验证区域：显示一张背景图片，其中有一个半透明的方形缺口（目标位置）和一个可以滑动的拼图块滑动条区域
1.前言定位是 CSS 页面布局的关键技术之一，很多知名品牌的公司官网都用到了定位。比如苹果官网、小米官网、华为官网等等。2.CSS 定位基础理解CSS 定位：你可以把浏览器看成一个小房子，把浏览器中的页面元素看成房子里的家具。这些家具按照一定规则摆放。比如沙发距离墙面20cm、桌子在房子中间摆放等等。定位 = 定位模式 + 偏移定位主要包含以下 5 种模式:2.1 static：静态定位默认定位
Leaflet:地理信息可视化神器https://leafletjs.com/Leaflet是一个轻量级、易于使用的开源JavaScript库，为开发者提供了创建交互式地图的强大工具。它具有丰富的地图功能和插件生态系统，支持各种地图数据源，从基本的点标记到复杂的地图覆盖物都可以轻松实现。Leaflet的优势在于其简洁性和易用性，使得它成为初学者和专业开发者的首选。除了在普通地图应用程序中广泛应用外
过去，实现懒加载通常需要监听 scroll 事件，并结合 getBoundingClientRect() 等方法计算元素位置，代码不仅繁琐，而且频繁的计算会引发性能问题。现代浏览器提供了 Intersection Observer API，让我们得以用一种极其高效和简洁的方式来实现懒加载。多简洁？核心逻辑只需 10 行代码。第一步：HTML 结构准
1.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> div { width:100px; height:100px; background:red; posi
分类维度展示.html<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Tab
一般HTML网站禁止右键选择的方法<body ondragstart="return false" oncontextmenu="return false" onselectstart="return false">解除网站禁用右键方法 并允许复制有的网页禁止了鼠标右键，无法查看源代码，解锁很简单 ：将常见的 document 事件处理程序全部设为 null，这可以解除大部分网站对鼠标
案例一效果代码：1.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts - Custom Map Connections</title> <!-- 引入 ECharts --> <scr
在html如何调用exe程序新建hello.c文件#include <stdio.h> #include <stdlib.h> int main(int argc, char* argv[]) { int i; printf("Total %d arguments\n",argc); for(i = 0; i < argc; i++)
grid布局
一、px、em、rempx：像素点,相对长度单位,相对于计算机屏幕分辨率Chrome浏览器默认显示最小字体为12px 。em：相对长度单位，相对于当前对象内文本的字体尺寸任意浏览器默认的相对字体高度为16em12px = 0.75em10px = 0.625em rem:rem是CSS3新增的一个相对单位（root em，根em）rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元
一、什么是flex布局Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局.box{ dispaly: flex; }行内元素也可以使用flex布局.box{ display: inline-flex; }flex布局特征默认单行显示父元素长度不够时会压缩子元素当不给子元素设置宽高时，子元素会撑满父元素二、基本概念
SSE(Server-Sent Events)WebSocketsse和websocket的对比：综合以上对比结果，若是H5动作较少的单向刷新场景，例如股价刷新、新闻动态等，建议选择SSE；若是在线协作、实时游戏等H5跟服务端交互较多的场景，建议使用WebSocket。三种方式进行通讯之-HTTP请求三种方式进行通讯之-WebSocket请求三种方式进行通讯之-Server-Sent Events
前端必会的 HTML+CSS 常用技巧 之 虚线的特殊实现方式利用边框 border 属性利用background 的 linear-gradient 属性上下左右矩形利用边框 border 属性这个属性比较简单<div class="dashed">利用边框 border dashed 属性实现虚线</div> <div class="dotted">利用边框
需求通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级。当点击第一级下拉菜单，第二级菜单的内容会自动匹配；选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。实现原理代码<!DOCTYPE html> <html lang="en"> <head> <meta cha
需求1、表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮;2、点击表单里的输入框，隐藏提示文字;3、点击提交和重置按钮时，都需要有相应的提示;4、在表单提交时，需要进行验证验证填写内容是否合理:昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。实现原理代码
发送验证码需求1、发送按钮点击后，会被禁用2、被点击后，按钮里面的内容会变化成1分钟的倒计时;3、待发送按钮被触发后才可以点击提交按钮，需在验证码框里填写0505，用弹窗提示成功。实现原理代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
1、border实现<div class="xuxian"></div> .xuxian { width:100%; height:0; border-bottom:red 1px dashed; }当然也可以直接简单点border-bottom: 1px dashed #ccc;2、把hr也可以设置成虚线hr {border:blue 1px da
要使div靠右，可以使用CSS的float属性或者text-align属性，或者使用Flexbox。以下是几种方法的示例代码：使用float属性：<div style="float: right;">我靠右边</div>使用text-align属性（假设div是其父元素的直接子元素，且父元素是一个块级元素）：<div style="text-align: right;
在开发过程中，有时候需要js生成全局唯一标识符，在java中可以使用uuid，但是JS中没有现成的函数。总结了一下，JS生成唯一标识符的几种方法。第一种：function guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = Math.ra
uuidjshttps://github.com/uuidjs/uuid/1. Installnpm install uuid2. Create a UUID (ES6 module syntax)import { v4 as uuidv4 } from 'uuid'; uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'... or
Fuse.js是一个Apache License开源项目。Fuse.js是一种轻量级的模糊搜索，在JavaScript中，没有依赖关系。https://www.fusejs.io/案例一 npm install --save fuse.js<template> <div class="hello"> <el-input v-model="title" pl
noVNC安装和使用但是只能代理本地，不能代理其他地址，不知道原因，后面继续。安装tigervnc-server# dnf安装tigervnc-server dnf install tigervnc-server cp /lib/systemd/system/vncserver@.service /etc/systemd/system/vncserver@:1.service vim /etc/s
反调试前端代码可以在开发者工具中看到，还可以查看网络请求的数据等。限制别人打开开发者工具或者让别人用不了开发者工具就达到反调试的目的了。常规方法监听是否打开开发者工具，若打开，则直接调用JavaScript的window.close()方法关闭网页。方法一监听F12按键、监听Ctrl+Shift+I（Windows系统）组合键、监听右键菜单。监听Ctrl+s是为了禁止保存至本地，避免被Overri
反调试前文：前端Chrome反调试方法一文中介绍了几种防止别人查看前端代码（主要是JS代码，HTML标签还是可以在Elements选项卡中查看）。有防止必有破解，以下介绍几种破解方式。一、反反调试 - 常规方法前文所提到的几个反调试方法，除debugger方式外，均判断是否打开开发者工具。破解的方式也很简单，基本只需两步就可以搞定。将开发者工具以独立窗口形式打开。打开开发者工具后再打开网址。二、反
Google Chrome快捷键大全Google Chrome是一款流行的网络浏览器，提供了许多快捷键来方便用户操作。本攻略将介绍Google Chrome的常用快捷键，包括页面导航、标页管理、书签管理、搜索等。同时，本攻略还提供了两个示例说明，帮助您更好地理解和应用这些快捷键。页面导航后退：Alt + ← 或 Backspace前进：Alt + →刷新：F5 Ctr
Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号
