Gahing's blog Gahing's blog
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Gahing / francecil

To be best
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 前端基础

    • 编程语言

      • CSS

        • CSS 学习笔记
        • BFC
        • flex布局笔记
        • inline-block空内容最小高度的问题
          • 使用 padding-top 占位图在 Safari 的异常表现
          • 撑开在 ie 11 也有问题
        • 单行文本两端对齐
        • 响应式卡片分页
        • 实现两个直角梯形按钮斜切的效果
        • 最多2行文本&单行文本居底
        • 段落文本嵌入图标
        • 监听 stick 状态
        • 【前端】仿 Android TextView 实现完整的文本溢出截断省略效果
        • 前端元素默认宽高
        • CSS居中布局
      • HTML

      • JavaScript

      • Rust

      • TypeScript

      • WebAssembly

    • 开发工具

    • 前端调试

    • 浏览器原理

    • 浏览器生态

  • 应用框架

  • 工程能力

  • 应用基础

  • 专业领域

  • 业务场景

  • 大前端
  • 前端基础
  • 编程语言
  • CSS
gahing
2022-05-06
目录

inline-block空内容最小高度的问题草稿

默认字体的原因,父容器设置 font-size 0px 即可

https://segmentfault.com/q/1010000014455867

https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

# 使用 padding-top 占位图在 Safari 的异常表现

padding-top 百分比参照是父容器宽度

container 1000px wrapper 200px item padding-top:100% => height:200px

如果 item 里面有内容,会有 line-height 的问题

overflow: hidden 解决

demo https://codesandbox.io/s/tender-lamarr-zq65c?file=/src/styles.css

# 撑开在 ie 11 也有问题

https://www.geek-share.com/detail/2733122778.html

编辑 (opens new window)
上次更新: 2023/08/26, 10:18:07
flex布局笔记
单行文本两端对齐

← flex布局笔记 单行文本两端对齐→

最近更新
01
我的 2024 总结
12-31
02
浅谈代码质量与量化指标
08-27
03
快速理解 JS 装饰器
08-26
更多文章>
Theme by Vdoing | Copyright © 2016-2025 Gahing | 闽ICP备19024221号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式