html/css使用经验总结

<!-- 错误示例 -->
<div onclick="goToPage()">点击这里</div>

<!-- 正确示例 -->
<a href="/page" role="button">跳转页面</a>

/* 三栏响应式布局 */
.container {
  display: flex;
  flex-wrap: wrap;
}

.sidebar { flex: 0 0 250px; }
.main { flex: 1 1 600px; }
.widget { flex: 0 1 200px; }

/* 移动端适配 */
@media (max-width: 768px) {
  .container > * { flex: 1 1 100%; }
}

/* 杂志式布局 */
.grid-layout {
  display: grid;
  grid-template:
    "header header" 80px
    "sidebar main" 1fr
    "footer footer" 60px
    / 200px 1fr;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }

/* 现代方案 */
.center-box {
  display: grid;
  place-items: center;
}

/* 传统方案（兼容旧浏览器） */
.legacy-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 清除浮动类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 多行文本溢出 */
.multi-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 控制行数 */
  overflow: hidden;
}

/* 启用GPU加速 */
.animate-element {
  transform: translateZ(0);
  will-change: transform;
}

/* 避免布局抖动 */
.avoid-reflow {
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s;
}

<!-- 延迟非关键CSS -->
<link rel="preload" href="critical.css" as="style">
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

/* 基础样式（移动端） */
.card { padding: 1rem; }

/* 平板适配 */
@media (min-width: 768px) {
  .card { padding: 1.5rem; }
}

/* 桌面端适配 */
@media (min-width: 1024px) {
  .card { 
    padding: 2rem;
    max-width: 1200px;
  }
}

<picture>
  <source srcset="large.jpg" media="(min-width: 1200px)">
  <source srcset="medium.jpg" media="(min-width: 768px)">
  <img src="small.jpg" alt="响应式图片">
</picture>

:root {
  --primary-color: #3498db;
  --spacing-unit: 8px;
}

.button {
  background: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
}