1. pc-reset PCスタイルの初期化 /* 正規化.css */ html{ 行の高さ: 1.15; /* 1 */ -ms-テキストサイズ調整: 100%; /* 2 */ -webkit-テキストサイズ調整: 100%; /* 2 */ } 体 { マージン: 0; } 記事、 さて、 フッター、 ヘッダ、 ナビ、 セクション { 表示: ブロック; } h1 { フォントサイズ: 2em; マージン: 0.67em 0; } 図キャプション、 形、 主要 { /* 1 */ 表示: ブロック; } 形 { マージン: 1em 40px; } 時間 { ボックスのサイズ: コンテンツボックス; /* 1 */ 高さ: 0; /* 1 */ オーバーフロー: 表示可能; /* 2 */ } 前 { フォントファミリー: monospace、monospace; /* 1 */ フォントサイズ: 1em; /* 2 */ } { 背景色: 透明; /* 1 */ -webkit-text-decoration-skip: オブジェクト; /* 2 */ } abbr[タイトル] { 下部境界線: なし; /* 1 */ テキスト装飾: 下線; /* 2 */ テキスト装飾: 下線点線; /* 2 */ } b、 強い { フォントの太さ: 継承; } b、 強い { フォントの太さ: 太字; } コード、 KB, サンプル { フォントファミリー: monospace、monospace; /* 1 */ フォントサイズ: 1em; /* 2 */ } dfn { フォントスタイル: 斜体; } マーク { 背景色: #ff0; 色: #000; } 小さい フォントサイズ: 80%; } サブ、 すする { フォントサイズ: 75%; 行の高さ: 0; 位置: 相対的; 垂直位置合わせ: ベースライン; } サブ{ 下: -0.25em; } すする { 上: -0.5em; } オーディオ、 ビデオ 表示: インラインブロック; } オーディオ:not([コントロール]) { 表示: なし; 高さ: 0; } 画像 { 境界線スタイル: なし; } svg:not(:root) { オーバーフロー: 非表示; } ボタン、 入力、 optgroup、 選択、 テキストエリア { フォントファミリー: サンセリフ; /* 1 */ フォントサイズ: 100%; /* 1 */ 行の高さ: 1.15; /* 1 */ マージン: 0; /* 2 */ } ボタン、 入力{ /* 1 */ オーバーフロー: 表示可能; } ボタン、 選択{ /* 1 */ テキスト変換: なし; } ボタン、 html [type="button"], /* 1 */ [タイプ="リセット"], [type="submit"] { -webkit-appearance: ボタン; /* 2 */ } ボタン::-moz-focus-inner、 [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { 境界線スタイル: なし; パディング: 0; } ボタン:-moz-フォーカスリング、 [type="button"]:-moz-フォーカスリング, [type="reset"]:-moz-フォーカスリング, [type="submit"]:-moz-focusring { アウトライン: 1px の点線の ButtonText; } フィールドセット { パディング: 0.35em 0.75em 0.625em; } 伝説 ボックスのサイズ: 境界線ボックス; /* 1 */ 色: 継承; /* 2 */ 表示: テーブル; /* 1 */ 最大幅: 100%; /* 1 */ パディング: 0; /* 3 */ 空白: 通常; /* 1 */ } 進捗 表示: インラインブロック; /* 1 */ 垂直位置合わせ: ベースライン; /* 2 */ } テキストエリア { オーバーフロー:自動; } [type="チェックボックス"], [タイプ=ラジオ] ボックスのサイズ: 境界線ボックス; /* 1 */ パディング: 0; /* 2 */ } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { 高さ: 自動; } [タイプ="検索"] -webkit-appearance: テキストフィールド; /* 1 */ アウトラインオフセット: -2px; /* 2 */ } [type="search"]::-webkit-search-cancel-button、 [type="search"]::-webkit-search-decoration { -webkit-appearance: なし; } ::-webkit-ファイルアップロードボタン { -webkit-appearance: ボタン; /* 1 */ フォント: 継承; /* 2 */ } 詳細、 /* 1 */ メニュー { 表示: ブロック; } まとめ { 表示: リスト項目; } キャンバス { 表示: インラインブロック; } テンプレート { 表示: なし; } [隠れた] 表示: なし; } /* リセット */ html, 体、 h1, h2, h3, h4, h5, h6, div、 dl、 dt、 dd、 ウル、 オール、 李、 p、 引用ブロック、 前、 時間、 形、 テーブル、 キャプション、 番目、 td、 形状、 フィールドセット、 伝説、 入力、 ボタン、 テキストエリア、 メニュー { マージン: 0; パディング: 0; ボックスのサイズ: 境界線ボックス; } 2. 電話のリセット /* 正規化.css */ html{ 行の高さ: 1.15; /* 1 */ -ms-テキストサイズ調整: 100%; /* 2 */ -webkit-テキストサイズ調整: 100%; /* 2 */ } 体 { マージン: 0; } 記事、 さて、 フッター、 ヘッダ、 ナビ、 セクション { 表示: ブロック; } h1 { フォントサイズ: 2em; マージン: 0.67em 0; } 図キャプション、 形、 主要 { /* 1 */ 表示: ブロック; } 形 { マージン: 1em 40px; } 時間 { ボックスのサイズ: コンテンツボックス; /* 1 */ 高さ: 0; /* 1 */ オーバーフロー: 表示可能; /* 2 */ } 前 { フォントファミリー: monospace、monospace; /* 1 */ フォントサイズ: 1em; /* 2 */ } { 背景色: 透明; /* 1 */ -webkit-text-decoration-skip: オブジェクト; /* 2 */ } abbr[タイトル] { 下部境界線: なし; /* 1 */ テキスト装飾: 下線; /* 2 */ テキスト装飾: 下線点線; /* 2 */ } b、 強い { フォントの太さ: 継承; } b、 強い { フォントの太さ: 太字; } コード、 KB, サンプル { フォントファミリー: monospace、monospace; /* 1 */ フォントサイズ: 1em; /* 2 */ } dfn { フォントスタイル: 斜体; } マーク { 背景色: #ff0; 色: #000; } 小さい フォントサイズ: 80%; } サブ、 すする { フォントサイズ: 75%; 行の高さ: 0; 位置: 相対的; 垂直位置合わせ: ベースライン; } サブ{ 下: -0.25em; } すする { 上: -0.5em; } オーディオ、 ビデオ 表示: インラインブロック; } オーディオ:not([コントロール]) { 表示: なし; 高さ: 0; } 画像 { 境界線スタイル: なし; } svg:not(:root) { オーバーフロー: 非表示; } ボタン、 入力、 optgroup、 選択、 テキストエリア { フォントファミリー: サンセリフ; /* 1 */ フォントサイズ: 100%; /* 1 */ 行の高さ: 1.15; /* 1 */ マージン: 0; /* 2 */ } ボタン、 入力{ /* 1 */ オーバーフロー: 表示可能; } ボタン、 選択{ /* 1 */ テキスト変換: なし; } ボタン、 html [type="button"], /* 1 */ [タイプ="リセット"], [type="submit"] { -webkit-appearance: ボタン; /* 2 */ } ボタン::-moz-focus-inner、 [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { 境界線スタイル: なし; パディング: 0; } ボタン:-moz-フォーカスリング、 [type="button"]:-moz-フォーカスリング, [type="reset"]:-moz-フォーカスリング, [type="submit"]:-moz-focusring { アウトライン: 1px の点線の ButtonText; } フィールドセット { パディング: 0.35em 0.75em 0.625em; } 伝説 ボックスのサイズ: 境界線ボックス; /* 1 */ 色: 継承; /* 2 */ 表示: テーブル; /* 1 */ 最大幅: 100%; /* 1 */ パディング: 0; /* 3 */ 空白: 通常; /* 1 */ } 進捗 表示: インラインブロック; /* 1 */ 垂直位置合わせ: ベースライン; /* 2 */ } テキストエリア { オーバーフロー:自動; } [type="チェックボックス"], [タイプ=ラジオ] ボックスのサイズ: 境界線ボックス; /* 1 */ パディング: 0; /* 2 */ } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { 高さ: 自動; } [タイプ="検索"] -webkit-appearance: テキストフィールド; /* 1 */ アウトラインオフセット: -2px; /* 2 */ } [type="search"]::-webkit-search-cancel-button、 [type="search"]::-webkit-search-decoration { -webkit-appearance: なし; } ::-webkit-ファイルアップロードボタン { -webkit-appearance: ボタン; /* 1 */ フォント: 継承; /* 2 */ } 詳細、 /* 1 */ メニュー { 表示: ブロック; } まとめ { 表示: リスト項目; } キャンバス { 表示: インラインブロック; } テンプレート { 表示: なし; } [隠れた] 表示: なし; } /* リセット */ html, 体、 h1, h2, h3, h4, h5, h6, div、 dl、 dt、 dd、 ウル、 オール、 李、 p、 引用ブロック、 前、 時間、 形、 テーブル、 キャプション、 番目、 td、 形状、 フィールドセット、 伝説、 入力、 ボタン、 テキストエリア、 メニュー { マージン: 0; パディング: 0; ボックスのサイズ: 境界線ボックス; } html, 体 { /* テキスト選択を無効にする */ -webkit-user-select: なし; ユーザー選択: なし; フォント: Oswald、'Open Sans'、Helvetica、Arial、サンセリフ } /* リンクや画像を長押ししてメニューをポップアップするのを無効にする*/ 、 画像 { -webkit-touch-callout: なし; } /*iOS Android は組み込みのシャドウのスタイルを削除します*/ 、 入力{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 入力[type="text"] { -webkit-appearance: なし; } 2. 電話のリセット /* 正規化.css */ html{ 行の高さ: 1.15; /* 1 */ -ms-テキストサイズ調整: 100%; /* 2 */ -webkit-テキストサイズ調整: 100%; /* 2 */ } 体 { マージン: 0; } 記事、 さて、 フッター、 ヘッダ、 ナビ、 セクション { 表示: ブロック; } h1 { フォントサイズ: 2em; マージン: 0.67em 0; } 図キャプション、 形、 主要 { /* 1 */ 表示: ブロック; } 形 { マージン: 1em 40px; } 時間 { ボックスのサイズ: コンテンツボックス; /* 1 */ 高さ: 0; /* 1 */ オーバーフロー: 表示可能; /* 2 */ } 前 { フォントファミリー: monospace、monospace; /* 1 */ フォントサイズ: 1em; /* 2 */ } { 背景色: 透明; /* 1 */ -webkit-text-decoration-skip: オブジェクト; /* 2 */ } abbr[タイトル] { 下部境界線: なし; /* 1 */ テキスト装飾: 下線; /* 2 */ テキスト装飾: 下線点線; /* 2 */ } b、 強い { フォントの太さ: 継承; } b、 強い { フォントの太さ: 太字; } コード、 KB, サンプル { フォントファミリー: monospace、monospace; /* 1 */ フォントサイズ: 1em; /* 2 */ } dfn { フォントスタイル: 斜体; } マーク { 背景色: #ff0; 色: #000; } 小さい フォントサイズ: 80%; } サブ、 すする { フォントサイズ: 75%; 行の高さ: 0; 位置: 相対的; 垂直位置合わせ: ベースライン; } サブ{ 下: -0.25em; } すする { 上: -0.5em; } オーディオ、 ビデオ 表示: インラインブロック; } オーディオ:not([コントロール]) { 表示: なし; 高さ: 0; } 画像 { 境界線スタイル: なし; } svg:not(:root) { オーバーフロー: 非表示; } ボタン、 入力、 optgroup、 選択、 テキストエリア { フォントファミリー: サンセリフ; /* 1 */ フォントサイズ: 100%; /* 1 */ 行の高さ: 1.15; /* 1 */ マージン: 0; /* 2 */ } ボタン、 入力{ /* 1 */ オーバーフロー: 表示可能; } ボタン、 選択{ /* 1 */ テキスト変換: なし; } ボタン、 html [type="button"], /* 1 */ [タイプ="リセット"], [type="submit"] { -webkit-appearance: ボタン; /* 2 */ } ボタン::-moz-focus-inner、 [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { 境界線スタイル: なし; パディング: 0; } ボタン:-moz-フォーカスリング、 [type="button"]:-moz-フォーカスリング, [type="reset"]:-moz-フォーカスリング, [type="submit"]:-moz-focusring { アウトライン: 1px の点線の ButtonText; } フィールドセット { パディング: 0.35em 0.75em 0.625em; } 伝説 ボックスのサイズ: 境界線ボックス; /* 1 */ 色: 継承; /* 2 */ 表示: テーブル; /* 1 */ 最大幅: 100%; /* 1 */ パディング: 0; /* 3 */ 空白: 通常; /* 1 */ } 進捗 表示: インラインブロック; /* 1 */ 垂直位置合わせ: ベースライン; /* 2 */ } テキストエリア { オーバーフロー:自動; } [type="チェックボックス"], [タイプ=ラジオ] ボックスのサイズ: 境界線ボックス; /* 1 */ パディング: 0; /* 2 */ } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { 高さ: 自動; } [タイプ="検索"] -webkit-appearance: テキストフィールド; /* 1 */ アウトラインオフセット: -2px; /* 2 */ } [type="search"]::-webkit-search-cancel-button、 [type="search"]::-webkit-search-decoration { -webkit-appearance: なし; } ::-webkit-ファイルアップロードボタン { -webkit-appearance: ボタン; /* 1 */ フォント: 継承; /* 2 */ } 詳細、 /* 1 */ メニュー { 表示: ブロック; } まとめ { 表示: リスト項目; } キャンバス { 表示: インラインブロック; } テンプレート { 表示: なし; } [隠れた] 表示: なし; } /* リセット */ html, 体、 h1, h2, h3, h4, h5, h6, div、 dl、 dt、 dd、 ウル、 オール、 李、 p、 引用ブロック、 前、 時間、 形、 テーブル、 キャプション、 番目、 td、 形状、 フィールドセット、 伝説、 入力、 ボタン、 テキストエリア、 メニュー { マージン: 0; パディング: 0; ボックスのサイズ: 境界線ボックス; } html, 体 { /* テキスト選択を無効にする */ -webkit-user-select: なし; ユーザー選択: なし; フォント: Oswald、'Open Sans'、Helvetica、Arial、サンセリフ } /* リンクや画像を長押ししてメニューをポップアップするのを無効にする*/ 、 画像 { -webkit-touch-callout: なし; } /*iOS Android は組み込みのシャドウのスタイルを削除します*/ 、 入力{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 入力[type="text"] { -webkit-appearance: なし; } 3. 共通スタイルの抽出 /* テキスト選択を無効にする */ .usn{ -webkit-user-select:なし; -moz-ユーザー選択:なし; -ms-ユーザー選択:なし; -o-ユーザー選択:なし; ユーザー選択:なし; } /* 浮動小数点数 */ .fl { フロート: 左; } .fr { フロート: 右; } .cf { ズーム: 1; } .cf:後{ コンテンツ:"。"; 表示:ブロック; クリア:両方; 可視性:非表示; 高さ:0; オーバーフロー:非表示; } /* 要素タイプ */ .db { 表示: ブロック; } .dn { 表示: なし; } .di { 表示: インライン } .dib {表示: インラインブロック;} .transparent { 不透明度: 0 } /*テキストレイアウト、色*/ .f12 { フォントサイズ:12px } .f14 { フォントサイズ:14px } .f16 { フォントサイズ:16px } .f18 { フォントサイズ:18px } .f20 { フォントサイズ:20px } .fb { フォントの太さ:太字 } .fn { フォントの太さ:normal } .t2 { テキストインデント: 2em } .red,a.red { 色:#cc0031 } .darkblue,a.darkblue { 色:#039 } .gray,a.gray { 色:#878787 } .lh150 { 行の高さ:150% } .lh180 { 行の高さ:180% } .lh200 { 行の高さ:200% } .unl { テキスト装飾:下線; } .no_unl { テキスト装飾:なし; } .tl { テキスト配置: 左; } .tc { テキスト配置: 中央; } .tr { テキスト配置: 右; } .tj { テキスト配置: 両端揃え; テキスト配置: 文字間揃え; } .wn { /* 改行を強制しない */ ワードラップ:通常; 空白:折り返しなし; } .wb { /* 強制改行 */ 空白:通常; 単語折り返し:単語区切り; 単語区切り:すべて区切り; } .wp { /* 空白のシーケンスを保持する*/ オーバーフロー:非表示;テキスト配置:左;空白:事前折り返し;単語折り返し:単語区切り;単語区切り:すべて区切り; } .wes { /* 余分な部分は省略記号で示され、1行に使用されます*/ オーバーフロー:非表示; ワードラップ:通常; 空白:折り返しなし; テキストオーバーフロー:省略記号; } .wes-2 { /* Webkitカーネルとモバイル端末に適用可能*/ ディスプレイ: -webkit-box; -webkit-box-orient: 垂直; -webkit-line-clamp: 2; オーバーフロー: 非表示; } .wes-3 { ディスプレイ: -webkit-box; -webkit-box-orient: 垂直; -webkit-line-clamp: 3; オーバーフロー: 非表示; } .wes-4 { ディスプレイ: -webkit-box; -webkit-box-orient: 垂直; -webkit-line-clamp: 4; オーバーフロー: 非表示; } /* オーバーフロースタイル*/ .ofh { オーバーフロー: 非表示; } .ofs {オーバーフロー: スクロール; } .ofa {オーバーフロー: 自動; } .ofv {オーバーフロー: 可視; } /* 位置決め方法 */ .ps {位置: 静的; } .pr {位置: 相対;ズーム:1; } .pa {位置: 絶対; } .pf {位置: 固定; } /* 垂直方向の配置 */ .vt {垂直位置合わせ: 上; } .vm {垂直位置揃え: 中央; } .vb {垂直位置合わせ: 下; } /* マウススタイル*/ .csd { カーソル: デフォルト; } .csp {カーソル: ポインタ; } .csh {カーソル: ヘルプ; } .csm { カーソル: 移動; } /* フレックスレイアウト */ .df-sb { ディスプレイ:フレックス; アイテムの位置を中央揃えにします。 コンテンツの両端揃え: スペースの間; } .df-sa { ディスプレイ:フレックス; アイテムの位置を中央揃えにします。 コンテンツの両端揃え: スペースを空ける; } /* 垂直中央 */ .df-c { ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの中央揃え: 中央; } .tb-c { テキスト配置:中央; 表示:テーブルセル; 垂直位置揃え:中央; } .ts-c { 位置: 絶対; 左: 50%; 上: 50%; 変換: translate(-50%, -50%); } .ts-mc { 位置: 絶対; 左: 0;右: 0; 下: 0; 上: 0; マージン: 自動; } 上記は、よく使われる CSS カプセル化方法の詳細な概要です。CSS カプセル化の例の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 |
>>: MySQL 面接の質問: ハッシュ インデックスの設定方法
MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...
HTML と CSS を含む JD.com のホームページの静的ページ効果を 3 日間で完成させます...
序文会社の業務上のニーズにより、独自の MongoDB サービスを構築する予定です。MongoDB ...
テキストのレイアウトには、言語に応じていくつかの書式設定要件があります。たとえば、簡体字中国語では、...
この記事では、書籍管理を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は次の...
--1. mysql用の新しいグループとユーザーを作成する # ユーザー追加 -M -s /sbin...
CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...
目次前提条件使用効果コミット前ミューテーション効果コミットミューテーション効果コミットレイアウト効果...
この記事では、例を使用して、MySQL のデータベース間トランザクション XA 操作について説明しま...
この記事では、主にリスト構造を使用して水平ナビゲーション構造を設定する 2 つの方法を紹介します。こ...
入力サブシステムフレームワークLinux 入力サブシステムは、上から下に向かって、入力サブシステム ...
まず、バックグラウンドから来るデータをシミュレートしてみましょう。ここでは、コードをわかりやすくする...
Web サービスは、アプリケーション間の通信に関係しています。SOAP は、Web サービス間の X...
目次ログはどこに保存されますか?コンテナ内のアプリケーションからのログを表示するDockerデーモン...
この記事では、Docker のマルチステージ ビルド機能を使用してイメージ サイズを大幅に削減する方...