第二部分：前端开发项目中的常见CSS问题

100人浏览 2024-09-12 11:00:13

在第一部分中我们举例了7个前端开发项目中的常见CSS问题并提供参考方案，虽然有些并不是有最好的解决方案，但是从中我们依然学到更多的关于前端的技能。

下面是我们整理出第二部的css问题，顺序是从第一部分开始排序，所以下面我们是从第8个问题开始。

8.设置max-width图像

添加图像时，请定义max-width: 100%，以便在屏幕较小时调整图像大小。否则，浏览器将显示水平滚动条。

9.使用CSS网格定义main和aside元素

CSS网格可用于定义main和aside布局。

因此，该aside部分的高度将等于该main元素的高度，即使它是空的。

要解决此问题，请将aside元素与其父元素的开头对齐，以使其高度不会扩展。

10.添加fill到SVG

有时，在使用SVG时，fill如果在SVG中内联添加了属性，则无法按预期工作。

要解决此问题，要么fill从SVG本身删除属性，要么覆盖fill: color。

举个例子：

如果SVG具有内联填充，则无效。它应该是这样的：

11.使用伪元素

我喜欢随时使用伪元素，它们为我们提供了一种创建假元素的方法，主要用于装饰目的，而无需将它们添加到HTML中。

与他们合作时，我们可能会忘记执行以下操作之一：

在下面的示例中，我们有一个标题，徽章作为伪元素。

content: ""应该添加该属性。

此外，要素应display: inline-block以设置为width和height按预期运行。

12.使用时的奇怪空间 display: inline-block

将两个或多个元素设置为display: inline-block或display: inline，将在每个元素之间创建一个小空间。添加空间是因为浏览器将元素解释为单词，因此它在每个元素之间添加了一个字符空间。

在下面的示例中，每个项目8px在右侧都有一个空格，但是由于使用而产生的微小空display: inline-block正在形成12px，这不是我们所需的结果。

一个简单的解决方法是font-size: 0在父元素上设置。

13. for="ID"将标签元素分配给输入时添加

使用表单元素时，请确保所有label元素都分配了ID。这将使它们更易于访问，当它们被点击时，相关的输入将获得焦点。

14.不使用交互式HTML元素的字体

当指定字体到整个文档，它们将不被施加到元件，例如input，button，select和textarea。

默认情况下，它们不会继承，因为浏览器会将默认系统字体应用于它们。

要解决此问题，请手动分配font属性：

15.压缩或拉伸图像

在CSS中调整图像大小时，如果宽高比与图像的宽度和高度不一致，则可以对其进行压缩或拉伸。

解决方案很简单：使用CSS' object-fit。其功能类似于background-size: cover背景图像的功能。

img { object-fit: cover;}

object-fit在所有情况下使用都不是完美的解决方案，某些图像需要在不裁剪或调整大小的情况下显示，并且某些平台会强制用户以指定的大小上传或裁剪图像。例如，Dribbble接受800 x 600像素的缩略图上传。

16. RTL布局中的电话号码

添加电话号码（如+86-123555777从右到左布局）时，加号将位于号码的末尾。要解决此问题，请重新指定电话号码的方向。

p { direction: ltr;}

第一部分与（前一篇文章）这里提到的所有问题都是我们在前端开发工作中遇到的最常见的问题。

如果你也在前端开发中遇到其他常见问题可以留言我们一起谈论，或许能找到更好的解决方案。

相关推荐