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 面接の質問: ハッシュ インデックスの設定方法
関連記事: CentOS7でyumを使用してDockerをインストールするDockerを使ってWin...
この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...
1 Linuxディストリビューションのバージョンを確認する[root@typecodes ~]# c...
MySQL の mysql 5.7.18 zip バージョンは、クリックして次のステップをクリックし...
最近、ウェブサイトを https アクセスに変換したいのですが、すべて完了した後、Baidu Web...
原因と結果1. ansibleコマンドを使用してジャンプサーバー上のマシンBをテストすると、次のエラ...
この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...
最近、会社初のミニプログラムの開発に参加しました。開発経験は基本的にWebViewをベースとしたハイ...
最近、データライフサイクル管理の詳細を整理していたときに、小さな問題を発見しました。それは、MySQ...
Vue 3.x プロジェクトの作成 npm init @vitejs/app my-vue-app ...
1. MySQL 5.7 のアンインストール1.1查看yum是否安裝過mysql CD yum li...
パフォーマンスの黄金律:エンドユーザーの応答時間のわずか 10% ~ 20% が HTML ドキュメ...
PostgreSQL正規表現の一般的な機能の概要正規表現は、複雑なデータ処理を必要とするプログラムに...
設定は非常にシンプルですが、毎回確認しないといけないので、記録だけ残しておきます。 1. インストー...
序文Vue(発音は /vjuː/、view に似ています)は、ユーザーインターフェイスを構築するため...