- ||||||-----|||||||【 张鑫旭的指点迷津 】 — 【 前端开发手册 】
-
—— `路漫漫其修远兮，吾将上下求索` - |||||-----||||||||【 鹅厂Coco文献大全 】 — 【 github学习知识库（全）】
| — 常用的工具 — | |
|---|---|
| 【1】 CSS Sprites -生成精灵图 | 【2】Tin 图片在线压缩 ++Flexbox 生成工具图片插件 ++ viewer.js图片查看器 |
| 【3】终极CSS渐变生成器工具 | 【4】 小志 - css工具集(居中) ++ 无双 — css 各种居中效果 |
【5】 查兼容 ++ 加兼容 ++ 在线编码 BASE64 工具 | 【6】css3动画效果库 ++ css 参考手册 ++ CSS 中文版 |
【7-CND】jsdelivr -工具 ++ 360 -工具 ++ 字节跳动 -工具 |
》》》正则：
—> 正则校验正负数字，找到不匹配字符位置； || —> 银行卡显示星号验证；
—> 身份证号银行卡号生成器； || —> 身份证号银行卡号生成器 2；
// 【1】---> 手机号(mobile phone)中国(严谨), 根据工信部2019年最新公布的手机号段
const text = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
// 【2】邮箱(email)
const text = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// 【3】密码强度校验，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
const text = /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/;
// 【4】身份证号(2代,18位数字),最后一位是校验位,可能为数字或字符X
const text = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
text = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/; // 支持1/2代
// 【5】整数或者小数，最多保留2位小
const text = /(^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$)/;
text = /^[0-9]*$/; // 整数
text = /^-?[0-9]\d*$/; // 整数
text = /^[0-9]*[1-9][0-9]*$/; // 整数
text = /^([0-9]|10)$/; // 10以内数字
text = /^([0-9]|1[0-5])(\.[0-9])?$/; // 匹配整数，或带一位小数
// 【6】 中文、英文
const text = /^[\u4e00-\u9fa5a-zA-Z]+$/;
》》》CSS：
/* 去掉输入框上下箭头 */
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
/deep/ input[type="number"] {
-moz-appearance: textfield; /* 兼容 */
appearance: none;
}
/* 解决输入中文后光标上移的问题 */
/deep/ .el-input__inner {
line-height: 1px !important;
}
1、重排
当 render 树中的一部分或者全部因为大小边距等问题发生改变而需要 DOM树重新计算的过程。
- 重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）— 重排/重绘 解释
2、小技巧
/* box-shadow 阴影 */
.box2 {
width: 100px;
height: 100px;
background-color: blue;
margin: 20px;
box-shadow: 0 10px 0 -5px red, 0 -10px 0 -5px blue, 0 20px 0 -10px blue, 0 -20px 0 -10px blue; /* 上下偏移 */
}
/* 1、button点击时会有蓝色边框线 : */
button, input { outline: none; }
/* 2、隐藏滚动轴 pc端滚动条隐藏 */
::-webkit-scrollbar { display: none; }
/* 隐藏滚动轴 微信 scroll-view 隐藏滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
｝
/* 3、webpack打包样式 - 浏览器前缀问题 autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
/* 4、文字省略点点点（...） */
.text-flow {
overflow: hidden;
text-overflow: ellipsis; // 多数浏览器已经支持
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
.clamp-md {
-webkit-line-clamp: 2; // 控制行数
}
3、border 边框
* {
box-sizing: border-box;
margin: 0 auto;
padding: 0;
}
div {
width: 200px;
position: relative;
padding: 40px 0;
}
div::before,
div::after {
content: '';
display: block;
height: 40px;
border-left: 4px solid #fff;
border-right: 4px solid #fff;
position: absolute;
right: auto;
left: auto;
width: 200px;
}
div::before {
border-top: 4px solid #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
top: 0;
}
div::after {
border-bottom: 4px solid #fff;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
bottom: 0;
}
p {
margin: 0 -20px;
padding: 10px 0;
}
<div>
<p>
sdsadsadsadsasdasdsadsadsadsdsd
asdsaddsadsad
</p>
</div>
4、倒尖三角的写法：
.g-container-case .swiper-button-prev:after {
content: " ";
position: absolute;
top: 12px;
right: 16px;
display: block;
height: 15px;
width: 15px;
border-width: 2px 2px 0 0; // 边线的大小
border-color: #fff;
border-style: solid;
/*! autoprefixer: off */
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); // 旋转的角度
/* autoprefixer: on */
}
/* 正三角形 */
span {
width: 0; // 正三角写法(下图第一个)
height: 0;
border-top: 8px dashed #ddd;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
/* 简写 */
.tabbar-box .tabbar-list li span {
display: inline-block;
width: 0;
height: 0;
border: 12px solid transparent;
border-left-color: #ff0;
}
/* 正方形 */
p {
width: 100%; // 不设宽高的正方形写法
padding-bottom: 100%;
}
5、inline-block内联元素空隙问题：
1)、当使用内联元素把块级元素转换为内联时，会发现两个内联元素之间有一定的间隙，既不是margin或padding，最后发现是由于换行符、制表符、空格等字符引起；
由于模块使用[换行符]或[空格符]后，webkit浏览器中会引起最后一个模块有多余空白，可以使用font-size:0可清除该空格：
方法： 在父元素中设置font-size: 0; 然后再在子元素上重置正确的 font-size;
2)、opera浏览器需要添加 vertical-align:top 才能完全解决底部多余的空白，是在:after中添加；
.demo:after{
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;
}
多个内联元素之间的高度坍塌问题，在子元素上用vertical-align: top 解决；（inline-block生效）
6、vertical-align： 属性设置元素垂直对齐的方式；(效果与 8 一致)
同时，称之为“inline-block依赖型元素”，只会在inline-block上起作用；
在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，这个假想又似乎存在的空白节点，
称之为“幽灵空白节点”。
vertical-align和line-height 好基友
.div { line-height: 0; }
.div .justify-img {
display: inline-block;
width: 128px;
vertical-align: top; // 在处理行内元素与行内元素之间的高度问题上也有很大作用；
}
- top //把元素的顶端与行中最高元素的顶端对齐
- middle //把此元素放置在父元素的中部
- bottom //把元素的顶端与行中最低的元素的顶端对齐
参考文献：张鑫旭-对CSS vertical-align的一些理解与认识
7、object-fit 的理解:
属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框；缺点是不兼容IE
object-fit - fill //初始值
- contain //被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比
- cover // 被替换的内容大小保持其宽高比，同时填充(铺满)元素的整个内容框
参考文献：MDN web docs
8、优惠券
<div class="coupon">50</div>
.coupon {
position: relative;
width: 400px;
height: 160px;
margin: 50px auto;
background-image:
radial-gradient(circle at 1px 8px, transparent 6px, #f49714 6px, #f49714 0px),
radial-gradient(circle at 199px 8px, transparent 6px, #f49714 6px, #f49714 0px);
background-size: 200px 18px;
background-position: 0 0, 200px 0;
background-repeat-x: no-repeat;
font-size: 100px;
color: #fff;
font-weight: bold;
line-height: 160px;
padding-left: 60px;
box-sizing: border-box;
cursor: pointer;
}
.coupon:before {
position: absolute;
content: "";
left: 240px;
top: 0;
bottom : 0;
width: 0;
border-left: 1px dashed #fff;
}
.coupon:after {
position: absolute;
content: "立即领取";
font-size: 30px;
width: 70px;
top: 50%;
right: 2%;
transform: translate(-50%, -50%);
line-height: 40px;
letter-spacing: 5px;
}
559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
