CSS を使用して正方形の div を実装する 2 つの方法
|
目標: 辺の長さが等しい正方形を作成する 方法 1: 単位 vw を使用する (ps これが最も簡単な方法だと思います) HTML構造も非常にシンプルで、divは1つだけです。
<html>
<本文>
<div class="square">
</div>
</本文>
</html>
。四角{
幅：50vw;
高さ：50vw;
背景: 青;
}方法2: padding-bottomを使用する 要点: 1. 高さ: 0、コンテンツはパディングにオーバーフローしますが、心配しないでください~~ 2. padding-bottom の値がパーセンテージとして設定されている場合、その値は包含ブロックの幅を基準とします。 3. 包含ブロックを設定する必要がある HTML構造:
<html>
<本文>
<div class="コンテナ">
<div class="square">
</div>
</div>
</本文>
</html>css:
*{
マージン: 0;
}
/* ページの表示領域を埋めるように設定 */
。容器{
高さ：100vh;
幅：100vw;
背景：淡いゴールデンロッド;
}
。四角{
width: 50%; /* コンテナの幅に対する相対値 */
padding-bottom: 50%; /* コンテナの幅に対する相対値 */
背景：淡い緑;
}それだけです、2つあれば十分です。marginも使えますが、崩れる恐れがあるので、この2つで十分です〜〜 要約する 上記は、CSS を使用して正方形の div を実現するために私が紹介した 2 つの方法です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。 |
<<: Docker の win ping 失敗コンテナ回避ガイド
推薦する
MySQL 8 の新機能: 非表示のインデックス
背景インデックスは諸刃の剣です。クエリ速度は向上しますが、DML 操作も遅くなります。結局のところ、...
nginx をベースにリロードなしでアップストリーム サーバーの動的な自動起動と停止を実装する方法
目次1. Consulクラスタをデプロイする1. 準備3. Consulクラスタを作成する4. 管理...
Windows 10 での MySQL 8.0.22 のインストールと設定方法のグラフィック チュートリアル
MySQL 8.0.22のインストールと設定方法のグラフィックチュートリアル、参考までに、具体的な内...
CentOS 8 / RHEL 8 に VirtualBox 6.0 をインストールするための詳細なチュートリアル
VirtualBox は、技術者が異なる種類の複数の仮想マシン (VM) を同時に実行できるようにす...
JavaScript の querySelector メソッドと getElementById メソッドの違いを分析する
目次1. 概要1.1 querySelector() と querySelectorAll() の使...
Pure CSS3はdivの出入りを順番に実現します
この記事は主に、純粋な CSS3 を使用して div が順番に出入りする効果を紹介します。一定の参考...
TypeScript をインストール、使用、自動コンパイルする方法に関するチュートリアル
1. TypeScriptの紹介前回の記事ではTypeScriptのインストール、使い方、自動コンパ...
HTML要素によるFlashブロックの詳細な例
コードをコピーコードは次のとおりです。 wmode パラメータ:透過モード: z-indexを使用し...
WindowsはVMwareを使用してLinux仮想マシンを作成し、CentOS7.2オペレーティングシステムをインストールします。
目次1. ウィザードに従って仮想マシンを作成します2. オペレーティングシステムをインストールします...
Docker イメージのプルとタグ操作 pull | tag
Fabric プロジェクトのソースコードを読み直してみたところ、Docker の部分でよくわからな...
テキストまたはJSONを返すようにnginxを設定する方法
特定のインターフェースをリクエストするときに、指定されたテキスト文字列または JSON 文字列を返す...
Tomcat で複数の war パッケージを展開する方法と手順
1 背景JDK1.8-u181とTomcat8.5.53がインストールされました。インストール後、環...
Vueはechartsに基づいて3次元の縦棒グラフを実装します
3次元縦棒グラフは、正面、右側、上部の3つの部分で構成されています。描画するときは、正面をグラフィッ...
HTMLでのラジオ値の取得、割り当て、登録の詳細な説明
1. ラジオのグループ化名前が同じであれば、それらはグループであり、つまり、次のようにグループ内で選...
Linux コンパイル最適化で習得しなければならないいくつかの姿勢のまとめ
01. コンパイルオプションとカーネルコンパイルLinux カーネル (英語: linux kern...