CSS スタイルのリセットとクリア (異なるブラウザで同じ効果を表示するため)

CSS スタイルのリセットとクリア (異なるブラウザで同じ効果を表示するため)
異なるブラウザ間でページの表示を一致させるためには、フロントエンド開発において CSS スタイルのクリアとリセットが必須です。これまでの経験に基づいて、参考として CSS リセット スタイル コードをまとめました。

コードをコピー
コードは次のとおりです。

@文字セット "utf-8";
本文、h1、h2、h3、h4、h5、h6、hr、p、引用、pre、
dl、dt、dd、ul、ol、li、th、td、div、span、img、
fieldset、lengend、ボタン、入力、選択、テキストエリア{margin: 0;padding: 0;}
/* 色と背景 */
html{色:#000; 背景:#FFF;}
/* フォント */
body、button、input、select、textarea { /* ieの場合 */
フォント: 12px/18px Arial、Verdana、Microsoft YaHei;
}
/* 中心を固定 */
html、本文 {高さ: 100%;マージン: 0 auto;}
/* h1~h6 */
h1 {フォントサイズ: 18px;}
h2 {フォントサイズ: 16px;}
h3 {フォントサイズ: 14px;}
h4、h5、h6 {フォントサイズ: 100%;}
/* */
a { テキスト装飾: なし; }
a:hover { テキスト装飾: 下線; }
/* リスト */
ul,ol {リストスタイル: なし;}
/* 画像の境界線 */
フィールドセット、画像{境界線: 0}
/* テーブル */
テーブル {border-collapse: collapse;border-spacing: 0;font:inherit;}
/* マージン */
.alpha {左マージン: 0;}
.omega {マージン右: 0;}
/* フロートしてクリア */
.left{float:left;}
.right{float:right;}
.clear {clear: both;display: block;}
/* クリアフィックス */
.clearfix:after{content:".";display:block;}
.clearfix{display:inline-table;}
/* IE-mac から隠す */
* html .clearfix{高さ:1%;}
.clearfix{表示:ブロック;}
/* IE-mac からの非表示を終了 */
*+html .clearfix{min-height:1%;}/* IE7 */

<<:  HTML+CSS3+JSで実装されたドロップダウンメニュー

>>:  シャドウソックスを使用してLAN透過ゲートウェイを構築する

推薦する

MySQL で乱数を生成し、文字列を連結する方法の例

この記事では、MySQL が乱数を生成し、文字列を連結する方法について例を使用して説明します。ご参考...

Vue の計算プロパティ

目次1. 基本的な例2. 計算プロパティキャッシュとメソッド3. 計算プロパティセッター序文:通常、...

Linux に JDK1.8 をインストールするための詳細なチュートリアル

1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...

1つのSQL文でMySQLの重複排除が完了し、1つが保持されます。

数日前、ある要件に取り組んでいたとき、MySQL で重複レコードをクリーンアップする必要がありました...

Vmvare 仮想マシンを使用して Ubuntu のルート ディレクトリをパーティション分割する方法の紹介

目次序文根拠手順1. CDから仮想マシンを起動する2. GPartedツールを使用してパーティション...

Javascriptジェネレータの紹介と使用

ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。値を返した後、一時停止し、呼...

Vue diffアルゴリズムの完全な分析

目次序文Vue 更新ビューパッチ同じVノードパッチVノード更新子供序文Vue は仮想 DOM を使用...

JS における ES6 継承と ES5 継承の違い

目次継承ES5 プロトタイプ継承ES6 クラス継承両者の違いES5プロトタイプ継承の内部実装ES6 ...

docker ベースで Prometheus+Grafana を構築する手順の詳細説明

1. プロメテウスの紹介Prometheus は、もともと SoundCloud によって開発された...

VueのVuexの4つの補助機能について

目次1. 補助機能2. 例1. mapState と mapGetters 2. mapMutati...

MySQL FAQ シリーズ: ibdata1 ファイルのサイズが突然増加しないようにする方法

0. はじめにibdata1 ファイルとは何ですか? ibdata1 は、innodb システム テ...

JavaScript 組み込みの日付と時刻の書式設定のサンプル コード

1. 基礎知識(日付オブジェクトのメソッド) 😜 getFullYear() は年を表す4桁の数字を...

ウェブページの画像を素早く表示する方法とテクニック

1. .jpg ではなく .gif を使用します。GIF は JPG に比べてサイズが小さくなります...

HTML に FLASH へのリンクを追加し、すべての主要ブラウザと互換性を持たせる方法

まずコードを見てみましょうコードをコピーコードは次のとおりです。 <div style=&qu...

JavaScript フレームワーク デザイン パターンの詳細な説明

目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...