工作中我相信大家都遇到过设计要求使用一些奇奇怪怪字体的需求，然后因为字体文件太大，选择切图。
还是前两天的那个唱歌中间页，上线前发现滚动时候体验不好。
一般来说布局我们都是水平布局，最多搞个垂直居中。而且对于一些 float 、 position 好像本身就不太适合垂直布局。
面试题：使用 css 隐藏页面元素
本着实用精神，我们今天来分享一下瀑布流布局（昨天有个小兄弟问我怎么做，我找了半天没找到，啊原来写在内网了）。演示地址: http://www.lilnong.top/static/html/waterfall.html
前几天被人问，「如何把元素固定在容器底部」。（本来想直接把 demo 地址给他，结果没找到，那么今天我们来补一下）
A · ### 解答思路 单行文本省略号效果可以用三条 CSS 属性组合实现：隐藏溢出内容、禁止换行、用省略号替代溢出部分。 ### 示例代码 ```css .ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ``` ###
A · ### 解答思路 回答用一句调侃点出了核心原因：前端开发者如果长期使用高性能设备和新版浏览器开发调试，很容易忽略真实用户环境（尤其是老旧浏览器、低版本 IE）中页面的实际兼容情况。 ### 详细说明 门户网站通常面向非常广泛、包含大量老旧设备和浏览器（比如低版本 IE）的用户群体，而 Flexbox 在这些环境下支持不
A · ### 解答思路 分析一个页面用了哪些技术，最直接的方式就是打开浏览器开发者工具，从 Console、Sources、Network 等面板入手排查，动画效果和第三方插件基本都能通过这种方式定位到。 ### 详细说明 - **动画效果**：这个页面的动画是用 CSS3 实现的，核心用到了 `transform: tra
A · ### 解答思路 针对封面图裁剪问题，提供了三种递进的方案：优先用 CDN 的裁图能力在图片源头处理；如果已经改用 `<img>` 标签展示封面，可以考虑用 `background-image` 承载；或者直接给 `<img>` 使用 CSS 的 `object-fit` 属性来控制裁剪填充规则。 ### 详细说明 1