现在用手机浏览网页的人越来越多，各种手机屏幕尺寸也各不相同。作为前端开发者，让网页在不同尺寸的手机上正常显示是个必须解决的问题。下面介绍四种常用的移动端适配方案，每种方法都有自己的优缺点，适合不同的使用场景。

现在很多网站都提供了深色模式功能。一个好的深色模式切换不仅要能改变颜色，还要有流畅的动画效果，并且能记住用户的选择。下面我们来学习如何实现这个功能。

CSS的display属性是网页布局的核心，它决定了元素如何显示在页面上。这个属性控制着元素的显示类型和其内部子元素的排列方式。不同的display值会带来完全不同的布局效果。

很多人在使用 Flex 布局时会遇到一个奇怪的问题：明明已经设置了 text-overflow: ellipsis，但文字超出容器时却没有显示省略号。这种情况经常发生在复杂的 Flex 布局中。

以前 CSS 里的 attr() 功能很有限。它只能做一件事：在伪元素的 content 属性里显示 HTML 属性的值。除此之外，基本没有别的用处。这个功能只有那些深入研究 CSS 规范的技术爱好者才会使用。

TailwindCSS 4 已经正式发布，当前最新版本是 4.1.13。这个新版本不仅增加了新功能，还提升了性能，而且定位也发生了变化：从一个 PostCSS 插件变成了“样式预处理器”。

编写代码不是简单的事，需要花费很多时间。即使有各种开发框架，写前端代码仍然很繁琐。正因为这样，大家一直在寻找更好的工具来简化这个过程。Tailwind CSS就是其中一个很受欢迎的工具，它能帮助开发者快速构建用户界面。

htmx是一个小巧的JavaScript库。它让你可以直接在HTML标签中添加特殊属性来实现动态效果，不需要写复杂的JavaScript代码。这个库只有大约14KB大小，不需要其他依赖。

Flexbox 布局本身没有问题。问题在于我们使用它的方式。你曾经遇到的许多“Flexbox 问题”，其实并不是真正的 bug：而是父元素和子元素在沟通上出现了误解；

虚拟列表是一种优化长列表显示的技术。当页面需要显示成千上万条数据时，如果全部渲染出来，浏览器会非常卡顿。虚拟列表只渲染用户能看到的那部分内容，其他内容用空白占位，这样就能大幅提升性能。

网站和应用的速度直接影响用户体验。加载太慢，用户就会离开，还会影响搜索引擎排名。无论项目大小，做好性能优化都很重要。下面介绍一些现在就能用的优化方法，让你的网站加载更快，用起来更顺畅。

做前端开发时，我们经常用JavaScript解决各种问题，却忽略了CSS本身就有很多好用但不为人知的功能。掌握这些CSS技巧，能让你写更少的代码，做更多的事情。