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 失敗コンテナ回避ガイド
推薦する
要素の円弧モーションを実現する CSS3 サンプルコード
CSS を使用して要素の円弧の動きを制御する方法CSS3 の新しい属性 transfrom トランジ...
MySQLの認可コマンド grant の使い方のまとめ
MySQL 認証コマンド grant の使用方法:この記事の例は MySQL 5.0 以降で実行され...
さまざまな環境での Docker Compose のインストール方法
1. オンラインインストール現在、Linux x86アーキテクチャのオンラインインストールのみを試し...
Web 上の要素を非表示にする方法とその利点と欠点
ソースコードの例: https://codepen.io/shadeed/pen/03caf6b36...
IE6のバグと修正は予防戦略です
元記事:究極の IE6 チートシート: 25 以上の Internet Explorer 6 のバグ...
MySQLは挿入を使用して複数のレコードを挿入し、データを一括で追加します。
table1 に 5 つのレコードを挿入する場合、次のコードは誤りです。 テーブル1に(id,na...
JS はシンプルなブロック崩しピンボールゲームを実装します
この記事では、ブロック崩しピンボールゲームを実装するためのJSの具体的なコードを参考までに紹介します...
MySql インポート CSV ファイルまたはタブ区切りファイル
別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...
docker-compose を使用して MySQL を実行する方法
ディレクトリ構造 。 │ .env │ docker-compose.yml │ └─mysql ├...
ウェブデザイン必携ハンドブック 216 ウェブセーフカラー
Web ページ上の色の表現は、さまざまな要因によって影響を受けます。Web ページで非常に美しい配色...
Linux テキスト検索コマンド find の詳細な使用方法
find コマンドは主にディレクトリやファイルを検索するために使用され、一致のために複数のパラメータ...
MySQLのレプリケーションとチューニングの原則と方法を分析する
1. はじめにMySQL にはレプリケーション ソリューションが付属しており、次のような利点がありま...
mysql 8.0.16 winx64.zip インストールと設定方法のグラフィックチュートリアル
この記事では、MySQL 8.0.16 winx64.zipのインストールと設定方法の具体的なコード...
MySQLで時間別データと最後の時間別データの差をクエリするアイデアの詳細な説明
1. はじめに要件は、特定の時間範囲内で、1 時間ごとのデータと前の 1 時間ごとのデータの差と比率...
MYSQL の解凍版における中国語の文字化け問題の解決方法
MYSQLの解凍バージョンがインストールされます1: 解凍後、my.ini ファイルをコピーし、バイ...