これらの19のCSSスキルを最初に習得して、いくつかの難病を解決します

著者：Matt Maribojoc
翻訳者：フロントエンド
Xiaozhi出典：stackabuse

Vue3ソースコードは実際に公開されています。インタビューで、Vueソースコードについて尋ねられることを恐れている場合、または独自のVueソースコードを介してインタビュアーに見せたい場合は、それについて学ぶことができます。

プレースホルダースタイルの変更、複数行のテキストオーバーフロー、スクロールバーの非表示、カーソルの色の変更、水平方向と垂直方向の中央揃え。これらのおなじみのシナリオ！フロントエンド開発者はほぼ毎日それらに対処します。ここに20のCSSトリックがあります。見てみましょう。

1.img5px間隔の問題を解決します

5p画像の下部に余分なx間隔の問題が頻繁に発生しますか？心配しないでください。これを修正する4つの方法があります。

オプション1：親要素のフォントサイズを0に設定します

キーコード：

.img-container{
  font-size: 0;
}

ケースアドレス：https：//codepen.io/qianlong/pen/VwrzoyE

シナリオ2：img要素をに設定しますdisplay: block

キーコード：

img{
  display: block;
}

ケースアドレス：https：//codepen.io/qianlong/pen/eYeGONM

シナリオ3：img要素をに設定しますvertical-align: bottom

キーコード：

img{
  vertical-align: bottom;
}

ケースアドレス：https：//codepen.io/qianlong/pen/jOaGNWw

解決策4：親要素を設定するline-height: 5px

キーコード：

.img-container{
  line-height: 5px;
}

ケースアドレス：https：//codepen.io/qianlong/pen/PoOJYzN

2.要素の高さはウィンドウの高さと同じです

要素をウィンドウと同じ高さにするにはどうすればよいですか？を使用して答えるheight: 100vh;

ケースアドレス：https：//codepen.io/qianlong/pen/xxPXKXe

3.入力プレースホルダースタイルを変更します

キーコード：

.placehoder-custom::-webkit-input-placeholder {
  color: #babbc1;
  font-size: 12px;
}

ケースアドレス：https：//codepen.io/qianlong/pen/JjOrPOq

4.`:not`セレクター

最後の要素を除くすべての要素には、notセレクター。

下の画像に示すように、最後の要素には下端がありません。

キーコード

li:not(:last-child) {
  border-bottom: 1px solid #ebedf0;
}

ケースアドレス：https：//codepen.io/qianlong/pen/QWOqLQO

5.フレックスレイアウトを使用して、要素を下部にインテリジェントに固定します

十分なコンテンツがない場合、ボタンはページの下部にあるはずです。十分なコンテンツがある場合、ボタンはコンテンツの後に続く必要があります。同様の問題が発生した場合は、を使用してスマートレイアウトflexを実現します。

ケースアドレス：https：//codepen.io/qianlong/pen/ZEaXzxM

6.カーソルの色`caret-color`を変更するために使用します

caret-color次のようにカーソルの色を変更できます。

caret-color: #ffd476;

ケースアドレス：https：//codepen.io/qianlong/pen/YzErKvy

7.`type="number"`末尾

デフォルトでtype="number"は、最後に小さな矢印が表示されますが、削除する必要がある場合もあります。私たちは何をすべき？

キーコード：

.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

ケースアドレス：https：//codepen.io/qianlong/pen/OJOxLrg

8.`outline:none`入力ステータス行を削除します

入力ボックスを選択すると、デフォルトで青いステータスラインが表示されます。これは、を使用して削除できoutline: noneます。

次の図に示すように、2番目の入力ボックスは削除され、最初の入力ボックスは削除されません。

イベントアドレス：https：//codepen.io/qianlong/pen/YzErzKG

9.iOSスクロールバーが動かなくなる問題を解決します

iPhoneでは、スクロール中に要素が動かなくなることがよくあります。この場合、次のCSSを使用してエラスティックスクロールをサポートできます。

body,html{
  -webkit-overflow-scrolling: touch;
}

10.三角形を描きます

.box {
  padding: 15px;
  background-color: #f5f6f9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.triangle {
  display: inline-block;
  margin-right: 10px;
  /* Base Style */
  border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
  border-top-color: #0097a7;
}
/*上*/
.triangle.top {
  border-bottom-color: #b2ebf2;
}
/*左*/
.triangle.left {
  border-right-color: #00bcd4;
}
/*右*/
.triangle.right {
  border-left-color: #009688;
}

ケースアドレス：https：//codepen.io/qianlong/pen/rNYGNRe

11.小さな矢印を描き、

キーコード：

.box {
  padding: 15px;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow {
  display: inline-block;
  margin-right: 10px;
  width: 0;
  height: 0;
  /* Base Style */
  border: 16px solid;
  border-color: transparent #cddc39 transparent transparent;
  position: relative;
}

.arrow::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -16px;
  border: 16px solid;
  border-color: transparent #fff transparent transparent;
}
/*下*/
.arrow.bottom {
  transform: rotate(270deg);
}
/*上*/
.arrow.top {
  transform: rotate(90deg);
}
/*左*/
.arrow.left {
  transform: rotate(180deg);
}
/*右*/
.arrow.right {
  transform: rotate(0deg);
}

ケースアドレス：https：//codepen.io/qianlong/pen/ZEaXEEP

12.画像フィットウィンドウサイズ

ケースアドレス：https：//codepen.io/qianlong/pen/PoOJoPO

13.スクロールバーを非表示にする

最初のスクロールバーが表示され、2番目のスクロールバーが非表示になります。つまり、コンテナはスクロールできますが、スクロールバーは透明であるかのように非表示になります。

キーコード：

.box-hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

ケースアドレス：https：//codepen.io/qianlong/pen/yLPzLeZ

14.選択したテキストスタイルをカスタマイズします

キーコード：

.box-custom::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

ケースアドレス：https：//codepen.io/qianlong/pen/jOaGOVQ

15.テキストの選択は許可されていません

キーコード：

.box p:last-child {
  user-select: none;
}

ケースアドレス：https：//codepen.io/qianlong/pen/rNYGNyB

16.要素を水平方向および垂直方向に中央揃えします

キーコード：

display: flex;
align-items: center;
justify-content: center;

ケースアドレス：https：//codepen.io/qianlong/pen/VwrMwWb

17.1行のテキストがオーバーフローしたときに省略記号を表示する

キーコード：

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 375px;

ケースアドレス：https：//codepen.io/qianlong/pen/vYWeYJJ

18.複数行のテキストがオーバーフローしたときに省略記号を表示する

キーコード：

  overflow: hidden;
  text-overflow: ellipsis;

  display: -webkit-box;
  /* set n lines, including 1 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

ケースアドレス：https：//codepen.io/qianlong/pen/ZEaXEJg

19.「filter：grayscale（1）」を使用して、ページをグレーモードにします。

キーコード：

body{
  filter: grayscale(1);
}

コードのデプロイ後に存在する可能性のあるバグをリアルタイムで知ることはできません。これらのバグを後で解決するために、ログのデバッグに多くの時間が費やされます。ちなみに、便利なバグ監視ツールであるFundebugをお勧めします。

オリジナル：https：//javascript.plainenglish.io/20-css-tips-and-tricks-to-make-you-a-better-developer-d80ae5c09617

と通信する

夢や乾物があれば、 WeChatで[Great Move to the World]を検索して、朝の早い時間にまだ皿洗いをしているこのShawanzhiに注目してください。

この記事はGitHubhttps://github.com/qq449245884/xiaozhiに含まれており、一次メーカーへのインタビュー用の完全なテストサイト、資料、および一連の記事があります。

ここに画像の説明を挿入