開発スキルを迅速に向上させるための 20 の CSS ヒント

この記事では、開発スキルを短期間で向上させるための 20 の CSS ヒントを紹介します。ぜひ集めてください。皆さんのお役に立てれば幸いです。

フレックスボックス コンテンツのラッピング

フレックスボックス レイアウトを使用する場合、デフォルトでは、コンテナの幅が十分でない場合、これが発生する可能性があります。起こります。

これは主に、flex-wrap のデフォルト値が nowrap であるため、次のように値を変更する必要があるためです。 。

.options-list {
  display: flex;
  flex-wrap: wrap;
}

間隔

提供されたデザイン ドラフトでは、デザイナーはテキストとその下にある他の要素との関係を無視しがちです。極端な状況では、文字とアイコンの間隔が近くなってしまう場合があります。

この状況に対処するには、テキスト部分にあるのかアイコン部分にあるのかを考慮し、margin 値を追加して増やすことを選択する必要があります。実際の状況を分析して間隔を設定します。

.section__title {
  margin-right: 1rem;
}

しかし、この場合、私は通常、アイコンに margin-left を追加することを検討します。この場合、テキストは、アイコンがあるときに引き続き使用できます。はアイコンがありません。コンテナの端まで押します。

長いテキスト コンテンツ

これは簡単です。長すぎるテキストに対処する方法です。通常、行は折り返されるか切り詰められ、の形...どの方法を選択するかについては、現在のページ モジュールのデザイン スタイルによって異なります。

この記事での処理方法は、切り詰めることです...これ。

.username {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

画像が引き伸ばされたり圧縮されたりしないようにする この状況は通常、画像がユーザーによってアップロードされた場合、または画像が指定された割合で使用されていない場合に発生します。

これを処理する方法は、object-fit 属性を直接使用することです:

.card__thumb {
  object-fit: cover;
}

ロック スクロール リンク

主な状況は、ページ上でモーダル ポップアップ レイヤーがクリックされ、ページ コンテンツ自体が非常に長い場合です。

.modal__content {
  overscroll-behavior-y: contain;
  overflow-y: auto;
}

overscroll-behavior それは良いことですが、現在、互換性に大きな問題があります。

CSS 変数フォールバック

この CSS 変数フォールバックは、率直に言えば、値が無効な場合に実際に CSS 変数を使用します。 「安全な値」は、特定の属性値が引き続き使用可能であることを保証します。

.message__bubble {
  max-width: calc(100% - var(--actions-width, 70px));
}

ただし、フロントエンド ページを作成するときの前述の処理方法と組み合わせて、ブラウザの var() との互換性の問題も考慮すると、追加の属性が追加されます。ただし、現在のブラウザから判断すると、この問題は普遍的に存在するわけではないようです。

.message__bubble {
  max-width: 70px;
  max-width: var(--actions-width, 70px);
}

固定幅または高さを使用する

これについては特に言うことはありません。主に、コンテンツが長すぎてコンテナーからはみ出した場合の保護手段です。たとえば、高さを 350px に固定すると、長すぎるとコンテンツがオーバーフローします。

そして、height を min-height に置き換えると、状況は異なります。

同様に、幅にも同じことが当てはまります。

無視されるbackground-repeat

背景画像を使用する場合、no-repeatが追加されていない場合、デフォルトで背景が使用されます。画像は平らに広げたものです。

したがって、背景画像を並べて表示する必要があるかどうかがわからない場合は、no-repeat を気軽に追加するのが良い習慣です。

.hero {
  background-image: url('..');
  background-repeat: no-repeat;
}

垂直メディアクエリ このシーンは、Xiaozhi のページでは今のところ見られていませんが、通常は、作成者が提供するページ効果など、中間ページとバックエンド ページでよく見られます。

左下角是通过 position: sticky; 定位的，可能通过 fixed 定位也是一样吧，然后当浏览器的高度变小的时候，就会叠在左侧的导航上面。

显然，这样的页面效果就不对了。而如果这个时候，通过 @media 方式判断页面高度，在某个安全区外我们才让左下角这部分通过 sticky 来定位。

@media (min-height: 600px) {
  .aside__secondary {
    position: sticky;
    bottom: 0;
  }
}

使用 justify-content: space-between

原文中这部分标题是 Using Justify-Content: Space-Between，但看起来更应该是 Using gap。使用什么标题不是关键，这部分主要是提到当使用 justify-content: space-between; 时，如果元素不够，元素与元素之间的间距就会拉长，因为要平均分布元素之间的间距。

比如原本是想要这样的一个效果，间距的值是固定的：

在元素数量足够的情况下，元素与元素之间的间距还是比较理想的，通过下面这个 CSS 处理方式：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

但，元素的数量总是会不足的时候，那么就会这样了。

可见，其实并不是想要平均分布，而只是想要在最大的极限情况下和内容不足的时候，元素之间的间距是可控的。一般来说，这个处理方式挺多的，用 margin 之类的也是可以处理，不过目前有一个兼容性并不是十分好的 gap 能完美解决这个问题。

.wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

图片上的文字 用户体验上的一个细节处理问题，如果在图片上有文案，但图片没加载出来，或者加载失败的时候，添加一个背景色，以保证图片加载失败的情况下，文字与背景能区分开。

使用 CSS 网格中的固定值需注意 grid 网格布局现在开始慢慢被关注了，grid 与 flex 一样都可以做自适应的效果，也可以使用固定值的情况。在使用固定值的时候，最好是通过 @media 判断一下宽度，以便于满足最小宽度时的处理。

@media (min-width: 600px) {
  .wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1rem;
  }
}

不过一般这种情况下，可能就直接改变页面布局了，感觉作者在这个方面上担忧是多余的。或者主要是自己未遇到过他所遇到的场景吧。

仅在需要时显示滚动条

这个没啥说的，一般大家都是把 scroll 设置为 auto。不过在个别情况下，可能这个 auto 会让元素的宽度变小，然后导致内容或者布局出现一点小瑕疵。

.element {
  overflow-y: auto;
}

滚动条装订线

这个所谓的装订线，主要就是 scrollbar-gutter 属性，保留滚动条的空间。在上面那个 overflow 例子中提到，如果设置为 auto 的时候，可能会导致页面布局出现非意料的情况，那么 scrollbar-gutter 就可以处理这个问题了。

兼容性还是一个不可避免的话题。

假设不考虑兼容性的问题，那么我们就可以使用这个方法保留滚动条的空间。

.element {
  scrollbar-gutter: stable;
}

CSS flexbox 中的最小内容大小

在使用 flex 布局的时候，很有可能其中某个 item 的文本内容很长，最终导致没有换行而溢出容器之外。

这种情况也并不是说没有可能，就算是使用 overflow-wrap: break-word; 也不会有效果，那么这个时候需要加上 min-width: 0; 来处理。

.card__title {
  overflow-wrap: break-word;
  min-width: 0;
}

CSS 网格中的最小内容大小

与 flexbox 类似，CSS 网格的子项有一个默认的最小内容大小，即 auto，这意味着，如果存在大于网格项的元素，它将溢出。

@media (min-width: 1020px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 248px;
    grid-gap: 40px;
  }
}

.carousel {
  display: flex;
  overflow-x: auto;
}

对于网格这块，了解的不够深入，直接延用作者的意思就是将 grid-template-columns 的值改变一下，改为：minmax(0, 1fr) 248px 就可以得到下面这个效果。

自动适合与自动填充

当时看到效果图的时候，我还以为是 flex 布局中的情况，结果是 grid 网格布局中使用的情况。

在使用 grid 布局时，如果是这样写，利用 auto-fit 的话，就会是上面这个效果，item 不够时会被拉长。

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1rem;
}

而如果改为 auto-fill 的话就是下面这个效果。

对于 auto-fit 和 auto-fill 的区别可以看这张图。

图片最大宽度

作者建议可以在 reset 部分中对 img 加上最大宽度的设置，但没说具体是为什么。个人猜想是考虑图片在容器中的展示吧，同时还有一个 object-fit 属性。

img {
  max-width: 100%;
  object-fit: cover;
}

位置：粘性css网格

在使用 CSS 网格布局时，如果子元素使用了 position: sticky 的话，由于网格子元素的默认对齐方式是 stretch，所以会被拉伸。

而其实我们想要的是，左侧边栏并非拉伸效果的，所以，需要通过 align-self: start; 改变一下子元素自身的对齐方式。

aside {
  align-self: start;
  position: sticky;
  top: 1rem;
}

这样的话，效果就不一样了。

简单测试了一下，在 flex 布局中也是同样的情况，主要就是因为子元素的特性是拉伸的。

分组选择器

/* Don't do this, please */
input::-webkit-input-placeholder,
input:-moz-placeholder {
  color: #222;
}

现在写 CSS 的时候基本上都不会去写带前缀的属性，而是通过构建工具来自动完成。所以平时也不会在意这个。按照作者的说法是，如果把这两个写在一起，会导致整个规则失效，建议分开写。

input::-webkit-input-placeholder {
  color: #222;
}

input:-moz-placeholder {
  color: #222;
}

最后

以上内容看着其实都是挺简单，挺初级的内容，但是在日常开发过程中，对于 CSS 的注意的确有一些还是不够到位。毕竟有一些内容过于细节了。

（学习视频分享：css视频教程）

以上が開発スキルを迅速に向上させるための 20 の CSS ヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。