CSS で遭遇する落とし穴 - ブラウザのデフォルトのスタイル設定

今日は

タグを使用した CSS スタイルを自分で書き、一連の効果を設定した後、それを実行したところ、位置が設定と異なることがわかりました。 Chrome でチェック項目を開くと、
タグのスタイルの下部に次の段落が追加されていることを確認します:

ul, menu, dir {

display: block;

list-style-type:ディスク;

-webkit-margin-before: 1em;

-webkit-margin-after: 1em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

-webkit -padding-start: 40px;

}

の横に表示されているソースは、ユーザーエージェントスタイルシート

htmlとcssを確認したところ、特別な設定はなく、標準の設定も行われています。 htmlヘッダー。 Baidu で「ユーザー エージェント スタイルシート」を検索したところ、ブラウザにはさまざまな HTML 要素に対応する CSS のデフォルト設定があることがわかりました。

解決策:

1. 比較的単純な方法: *{margin:0px;padding:0px;} などのワイルドカード スタイルをブラウザのデフォルト設定を上書きします。より複雑な方法: いくつかの一般的なブラウザのデフォルト設定を理解してから、別の CSS ファイルを作成し、そのファイルに修正が必要なすべてのスタイルを記述します。これにより、将来プロジェクトを実行するときに共有できるようになります。

今後、この問題についてさらに詳しく知る時間ができたら、さらに追加します。

CSS - ブラウザーのデフォルトのスタイル設定で遭遇するその他の落とし穴については、PHP 中国語 Web サイトの関連記事に注目してください。