CSS盒模型与BFC原理
0
2
2026年6月21日
Flexbox工具类
.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.flex-1 { flex: 1; }
.flex-none { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}响应式媒体查询
.container {
width: 100%;
padding: 15px;
margin: 0 auto;
}
@media (min-width: 768px) {
.container { width: 750px; }
.col-md-6 { width: 50%; }
}
@media (min-width: 992px) {
.container { width: 970px; }
.col-lg-4 { width: 33.333%; }
.desktop-nav { display: flex; }
.mobile-menu { display: none; }
}
@media (min-width: 1200px) {
.container { width: 1170px; }
}
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; color: #fff; }
}jQuery工具包
$(function() {
$('#btn').click(function() { alert('点击了!'); });
$('.btn').addClass('active');
$('input[name="email"]').val('test@example.com');
$('#title').text('新标题');
$('#content').html('<strong>加粗文字</strong>');
$('#box').addClass('highlight');
$('#box').toggleClass('active');
$('#box').css({
'color': 'red',
'font-size': '16px'
});
$(document).on('click', '.dynamic-btn', function() {
console.log('动态按钮点击');
});
$.getJSON('/api/data', function(data) {
console.log(data);
});
$('#box').fadeIn(300);
$('#box').slideToggle(300);
});表单验证
class FormValidator {
constructor(formId) {
this.form = document.getElementById(formId);
this.rules = {};
this.errors = {};
}
addRule(field, rules) {
this.rules[field] = rules;
}
validate() {
this.errors = {};
for (let field in this.rules) {
const value = this.form[field].value;
for (let rule of this.rules[field]) {
if (!this.checkRule(value, rule)) {
this.errors[field] = rule.message;
break;
}
}
}
return Object.keys(this.errors).length === 0;
}
checkRule(value, rule) {
switch (rule.type) {
case 'required':
return value.trim() !== '';
case 'email':
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
case 'minLength':
return value.length >= rule.min;
default:
return true;
}
}
}工具函数
const utils = {
debounce(fn, delay = 300) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
},
throttle(fn, delay = 300) {
let last = 0;
return function(...args) {
const now = Date.now();
if (now - last >= delay) {
last = now;
fn.apply(this, args);
}
};
},
deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
},
formatDate(date, format = 'YYYY-MM-DD') {
const d = new Date(date);
return format
.replace('YYYY', d.getFullYear())
.replace('MM', String(d.getMonth() + 1).padStart(2, '0'))
.replace('DD', String(d.getDate()).padStart(2, '0'));
}
};AJAX封装
class HttpClient {
constructor(baseURL = '') {
this.baseURL = baseURL;
}
async request(url, options = {}) {
const response = await fetch(this.baseURL + url, {
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
return response.json();
}
get(url, params = {}) {
const query = new URLSearchParams(params).toString();
return this.request(url + (query ? '?' + query : ''));
}
post(url, data = {}) {
return this.request(url, {
method: 'POST',
body: JSON.stringify(data)
});
}
}最佳实践
使用语义化HTML，遵循BEM命名规范，最小化重排重绘，使用WebP图片，懒加载图片，代码压缩，静态资源使用CDN，设置正确的Cache-Control头。
技术分享，欢迎评论区交流讨论。
在线咨询
上一个应该是我，我买了一年，实在没价值，...