はじめに: すべてのブラウザには、「ユーザー エージェント スタイル シート」と呼ばれる、すべてのページに適用されるデフォルトのスタイルが付属しています。 (以下の場合ははしごが必要です) 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 ポートに基づいて仮想ホストを作成する例
達成される効果は次のとおりです。 マウスがボタン内に移動すると、ネオンライトのような効果が生成され、...
目次1. インストールパッケージ(64ビット)をダウンロードする2. MySQLデータベースをインス...
目次1. 参照と反応1. 反応的2.参照2. shallowRef と shallowReactiv...
1. 元のmariadbを削除します。削除しないとmysqlをインストールできません。 mariad...
目次序文【ログ取り消し】 【REDOログ】 【バイナリログ】要約する序文MySQL には、REDO ...
Alibaba ベクターアイコンライブラリにアクセスAlibaba ベクターアイコンライブラリ好き...
目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...
1. 背景Netplan は、Ubuntu システムのネットワーク設定を簡単に管理および構成できるよ...
SFTPの概念sftp は、安全なファイル転送プロトコルである Secure File Transf...
環境ホストIP 192.168.0.9 Docker バージョン 19.03.2 docker-co...
効果は以下のとおりです。ページジャンプボタンをクリックした後 対応する値はページ b で取得できます...
目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...
目次序文配列.isArrayコンストラクタインスタンスプロトタイプオブジェクト.プロトタイプ.toS...
開発の過程では、インスタンスの vm.$refs(this.$refs) を使用して、ref で登録...
Windows と Linux 間でファイルを転送する場合は、Xftp ツールを使用できます。この...