小鸟不会飞的前端经验_前端飞翔小鸟项目经验-CSDN博客

本文链接：https://blog.csdn.net/f_h_h/article/details/108147792

class=“xxx"元素的文字超过2行时显示”…"(要把这个盒子的高度确定为最多显示2行文字)

.xxx{
	display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

万能的盒子内的图片居中(不采用flex等布局的情况下)

div{
	width: 500px; /* 未知情况下 */
	height: 300px;
	text-align: center;
	border: 1px solid red;
}
div::after{
	display: inline-block;
	content: "";
	height: 100%;
	width: 0;
	background: green;
	vertical-align: middle;
}
div img{
	vertical-align: middle;
}

按照比例撑高度

.pic-box{
	position: relative; /* 不能删掉*/
    overflow: hidden; /* 超过父元素的去掉.可以删掉*/
}
.pic-box::after {
    content: "";
    display: block;
    padding-bottom: 52.6%; /* 用padding-bottom撑高度比例*/
}

手写的"×"框

.close {
    display: block;
    position: absolute;
    top: 0;
    left: -15px;
    --w: 16px;
    width: var(--w);
    height: var(--w);
    border: 1px solid #ddd;
    box-sizing: border-box;
}

.close::before {
    display: inline-block;
    position: absolute;
    content: "";
    top: 47%;
    left: 12%;
    width: 80%;
    height: 4%;
    background-color: #ddd;
    transform: rotate(45deg);
}

.close::after {
    display: inline-block;
    position: absolute;
    content: "";
    top: 47%;
    left: 12%;
    width: 80%;
    height: 4%;
    background-color: #ddd;
    transform: rotate(135deg);
}

正确获取游览器窗体高度

// html加了<!DOCTYPE html> 的文档声明后,才能获取到正确的窗体高度
var windowHeight = $(window).height();

给网页设置滚动条样式

::-webkit-scrollbar {
    width: 6px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #d82017;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

多选框样式

input[type="checkbox"] {
    width: 12px;
    height: 12px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 12px;
    position: relative;
}
 
input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    border: 1px solid #d9d9d9;
    transition: all 0.2s;
}
 
input[type="checkbox"]:checked::before {
    content: "\2713";
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px solid #386ef2;
    color: #386ef2;
    font-size: 10px;
    font-weight: bold;
}

记录一些好看的选中样式

::selection {
    background: #262a30;
    color: #fcfcfc;
}

前端限制图片上传格式.

<input type="file" id="file" multiple="multiple" accept="image/gif, image/jpeg, image/gif, image/png, image/bmp, image/webp">
<!--image/gif, image/jpeg, image/gif, image/png, image/bmp, image/webp-->

封装正则匹配

String.prototype.myReplaceAll = function(f,e){//吧f替换成e
    var reg=new RegExp(f, "g"); //创建正则RegExp对象   
    return this.replace(reg, e);
}

// 使用
newsDesc = newsDesc.myReplaceAll(value, "<em>"+value+"</em>"); // value 是字符串 ""

// *正则全局/g匹配的是字符, 不是字符串, 故作此封装.