CSS浮动与清除浮动技巧
0
19
2026年6月14日
前端开发是用户体验的第一道防线。本文分享3个完整可运行代码示例，涵盖现代前端开发核心技能。
完整Flexbox工具类
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工具包
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);
});前端最佳实践
- 语义化HTML：header, nav, main, article, footer
- BEM命名：block__element--modifier
- 最小化重排重绘：批量DOM修改
- 图片优化：WebP、懒加载、srcset
- 代码压缩：Gzip/Brotli压缩
- 静态资源使用CDN
- 正确的Cache-Control头
技术分享，欢迎评论区交流讨论。
在线咨询
上一个应该是我，我买了一年，实在没价值，...