序文 最近、私は夜に時間を取って「CSS World」という本を読んでいます。この本は非常に興味深く、CSS がいくつかの属性スタイルほど単純ではないことに気づきました。昨日、インラインブロック要素で、幅を 0 に設定すると、要素タグ内のコンテンツに最小幅があることを見ました。最小幅は、漢字と英語の文字で異なります。漢字は漢字ごとに区切られ、英語の文字は英語の単語ごとに区切られます。 記事の冒頭 この本では凸凹の例は挙げられていますが、詳しい説明はされていません。以下ではこのコードを詳しく説明します。 コード操作 <スタイル> .ao ,.tu{ 表示: インラインブロック; 幅: 0; フォントサイズ: 14px; 行の高さ: 18px; マージン: 35px; 色: スカイブルー; } .ao:以前、 .tu:before{ /* 境界線の外側のスタイルが重要な役割を果たします。outline-color/style/width */ アウトライン: 2px 実線 #cd0000; /* 要素のフォントファミリーを指定します*/ フォントファミリー: Consolas、Monaco、等幅; } .ao:前{ 内容:「愛してるよ」 } .tu{ /* テキストの方向は左から右、逆方向の場合は*/ 方向: rtl; } .tu:before{ 内容:「愛しています」 } </スタイル> </head> <本文> <div> <span class="ao">お母さんが大好きです</span> <span class="tu">私はあなたを愛していません</span> <span>愛しています</span> </div> </本文> 結果 コード解釈 凹面効果と凸面効果を示すために 2 つの span タグが使用されます。 span タグはインライン要素です。3 つのスタイルについて詳しく知らない場合は、この記事の後半で説明します。 1. まず、display を通じてインライン ブロック要素に変換します。次に、span 要素の幅が最小になるように、幅を 0 に設定します。 2. 2 つの疑似要素の前に共通の疑似要素を使用します。疑似要素のコンテンツが異なると改行が異なり、外側の境界線のスタイルは赤になり、フォント スタイルが指定されます。 direction: rtl; は、テキストの方向を右から左にし、突出部分を凹状の開口部に揃えます。 3. 次の「私は母を愛しているが、私はあなたを愛していない」は、インライン ブロック要素の下部の幅の値に応じて、before 要素の内容の後に表示されます。 タグ分類 ブロックレベル要素 <address>はアドレスを定義します インライン要素 <a>タグはアンカーを定義します インラインブロック要素 <button> ボタン 記事の終わり 一言でまとめると、インライン ブロック要素の幅が 0 の場合、要素内のコンテンツの幅は最小値になります。ぜひあなたも試してみてください。質問があればコメント欄にメッセージを残して一緒に学んでください。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: HTML チュートリアル: 画像のサイズ、配置、間隔、境界線の属性を変更する方法
<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...
1. データベースデータをシミュレートする1-1 データベースとテーブルスクリプトを作成する - v...
1. Dockerネットワークカードを作成する [root@i ~]# brctl addbr d...
1. はじめにこの記事では、主に Linux システムでコマンドライン ツールを使用してファイルを...
先週、先生が私に数字当てゲームをするちょっとした宿題を出しました。とても面白いと思ったので、適当に書...
仕える: # chkconfig --list すべてのシステム サービスを一覧表示します # ch...
今日、Ubuntu 用の小さなツールを顧客に送りましたが、ユーザーはそれを受け取った後、実行できませ...
lsof (開いているファイルのリスト) は、プロセスによって開かれたファイルを表示するツールです。...
Mysqlデータベーステーブルの定期的なバックアップの実装0. 背景実際の開発環境では、フロントエン...
目次1. マスタースレーブレプリケーションマスタースレーブレプリケーション3スレッドマスタースレーブ...
nginx ログは filebeat によって収集され、logstash に渡され、logstash...
今日は、初心者の次のような質問に答えます。学ぶ勇気さえあれば、自分のウェブサイトを構築するのは簡単で...
この記事では、jQueryプラグインを使用してアコーディオンセカンダリメニューを作成します。具体的な...
目次Vueプロジェクトのパッケージ化、起動、最適化Vueプロジェクトのパッケージ化プロジェクトホステ...
エフェクト表示: 環境準備コントローラーノード: 6GB 4時間60GB/30GB/30GB計算ノー...