学习 Web 前端

白天 夜间 首页 下载 阅读记录
  我的书签   添加书签   移除书签

公用/初始化

浏览 128 扫码 分享 2023-07-07 09:00:20
  • 初始化
  • utilities 功能样式
    • 断点 Breakpoints
    • Spacing
    • 深色模式
    • Typography

    初始化

    清除浏览器默认样式

    1. /*让 box-sizing 继承 html*/
    2. html {
    3. box-sizing: border-box;
    4. }
    5. *, *:before, *:after {
    6. box-sizing: inherit;
    7. }
    8. *, *::before, *::after{
    9. box-sizing: border-box;
    10. }

    utilities 功能样式

    断点 Breakpoints

    Spacing

    深色模式

    Typography

    若有收获,就点个赞吧

    0 人点赞

    上一篇:
    下一篇:
    • 书签
    • 添加书签 移除书签
    • HTML学习笔记
      • HTML标签
        • meta
          • meta 标签
          • viewport
        • 文件路径
        • 文本标签
          • 使用 <ruby> 标签显示拼音
        • 列表
        • 表格
        • 表单标签
        • 多媒体标签
          • audio
        • 绘图标签
          • canvas
        • 拖拽
        • 应用缓存 离线web应用
        • HTML Web Workers
      • html语义化
      • HTML全局属性
      • 颜色
    • Emmet代码简写语法
    • CSS学习笔记
      • CSS基础 常用属性
        • 引入css
        • CSS优先级
        • CSS关键字
        • 版式 排版 typography
          • 文本
            • text-decoration 划线修饰文本
            • text-emphasis对文字进行强调装饰
          • 列表项
          • color 配色
        • 长度、时间、频率、角度单位
        • 盒模型
          • Layout布局
            • Flex 弹性布局
            • Grid布局
            • column多列布局
            • 媒体查询
            • screenbar滚动条
          • margin padding 间距
          • resize 设置元素尺寸
          • box-decoration-break 指定跨行渲染表现
          • box-shadow 阴影
          • box-reflect 倒影
        • 定位
          • position
        • 视觉
          • 背景/渐变
          • 边框(border)
          • outline 轮廓
          • 圆角border-radius
          • 图形与图像
            • clip-path 剪辑路径
            • mask遮罩
            • blend-mode 混合模式
            • CSS混合模式mix-blend-mode/background-blend-mode
            • 滤镜filter
            • 背景滤镜 backdrop-filter
        • 交互
          • scroll-behavior 滚动行为
        • 动画与过渡:animation、transition、transform、translate
          • animation
          • cubic-bezier 贝塞尔曲线
        • CSS选择器
          • 伪元素和伪类
          • 条件逻辑选择器
        • CSS变量
        • 表单相关样式
        • @规则
          • @media 媒体查询
          • @container 容器查询
          • @property 自定义属性
          • @supports css属性支持查询
          • @layer 定义样式优先级
          • @scope 作用域内样式
          • 浏览器兼容性
        • CSS函数Function
          • cross-fade()图像函数
        • CSS Modules
        • css继承
      • CSS Houdini API
      • CSS 方法论
      • CSS 预处理器
        • 导入 @import
      • CSS 常用样式效果 Code Snippets
        • 滚动条
        • 表单
        • 公用/初始化
        • 布局
        • 文本
        • 分割线
        • 按钮
        • tag 标签
        • 头像
        • 卡片
        • 常用阴影效果
        • 形状
        • 列表
          • CSS实现列表左滑显示按钮的交互效果
        • 进度条
        • wave 波浪
        • 图片加载失败后CSS样式处理最佳实践
        • Loading 效果
        • 新拟态
      • CSS Awesome
        • CSS在线工具网址导航
    • JavaScript
      • JavaScript语言基础
        • 引入 js
        • 基础概念
          • 变量的作用域
          • 变量与内存
        • Javascript数据类型
          • null,undefine和布尔值
          • number数值
          • string字符串
          • symbol (符号)
          • object 对象
          • array 数组
          • 字典Map和Set----数组格式的键值对
          • JavaScript 新增原始数据类型Record 和 Tuple
          • 数据类型检测
            • is.ts 常用数据类型判断方法
          • 数据类型转换
        • javascript 运算(操作)符
        • 控制流程
          • 条件判断(分支结构)
          • 循环遍历(循环结构)
          • 异常处理
        • JavaScript内置对象(标准库)
          • Number
            • 数字常用计算操作
          • String
            • 字符串常用操作
          • Symbol
          • Array
            • 数组常用操作
          • Object
            • 对象常用操作
          • toString和valueOf
          • 单例内置对象Global与Math
          • 包装对象
          • 函数
            • 创建函数
            • 函数的参数(输入)
            • 函数的返回(输出)
            • 调用函数
            • bind、call和apply
            • 高阶函数
            • 闭包
            • 柯里化
            • async、await异步解决方案
            • 防抖
            • 节流
          • Date 日期
            • 日期常用操作
            • 前端时间国际化
          • Regexp
            • 正则常用操作 || 工具函数
          • JSON
          • Proxy 代理器
          • Reflect
          • Promise
          • Error (JavaScript 报错类型)
        • class 类
        • 迭代器
        • 生成器
        • ES6 模块化
        • 面向对象编程
        • this
        • JS 作用域
        • JS原型相关知识点
        • JS 内存机制
        • JS 执行上下文和执行栈
        • JS执行过程
      • JS Tool Code Snippet
        • utils.js
        • color
        • window
          • url
        • dom
      • WebAPI
        • BOM
          • window对象
          • 全局对象属性
            • navigator 浏览器信息
            • performance
          • console
          • URL对象
          • AJAX--与服务端交换数据
            • Fetch API
            • mock 数据
            • cookie、session、token、jwt、单点登录
          • FormData 表单数据
          • 二进制数据 文件 File、FileList、FileReader
            • ArrayBuffer与Blob
            • FileReader
            • File System Access API
            • 文件上传
            • 文件下载
              • 基于 HTTP Range 实现文件分片并发下载!
            • JS 文件互转
            • 前端上传图片压缩方案
          • 存储
            • cookie
            • Cookie
            • Storage
          • requestAnimationFrame 动画
          • matchMedia 媒体查询
          • WebSocket
          • Web Notifications 通知
          • Selection API 选择文本
          • crypto 对象
          • 浏览器内核
          • 网页元素接口
        • DOM
          • Element 元素
          • 操作元素
            • 操作表单
          • 元素属性
          • 事件
            • 资源事件 页面载入、卸载时
              • Page Visibility API 页面可见性 API
            • MouseEvent 鼠标事件
            • KeyboardEvent 键盘事件
              • 键盘事件 常用操作
              • keyCode is deprecated
            • 表单事件
            • 进度事件
            • 事件循环 Event Loop
            • JS 事件循环 Event Loop
          • Mutation observer DOM 变动观察器
          • IntersectionObserver 监听DOM元素是否可见
          • DOMParser API 实现HTML字符的转义和反转义
          • DOM 常用操作
            • css方法封装、类名操作
            • 动画、匀速动画
      • JavaScript 数据结构与算法
    • TypeScript
      • 安装使用
      • 数据类型
        • 基本类型
        • 引用类型
          • 函数的类型
        • enum 枚举
        • interface 接口
        • type 类型别名
        • type 字面量类型
        • Generics 泛型 <T>
        • 类型推论
      • 内置工具类型
        • Readonly 所有属性值转换为只读的
        • Required 将类型的属性变成必选
        • Partial 将所有属性转换为可选属性
        • Exclude<T, U> 将某个类型中的另一个类型移除掉
        • Extract<T,U> 从某个类型中提取另一个类型
        • Pick 类似 Extract
        • Omit 类似 Exclude
        • NonNullable 去除类型中的 null 和 undefined
      • 类型关键字
        • is 类型保护(守卫)
        • keyof 返回该对象 key 值组成的联合类型
      • ts 运算符 / 操作符
        • ! 非空断言
      • JS 内置对象的类型
      • declare 声明文件
      • tsconfig.json 编译配置
    • SVG 可缩放矢量图形
      • SVG
      • SVG 形状
        • 基本形状
        • Path 路径
      • SVG Sprites 技术
      • Snap.svg
    • Canvas 图形
      • canvas图像识取图片主色
    • Chrome開發者工具
      • 检查和编辑页面样式
      • Chrome CSS Overview
      • JavaScript debugger 断点调试
      • chrome 开发者工具的 11 个小技巧
    • 前端开发常用框架、插件、类库
      • 组件化开发框架
        • Vue
          • Vue.js基础
            • 1. 入门
            • 2. 基础
              • refs 模板引用 访问子组件/元素 实例
            • 生命周期
            • 计算属性 computed 与侦听器 watch
            • watchEffect 监听器
            • Vue 修饰符
            • SFC 单文件组件
              • props
              • emits
              • 透传 Attribute
                • v-bind="$attrs" 封装第三方组件
              • Provide/Inject 跨级组件传值
              • css 样式
              • 内置组件
              • vue3 命名空间组件
              • 组件间传值
              • 组件复用常见问题
            • 内置指令
            • 数据与方法
            • filters过滤器 用于文本格式化
            • Vue3 Composition 组合式 API
            • vue3.2 script setup
            • Vue3 不向下兼容变更
          • Vue CLI 及项目配置
            • Vue CLi 常用命令
            • 使用vue-cli4创建vue项目
          • Vue Router
            • 路由跳转
            • 引入组件注册路由
              • 实现动态注册路由
          • Vuex
            • 实例
          • Vue SSR
            • Nuxt.js
              • 项目配置
              • 路由
              • asyncData 异步数据
              • 构建
              • nuxt.js开发常见问题
          • 常见问题
        • React
          • React基础
            • JSX
            • 基础
          • React Hooks
          • React应用开发框架
            • UmiJS
            • Next.js
            • dumi
      • 开放API / 数据 收集
        • 免费 API
      • Admin 企业中后台产品前端集成方案
        • Ant Design Pro of Vue
      • 博客 静态站点生成器
        • vuepress
        • Docusaurus
        • Gridsome
      • library(库)
        • CSS 样式 / 组件 / 图标库
          • 调试 Element UI 源码的
          • 踩坑记录
          • 阿里 Ant design
          • 金山云 King Desing
          • mantine
          • 移动端
          • 图标库
          • 消息弹窗
            • sweetalert
          • 骨架屏
          • CSS-In-JS
        • 工具函数库
          • 通用工具函数
            • Underscore
            • Lodash
            • omit.js 删除对象指定属性
          • 日期时间处理
            • day.js
            • moment.js
            • manba.js
          • uuidjs 生成唯一uid(用户id)
            • nanoid
          • 数字处理
            • Nzh 转换阿拉伯数字与中文数字
          • 前端加密
        • 数据可视化
          • AntV —— 蚂蚁集团可视化解决方法
          • 统计数据可视化
            • ECharts —— 百度
              • echarts 原生使用
                • 饼图
              • v-charts
            • G2Plot
            • BizCharts —— 阿里
            • 手绘风格图表
          • 关系数据可视化
            • X6 图编辑引擎
              • Cell 基类
              • Node 节点
                • ports
              • Edge
              • 工具 Tools
            • LogicFlow 滴滴流程可视化
            • Cytoscape.js
          • 地图 地理空间数据可视化
            • 大屏地图:从瓦片到引擎,到手把手实战
          • 数据大屏
            • Cloud Charts 阿里云
            • 腾讯云图 —— 『大屏可视化』
            • DataV
          • 2D渲染 游戏引擎
            • WEBGAL 网页端视觉小说引擎
            • annie2x
            • pixijs
          • 3D
            • Three.js
        • 图形/图像 处理
        • 动画库
          • CSS 动画库
          • canvas 效果
          • NProgress 页面顶部进度条
          • Lottie
        • 滚动库
          • vuescroll滚动条样式
          • swiper
          • vue-infinite-scroll 无限滚动列表
          • vue-seamless-scroll 无缝滚动插件
        • 在线 / 编辑器
          • 在线 excel
        • 用户交互
          • Fuse.js 客户端模糊搜索
          • 表单验证
          • sortablejs 拖拽
          • 使用 interact.js 实现拖拽
          • 新手引导
          • vue-codemirror
          • monaco-editor
            • vue3+vite 使用monaco-editor 编辑器
            • monaco常用方法
              • Model
        • 文件处理
        • 存储库 前端数据库
        • 前端数据模型
        • chchar 汉字拼音笔画js库
        • markdown 2 ppt
        • fingerprintjs 浏览器指纹
      • 工具
        • Webpack
        • Babel
        • PostCSS
        • Mocha
      • 在线 资源分享合集
      • 插件合集
    • 深入前端
      • Web Components 组件
      • WebGL
      • 微前端
      • Web 安全·
        • web安全之XSS实例解析
      • 前端性能优化
    • 前端开发规范
      • Vue 前端代码风格指南
      • 项目开发规范
      • HTML规范
      • CSS规范
      • javaScript规范
    • 项目实践
      • nuxt3
        • 创建项目
        • nuxt.config.ts 配置
        • app.config.ts
        • pages 页面 %26 router 路由 %26 middleware 中间件
        • 静态资源
        • components 组件
        • layouts 布局
        • composables Vue 可组合项(Hooks)
        • plugins 插件
        • 代码规范
          • typescript 配置
        • Pinia 全局状态管理
        • vueuse
      • Enhance
        • 环境变量
      • 从 0 搭建 Vite 3 + Vue 3 +TS 项目集成常用功能
        • 创建项目
          • package.json 的脚本命令
        • 部署静态站点
        • Vite 基础配置
        • 代码规范
          • EditorConfig 配置
          • 配置 TypeScript
          • 使用 commitizen git-cz 规范commit message
          • 配置 ESLint %26 Prettier
          • stylelint 规范 css 的书写风格
          • 配置 husky + lint-staged 验证提交内容
          • 使用commitlint验证提交信息
          • vue-tsc 检查提交代码的ts类型
          • 安装 rimraf 删除 node_modules
        • vite 插件
          • vite-plugin-html
          • vite-plugin-style-import 按需引入组件库样式
          • vite-plugin-mock
          • @vitejs-plugin-vue-jsx
          • vite-plugin-vue-setup-extend 添加name
          • @vitejs-plugin-legacy 浏览器兼容支持
          • vite-plugin-compression 开启 gzip
          • rollup-plugin-visualizer - 依赖包分析
        • vue-router 路由工具
        • Pinia 全局状态管理
        • ant design vue 组件库
          • 主题色配置
        • css 预处理器 less
        • 配置 vue-i18n 多语言
        • views 页面
        • enums
        • utils
          • setupComponents 注册全局组件
          • resize-event.ts
        • hooks
        • directives 指令
        • Gitee
        • 性能优化
      • 组件库Monmrepo架构与开发调试环境构建
    • 设计模式
    • 功能实现
      • 主题切换
      • 2种方式快速实现前端截图
      • 导出多个Excel文件并打包为压缩包下载
      • 浅谈前端弹幕的设计
      • 【实战】如何在输入框实现@ At功能的
      • 妙用 background 实现花式文字效果
      • 实现图片本地化 ServiceWorker + IndexedDB
      • 实现高仿github的内容diff效果
      • WebAR与小程序AR极速入门教程
      • 关键词高亮:HTML字符串中匹配跨标签关键词
      • 划线高亮和插入笔记的技术实现
    暂无相关搜索结果!

      让时间为你证明

      展开/收起文章目录

      分享,让知识传承更久远

      文章二维码

      手机扫一扫,轻松掌上读

      文档下载

      请下载您需要的格式的文档,随时随地,享受汲取知识的乐趣!
      PDF文档 EPUB文档 MOBI文档

      书签列表

        阅读记录

        阅读进度: 0.00% ( 0/0 ) 重置阅读进度

          思维导图备注