首页 css 正文

我要投稿

css文字底部对齐-让页面无可挑剔！关于CSS，你应该做这20件事

bendan520 css

2023-08-26 0 8,939 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

目前CSS的发展现状并不开放。我环顾四周，发现了各种各样的问题。后端开发更侧重于JavaScript，相对技术性更强。

但从后端技术的根本价值出发，实现高可用的产品用户界面是用户体验的第一关，这与CSS开发的专业性密切相关。只需改变窗口的大小，放大字体，页面就会折叠起来。这样的产品质量高吗？

本文会涉及到一些响应式开发的内容，TOB产品也需要响应式开发。以云安全中心为例，1920x1080和2560x1440相加，用户屏幕分辨率比例为52%。目前普遍开发的15英寸原生分辨率为1440x900，仅占9%。这表明我们大多数商业用户使用PC或使用外接显示器。

请注意：屏幕化学帧率≠浏览器窗口大小（如右图）。日常使用中外接显示器的使用方式有多种，例如立式使用、固定使用、分屏显示窗口等（如盖板）。因此，不能简单地根据屏幕码率进行设计和开发。我认为最能体现CSS开发专业性的是防御性CSS开发。

（数据来自 css-tricks）

“防御性编程是防御性设计的具体表现，它是为了确保程序的不可预见的使用不会导致程序的功能受损。它可以被视为试图减轻或消除对墨菲定理有效性的看法”。（引自维基）

如今的后端开发仍然是契约式的，即还原设计稿，这是远远不够的。设计稿通常只展示 UI 的理想状态。防御性 CSS 开发的一部分是实现响应式设计，但也包括调整动态内容以在各种情况下保持 UI 的完美和稳健。

1.采用扁平化的HTML结构，使用CSS控制布局1-1。防止使用“布局组件”

这会将模块限制在HTML结构上，不利于灵活适配。

HTML的结构设计是防止“表格思维”、防止多余的行/列元素（过多的包装元素）的基本前提。

例如，这样设计：

<div class="overview-content">
  <div class="sky-card overview-card">...</div>
  <div class="sky-card overview-card security-defense-card">...</div>
  <div class="sky-card overview-card">...</div>
  <div class="sky-card overview-card">...</div>
</div>

1-2. 不要使用 JavaScript 来控制布局

在线提问：

用 CSS 达到同样的效果：

2.防止使用float/position:absolute/display:table等方式布局

所有布局和对齐要求无一例外都是通过 Flexbox/Grid 实现的。

3.为了防止固定高度/宽度，将其替换为min-width/min-height

固定宽度/高度最常见的问题是内容溢出。不需要按固定的宽度和高度对齐，可以使用Flexbox的拉伸/收缩功能。可以定义最小宽度/高度。

4. 防止侵入性（损人利己）的书写方式 5. 防止意外/遗漏修改CSS代码

.mod {
  margin: 0;
}

/* 其它地方需要微调时 */
.biz-card .mod {
  margin-bottom: 16px;
}

6. 防止 CSS 样式冲突 7. 避免内容错位

受字体、行高等影响（如图），使用Flexbox实现对齐是最靠谱的：

与 Flexbox 对齐

8.避免内容溢出

包括文字/图表在内的内容在长度变化或英文版本下容易溢出（如图）。

注意：min()/max()兼容性：chrome79+/safari11/firefox75

9.避免内容过度拥挤

为了防止内容过长时内容粘在旁边的内容上，水平排列的元素之间应该设置一个宽度，通常是8px。

如果使用flexbox，则需要添加gap。考虑到gap:chrome84的兼容性，使用margin来稳定。

.item {
  margin: 0 8px 0 0;
}
.item:last-child {
  margin-right: 0;
}

10.避免模糊内容

定义负值（负边距/顶部/左侧）时，请注意内容被遮挡，以防止出现此类定义。定义一个方向的边距，向上和向右，然后重置：last-child。通常常用position:relative，当发生遮挡时，链接无法点击（如图）。

11.避免可点击区域太小

对于大于 32x32 像素的可点击元素，可点击区域按以下形式放大：

.btn-text {
  position: relative;
}
/* 比 padding 副作用小 */
.btn-text::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -8px;
  right: -8px;
  bottom: -6px;
}

12.避免显示不完整/被截断的内容

在线提问

overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap;

你不想换行css文字底部对齐，溢出时添加省略号，都可以。但忽略了它对于内联元素无效，所以添加一个display:块

13.避免不宜折叠的断线/不宜折叠的线条

首先，你必须了解 UI。分为三种情况：需要折叠的、不能折叠的、中间不能折断的。

大多数情况下，需要换行，并且不能失去内容的完整性，以保持UI美观。

平时使用overflow-wrap，尽量不要使用word-wrap（不符合CSS标准）：overflow-wrap：break-word用overflow-wrap，可以加连字符：auto（目前还不够兼容）

限制多行：-webkit-line-clamp: 3

线条不能被折断，比如标题/列头/按键等。开发时需要了解内容以及哪些元素不应该折叠。

overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap;

当表中的列太多（>5列）时，该列将被锁定。此时，th定义了white-space:nowrap来强制不进行行折叠

线路无法从中间中断的情况（如图）

14.避免滚动链问题

在浮层场景中，需要避免滚动链问题：子元素可以滚动，如果父元素也有滚动区域，在子元素上滚动时，触摸到顶部/底部后，会影响父元素的滚动。关闭浮层后，用户会发现页面已经滚动到了另一个位置。

优化前优化后

overscroll-behavior: contain;
overflow-y: auto;
overflow-x: hidden;

注意：防止同时水平/垂直滚动条兼容性：chrome63+/firefox59+/safari和edge不支持

15.避免图像变化

当图片放入特定比例的容器中时，固定宽高和最大宽高约束都可能导致图片变形。

.head img {
  width: 100%;
  height: 100%;
}

.head img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

在 Flexbox 容器内，图像高度将被手动拉伸。由于没有定义align-items，所以默认是stretch。

16.避免图片加载失败

需要考虑图片加载缓慢或者加载失败的情况。向图像容器添加边框或基色。

.head {
  background: #eee;
  box-shadow: inset 0 0 0 1px #aaa;
}

17.避免未引入CSS变量

在标准化开发中css文字底部对齐，我们提倡使用全局CSS变量。在业务代码中，也可以借助CSS变量方便地进行全局控制。使用CSS变量时添加默认值。

font-size: var(--tab-item-text-size-s, 12px);

18.避免CSS兼容性问题 19.Flexbox中常见的防御性书写

Flexbox有很多默认的性能，所以你不能简单地定义display:flex或flex:1。

Flexbox容器元素一般需要定义如下：支持多行（默认单行）、横轴垂直居中（默认拉伸）、主轴上使用space- Between、在相邻元素之间分配空闲空间。

display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

Flexbox的bag元素，不固定宽/高，更不指定比例的值。 Flexbox会手动拉伸/收缩bag元素以精确到浮点数，指定具体值会破坏原有的“弹性”。

Flexbox 的 bag 元素具有定义的宽度。

案例分析：

优化：

参考代码，总结用法：

.new-overview-v2-center-box .left .top {
  /* position: relative; */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  /* height: 100%; */
}

.new-overview-v2-center-box .left .top .item {
  /* width: 25%; */
  flex: 1;
  min-width: max-content;
  margin: 0 8px 8px 0;
}

20. Grid中常见的防御性写作

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 8px;
}

.item {
  border: 2px solid #aaa;
  box-sizing: border-box;
  min-height: 128px;
}