はじめに: すべてのブラウザには、「ユーザー エージェント スタイル シート」と呼ばれる、すべてのページに適用されるデフォルトのスタイルが付属しています。 (以下の場合ははしごが必要です) Chromium UA スタイルシート - Google Chrome と Opera Mozilla UA スタイルシート - firefox WebKit UA スタイルシート - Safari ほとんどは同じですが、検索入力ボックスなど一貫性のないスタイルも多数あります。 そのため、CSS 処理をリセットし、異なるブラウザ間の違いを統一し、チームが開発した初期標準を確認し、ブラウザの「欠点」を補う必要があります。 html{ /* 標準フォント サイズは問題ありませんが、モバイル デバイスで rem を使用すると動的に変更されます。 */ フォントサイズ:14px; /* IE ボックス モデルを使用します (個人的な選択ですが、通常はパディングと境界線を含めたボックスの実際のサイズに幅を設定します) */ ボックスのサイズ: 境界線ボックス; } html,本文{ /* 一部のモバイルブラウザでは、リンクまたはクリック可能な要素をクリックすると、半透明の灰色の背景が表示されます。 */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* モバイルデバイスでのスクロールエクスペリエンスを向上*/ -webkit-オーバーフロースクロール: タッチ; オーバーフロースクロール: タッチ; /* ブラウザウィンドウと同じ高さ*/ 高さ: 100%; } 体{ /* 一部の背景はデフォルトで薄い灰色なので、すべて純白に設定されています*/ 背景: #fff; /* antd によると、社内では Microsoft YaHei を使用しないでください。rem フォントの使用は推奨されません。 */ フォント:14px、-apple-system、BlinkMacSystemFont、'Segoe UI'、'PingFang SC'、'Hiragino Sans GB'、'Microsoft YaHei'、 「Helvetica Neue」、Helvetica、Arial、サンセリフ、「Apple Color Emoji」、「Segoe UI Emoji」、「Segoe UI Symbol」 /* フォントを滑らかにする */ -webkit-font-smoothing: アンチエイリアス; -moz-osx-font-smoothing: グレースケール; } ブラウザのデフォルトのマージンとパディングを削除し、不要なタグを自分で削除します 体、 p、 h1, h2, h3, h4, h5, h6, dl、 dd、 ウル、 オール、 番目、 td、 ボタン、 形、 入力、 テキストエリア、 形状、 前、 引用ブロック、 形{ マージン: 0; パディング: 0; } { /* 小さな手 */ カーソル: ポインタ; /* ハイパーリンクのデフォルトの下線を解除します */ テキスト装飾:なし; /* これは antd でも行われますが、チームがこのスタイルを必要とするかどうかによって異なります */ 遷移: カラー 0.3 秒の緩和; } オール、 ul{ /* 醜いスタイルを削除します。 */ リストスタイル:なし } これらのノードの一部のプロパティは親ノードのスタイルを継承しないため、すべてがそれを継承し、アウトライン効果をキャンセルします。 、 h1, h2, h3, h4, h5, h6, 入力、 選択、 ボタン、 テキストエリア { フォントファミリー: 継承; フォントサイズ: 継承; フォントの太さ: 継承; フォントスタイル: 継承; 行の高さ: 継承; 色: 継承; アウトライン: なし; } ボタン、 入力[type='送信'], 入力[type='ボタン'] { /*クリック可能な手*/ カーソル: ポインタ; } /* 一部のブラウザの数値入力コントロールの表示をキャンセルすると、コントロールの外観が変わる場合があります。 */ 入力[タイプ='数値'] { -moz-appearance:テキストフィールド; } 入力[タイプ=数値]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { マージン: 0; -webkit-appearance: なし; } /** * Firefox で内側の境界線とパディングを削除します。 */ ボタン::-moz-focus-inner、 [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { 境界線スタイル: なし; パディング: 0; } /** * HTML5 の非表示を IE10 で正しく表示するようにする*/ [隠れた] 表示: なし; } テンプレート { /* 一部のブラウザではテンプレートが表示されますが、テンプレートタグはほとんど使用されないので、自分で選択できます。 */ 表示: なし; } CSS リセットアドレス 今後もさらに追加していきますので、ぜひご参加ください。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
>>: Apache ポートに基づいて仮想ホストを作成する例
前回の記事では、MySQL 最適化の概要 - クエリの合計数を紹介しました。この記事では、クエリ ス...
場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...
1. Vueルーティングの権限制御には一般的に2つの方法がありますa. ルーティングメタ情報(メタ)...
アプリケーションシナリオバックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があ...
MySQL データベースの増分バックアップを実行するには、データベース構成ファイル /etc/my....
最近、CSS3 と js の組み合わせを作成したのですが、z-index が有効にならないケースが多...
通常、デッドロックが発生すると、重みが最も小さい接続が強制終了され、ロールバックされます。ただし、最...
この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...
多くのネットユーザーは、なぜ自分のウェブサイトはいつも色の問題を抱えていて、いつも地味に見え、注目を...
目次概要静的型チェックコードスタイルチェック(Linter)パッケージマネージャーモジュールローダー...
Web 上でフォントを使用することは、基本的なスキルであると同時に芸術でもあります。英語のフォントに...
目次FastDFSについて1. 画像を検索する2. イメージをインストールする3.1. 必要なディレ...
1.テーブル全体を更新します。データ行の列の値が空の場合は、別の列フィールドの値と同じにします。 ...
CentOS 8 に Jenkins をインストールするには、root アカウントまたは sudo ...
HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合1. ...