SeaBird

概念BFC（Block Formatting Contexts ） 就是即块级格式化上下文。是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 特性1.内部的元素会在垂直方向，从顶部开始一个接一个地放置。2.元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻 元素的margin会发生叠加3.都是从最左边开始的。每个元素的margin box的左边，与包含块border box的左边(对于从左往右的格式化，否则相反)。即使存在浮动也是如此4.BFC的区域不会与float box叠加。5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。6.计算BFC的高度时，浮动元素也参与计算（当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动元素的高度） 触发方式float 除了none以外的值 overflow 除了visible 以外的值（hidden，auto，scroll ） display (table-cell，table-caption，inline-block, f ...

#git常用命令 git branch 查看本地所有分支git status 查看当前状态git commit 提交git branch -a 查看所有的分支git branch -r 查看远程所有分支git commit -am “init” 提交并且加注释git remote add origin git@192.168.1.119:ndshowgit push origin master 将文件给推到服务器上git remote show origin 显示远程库origin里的资源git push origin master:developgit push origin master:hb-dev 将本地库与服务器上的库进行关联git checkout –track origin/dev 切换到远程dev分支git branch -D master develop 删除本地库developgit checkout -b ...

css实用技巧之制作优惠券凹槽日常开发中很多商城类项目都需要涉及优惠营销类，自然少不了优惠券的页面制作。而优惠券的设计经常会遇到凹槽，对于刚入门的前端来说没接触过就可能很难想象出如何能用纯CSS写出凹槽，很多人会使用图片作为背景，但使用图片有很大弊端，适用性不够广泛、不易扩展、图片较大占用网络等等。相反使用CSS实现容易扩展优惠券内容，几行代码又大大减小网络占用。今天咱就说说凹槽是如何实现的:以下样式基于HTML: 1<div class="coupon"></div> 1、纯色优惠券 12345678.coupon{ width:240px; height:100px; border-radius:10px; background-image: radial-gradient(circle at 9px 8px ,transparent 0%, transparent 8px,#e15852 8px, #e15852 100%); background-position: 66px -8px; background- ...

flex布局下文字超出隐藏失效解决办法1、flex盒子设置min-width:0;2、文字内容外套一层容器；

一、概念 每个对象都可以有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。查找特定属性的时候，我们先去这个对象里去找，如果没有的话就去它的原型对象里面去，如果还是没有的话再去向原型对象的原型对象里去寻找…… 这个操作被委托在整个原型链上，这个就是我们说的原型链了。 原型链图解

一、使用eject(npm run eject)暴露出webpack配置该方法会直接在项目下生成配置文件，可以直接在配置文件中修改。但该过程不可逆，不推荐该种用法 二、使用插件react-app-rewiredreact-app-rewired搭配插件customize-cra，在根目录下创建config-overrides.js文件可以覆盖默认配置；因react-app-rewired从19年后就没有人维护，也不推荐这种方法 三、使用craco插件安装 1yarn add @craco/craco OR 1npm install @craco/craco 在根目录下创建craco.config.js配置具体使用方法参考官方文档: https://github.com/gsoft-inc/craco 关于使用sass配置全局scss文件说明:在网上很多人都是这种写法(使用data),让我郁闷半天，查看webpack文档才发现这个是webpack4写法，webpack5中sass-loader在实际的文件之前要添加的 Sass / SCSS 代码使用additionalDat ...

JS模块化规范 时间线：AMD => CMD => CommonJs => UMD => ES6 ADM1、 异步模块定义规范（Asynchronous Module Definition）2、 适合在浏览器环境中异步加载模块3、 可以并行加载多个模块4、 AMD规范的实现：require.js 1234//定义define("moduleName", ["dep1", "dep2"], function(d1, d2) {...});//加载模块require(["moduleName",...], function(moduleName,...){...}) CMD1、 通用模块定义规范（Common Module Definiton）2、 异步加载模块，兼容nodejs3、 一个模块就是一个文件4、CMD规范的实现:SeaJS 12345678910//require 是一个方法，接受模块标 ...

react首次打包白屏react打包后index.html中引入文件是相对于根目录的(‘/‘)。打包后的文件直接打开使用的是file协议，是针对当前文件管理的根目录进行加载的,所以文件路径是错误的。服务器打开是使用http协议，针对网站根目录，就是域名默认指向的文件夹。 解决方案: package.json文件加入 123456package.json{ ..., homepage: '.', ...}

1.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.