内容宽度限制

body{
  max-width: clamp(320px, 80%, 1000px);
  /* 额外建议 */
  margin: auto;
}

这一行代码可以将内容宽度限制在视窗宽度的 90%，并且限制在 320 到 1000 像素之间（你可以根据需要调整最小值和最大值）。这样可以让你的内容看起来更美观，不再是一大块文字，而是更有结构感。如果你也给 body 添加 margin: auto;，内容就会居中显示。仅仅两行代码，就能让你的网站看起来好很多。

对齐和限制内容宽度，比一大块文字更美观。

放大文字

浏览器默认的 16 像素字体太小了，尤其是对于我们这些老家伙来说 😅。一个简单的解决方法是将 body 的字体大小放大。由于 CSS 的层叠性，页面上的所有文字都会自动放大。

body {
  font-size: 1.25rem;
}

更大的文字大小让阅读更加舒适

增加行距

body {
  line-height: 1.5;
}

另一个提升可读性的方法是增加段落和内容中行与行之间的间距，避免出现令人头疼的文字墙。你可以使用 line-height 属性轻松实现。

增加行间距可以打破文字墙，让页面看起来更通透。虽然这种做法（连同之前两个技巧）会让网页垂直高度增加，但它能有效提升可读性，让所有用户都能更轻松地阅读。

限制图片大小

img{
  max-width: 100%;
}

图片的大小应该与它们所占空间的大小差不多，但有时我们会遇到很长的图片，导致内容发生偏移，出现水平滚动条。一个避免这种情况的方法是设置图片的最大宽度为 100%。虽然这不是一个完美的解决方案（边距和填充可能会影响宽度），但在大多数情况下都能奏效。

让表单控件颜色与页面风格

body {
  accent-color: #080; /* 使用你喜欢的颜色 */
}

这行代码的改变并不大，但可以让你的页面更美观。以前我们无法使用 CSS 来设置原生表单控件的样式，只能使用浏览器的默认样式。但现在情况已经改变。虽然开发一个完整的组件可能很麻烦，但使用这行代码，可以轻松地将表单控件的颜色设置为与网站的其他部分和设计系统更匹配的颜色。

表格

1, 给表格添加斑马线

:is(tbody, table) > tr:nth-child(odd) {
  background-color: #0001; /* 或者#fff1用于深色主题 */
}

2, 增加单元格和标题的间距

td, th {
  padding: 0.5em;
}

另一个让表格更易读、更易访问的技巧是，给表格单元格和标题添加一些填充，增加文字间距。默认情况下，大多数浏览器都没有填充，不同单元格的文字会挤在一起，难以区分哪里是起点哪里是终点。我们可以调整填充值，使间距符合自己的喜好。但不要过度填充，避免出现不必要的滚动条或太多空白空间

适当的间距，可以更方便地水平和垂直浏览数据。