Skip to content

[CSS] 防御型编程 in CSS #39

@PeterChen1997

Description

@PeterChen1997

原文:https://ishadeed.com/article/defensive-css/

  • flex 布局:
    • 可以加上 flex-wrap: wrap; 来避免内容溢出
    • 使用 gap 代替 space-between
  • 溢出:
    • 使用 min-height 代替 height
      • min-height: 100px;
    • 使用 min-width 代替 width
      • min-width: 100px;
  • 文本排版:可以给文本溢出加上安全 space
    • margin-right: 10px;
  • 文本排版:定宽定高的文本展示区域,加上不换行的限制
    • white-space: nowrap;
    • overflow: hidden;
    • text-overflow: ellipsis;
  • 图片排版:使用 object-fit 来避免拉伸
    • object-fit: cover;
  • 图片排版:给所有包含 img 的元素设置 background-color
    • 可以在图片加载失败时正常展示背景色
  • 交互:文本滚动溢出
    • 限制仅滑动当前元素,不影响父元素
      • overscroll-behavior-y: contain;
      • overflow-y: auto;
  • CSS 变量:考虑 fallback场景
    • max-width: calc(100% - var(—actions-width, 70px));
  • background 属性:考虑设置 background-repeat: no-repeat,避免图片重复展示

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions