学习笔记

记录我学习前端路上的每一个知识点 ✏️

#HTML5#CSS3#布局#每天进步

6笔记篇数

4分类标签

∞持续更新

学习笔记

📄

HTML5

每个网页都从这里开始，结构语义化是写好页面的第一步。

<!DOCTYPE html>
<html lang="zh-CN">
  <head><meta charset="UTF-8"></head>
  <body>...</body>
</html>

📦

CSS3

设置 border-box 后，宽高计算包含内边距和边框，布局不再“跑偏”。

* { box-sizing: border-box; }

📐

布局

一行代码让子元素水平排列并垂直居中，比浮动省心太多。

.box {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
}

🔲

布局

商品列表、图片墙都用它，repeat 一句话搞定每行 2 个。

.list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

🎨

CSS3

渐变、圆角、柔和投影，三件套让卡片立刻有质感。

.card {
  background: linear-gradient(135deg, #4a7dfc, #6a5cff);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(90,100,255,.28);
}

📱

HTML5

viewport 禁止缩放 + 最大宽度限制，页面在手机上刚刚好。

<meta name="viewport" content=
  "width=device-width, initial-scale=1.0,
   maximum-scale=1.0, user-scalable=no">

正在学习中·笔记持续更新·2026