CSS元素溢出问题
Le Wed 12 February 2025
页面中某个元素溢出时，会导致页面布局不协调。
这样的元素被称为ghost CSS elements。
body, html {
overflow-x: hidden;
}
上述方案并不能解决实际问题。
使用了这样的样式，如果浏览器调整了窗口大小，会导致页面无法滚动显示。
所以需要找出导致页面溢出的真正元素，并给它合理的样式。
下述代码可以展示所有元素的渲染情况。
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
可以人工查看溢出的元素。
javascript:(function(){document.body.innerHTML+="<style>*{background: #000%20!important;color:%20#0f0%20!important;outline:%20solid%20#f00%201px%20!important;}%3C/style%3E%22;})();
本次学习的参考资料：
- https://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
Par 纳兰风来, Catégorie : study-coding
Tags :
Autres articles
APIFlask
Le Wed 12 February 2025
主页: https://apiflask.com GitHub: https://github.com/greyli/apiflask
APIFlask 在 Flask 的基础上添加了更多 Web API 相关的功能支持，核心特性包括：
更多方便的装饰器，比如 @app.input …
Par 纳兰风来, Catégorie : study-coding
Lire la suite …FastAPI 和 Flask
Le Wed 12 February 2025
FastAPI 是基于 Web 框架 Starlette 添加了 Web API 功能支持的（框架之上的）框架，而后者是和 Starlette 同类的通用 Web 框架。
Par 纳兰风来, Catégorie : study-coding
Lire la suite …让页面中丢失的图片展示为特定图片（使用 HTML、JavaScript、Flask 或 Nginx）
Le Wed 12 February 2025
页面展示图片时，若图片不存在，通常需要展示一个兜底图片。
本文设：
- 图片路径为 /imgs
- 默认图片为 /imgs/default.jpg
现有几种方案，择一 …